Spring BootとVaadinを使用したサンプルアプリケーション
1. 概要
2. セットアップ
Mavenの依存関係を標準のSpringBootアプリケーションに追加することから始めましょう。
com.vaadin
vaadin-spring-boot-starter
Vaadinは、Spring Initializerによって認識される依存関係でもあります。
このチュートリアルでは、スターターモジュールによってもたらされるデフォルトよりも新しいバージョンのVaadinを使用します。 新しいバージョンを使用するには、次のようにVaadinの部品表（BOM）を定義するだけです。
com.vaadin
vaadin-bom
10.0.11
pom
import
3. バックエンドサービス
firstNameプロパティとlastNameプロパティを持つEmployeeエンティティを使用して、CRUD操作を実行します。
@Entity
public class Employee {
@Id
@GeneratedValue
private Long id;
private String firstName;
private String lastName;
}CRUD操作を管理するためのシンプルで対応するSpringDataリポジトリは次のとおりです。
public interface EmployeeRepository extends JpaRepository {
List findByLastNameStartsWithIgnoreCase(String lastName);
} EmployeeRepositoryインターフェイスでクエリメソッドfindByLastNameStartsWithIgnoreCaseを宣言します。 lastNameに一致するEmployeesのリストを返します。
また、DBにいくつかのサンプルEmployeesを事前入力してみましょう。
@Bean
public CommandLineRunner loadData(EmployeeRepository repository) {
return (args) -> {
repository.save(new Employee("Bill", "Gates"));
repository.save(new Employee("Mark", "Zuckerberg"));
repository.save(new Employee("Sundar", "Pichai"));
repository.save(new Employee("Jeff", "Bezos"));
};
}4. Vaadin UI
4.1. MainViewクラス
MainViewクラスは、VaadinのUIロジックのエントリポイントです。 Annotation @Route tells Spring Boot to automatically pick it up and show at the root of the web app:
@Route
public class MainView extends VerticalLayout {
private EmployeeRepository employeeRepository;
private EmployeeEditor editor;
Grid grid;
TextField filter;
private Button addNewBtn;
} @Routeアノテーションにパラメーターを指定することにより、ビューが表示されるURLをカスタマイズできます。
@Route(value="myhome")このクラスは、次のUIコンポーネントを使用してページに表示されます。
EmployeeEditor editor –作成および編集する従業員情報を提供するために使用されるEmployeeフォームを示します。
Grid<Employee> grid –Employeesのリストを表示するグリッド
TextField filter –グリッドのフィルタリングに基づく姓を入力するテキストフィールド
Button addNewBtn –新しいEmployeeを追加するためのボタン。 EmployeeEditorエディターを表示します。
内部的にemployeeRepositoryを使用してCRUD操作を実行します。
4.2. コンポーネントを一緒に配線する
MainViewはVerticalLayoutを拡張します。 VerticalLayout is a component container, which shows the subcomponents in the order of their addition（垂直方向）。
次に、コンポーネントを初期化して追加します。
ボタンにラベルをアイコンで提供します。
this.grid = new Grid<>(Employee.class);
this.filter = new TextField();
this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create());HorizontalLayoutを使用して、フィルターテキストフィールドとボタンを水平方向に配置します。 次に、このレイアウト、ガード、およびエディターを親の垂直レイアウトに追加します。
HorizontalLayout actions = new HorizontalLayout(filter, addNewBtn);
add(actions, grid, editor);桁の高さと列名を指定します。 また、テキストフィールドにヘルプテキストを追加します。
grid.setHeight("200px");
grid.setColumns("id", "firstName", "lastName");
grid.getColumnByKey("id").setWidth("50px").setFlexGrow(0);
filter.setPlaceholder("Filter by last name");アプリケーションの起動時、UIは次のようになります。
4.3. コンポーネントへのロジックの追加
ValueChangeMode.EAGERをfilterテキストフィールドに設定します。 This syncs the value to the server each time it’s changed on the client.
また、値変更イベントのリスナーを設定します。このイベントは、filter:で提供されたテキストに基づいてフィルター処理された従業員のリストを返します。
filter.setValueChangeMode(ValueChangeMode.EAGER);
filter.addValueChangeListener(e -> listEmployees(e.getValue()));グリッド内の行を選択すると、Employeeフォームが表示され、ユーザーは名前と名前を編集できます。
grid.asSingleSelect().addValueChangeListener(e -> {
editor.editEmployee(e.getValue());
});[新しい従業員の追加]ボタンをクリックすると、空白のEmployeeフォームが表示されます。
addNewBtn.addClickListener(e -> editor.editEmployee(new Employee("", "")));最後に、エディターによって行われた変更をリッスンし、バックエンドからのデータでグリッドを更新します。
editor.setChangeHandler(() -> {
editor.setVisible(false);
listEmployees(filter.getValue());
});listEmployees関数は、Employeesのフィルターされたリストを取得し、グリッドを更新します。
void listEmployees(String filterText) {
if (StringUtils.isEmpty(filterText)) {
grid.setItems(employeeRepository.findAll());
} else {
grid.setItems(employeeRepository.findByLastNameStartsWithIgnoreCase(filterText));
}
}4.4. フォームの作成
ユーザーが従業員を追加/編集するための簡単なフォームを使用します。
@SpringComponent
@UIScope
public class EmployeeEditor extends VerticalLayout implements KeyNotifier {
private EmployeeRepository repository;
private Employee employee;
TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
Button save = new Button("Save", VaadinIcon.CHECK.create());
Button cancel = new Button("Cancel");
Button delete = new Button("Delete", VaadinIcon.TRASH.create());
HorizontalLayout actions = new HorizontalLayout(save, cancel, delete);
Binder binder = new Binder<>(Employee.class);
private ChangeHandler changeHandler;
} VaadinsComponentクラスとの競合を回避するためのThe @SpringComponent is just an alias to Springs @Component annotation。
@UIScopeは、Beanを現在のVaadinUIにバインドします。
現在、編集されたEmployeeはemployeeメンバー変数に格納されています。 firstNameおよびlastNameテキストフィールドを介してEmployeeプロパティをキャプチャします。
フォームには、save、cancel、deleteの3つのボタンがあります。
すべてのコンポーネントが一緒に配線されると、フォームは行選択について次のようになります。
Binder which binds the form fields with the Employee properties using the naming conventionを使用します：
binder.bindInstanceFields(this);ユーザー操作に基づいて適切なEmployeeRepositorメソッドを呼び出します。
void delete() {
repository.delete(employee);
changeHandler.onChange();
}
void save() {
repository.save(employee);
changeHandler.onChange();
}5. 結論
この記事では、永続性のためにSpring BootとSpring Data JPAを使用したフル機能のCRUD UIアプリケーションを作成しました。
いつものように、コードはover on GitHubで利用できます。