Spring BootとVaadinのサンプルアプリケーション

1概要

Vaadin は、Webユーザーインターフェイスを作成するためのサーバーサイドJavaフレームワークです。

このチュートリアルでは、Spring Bootベースのバックエンド 上で VaadinベースのUIを使用する方法を探ります。 Vaadinの紹介については、https://www.baeldung.com/vaadin[この]チュートリアルを参照してください。

2セットアップ

標準のSpring BootアプリケーションにMavenの依存関係を追加することから始めましょう。

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
</dependency>
  • Vaadinはhttp://start.spring.io/[Spring Initializer]によっても認識されている依存関係です。

このチュートリアルでは、スターターモジュールによって提供されたデフォルトバージョンよりも新しいバージョンのVaadinを使用します。新しいバージョンを使用するには、単にVaadin Bill of Materials(BOM)を次のように定義します。

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>10.0.1</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

3バックエンドサービス

それに対してCRUD操作を実行するために、 firstName および lastName プロパティを持つ Employee エンティティを使用します。

@Entity
public class Employee {

    @Id
    @GeneratedValue
    private Long id;

    private String firstName;
    private String lastName;
}

これは、CRUD操作を管理するための、シンプルで対応するSpring Dataリポジトリです。

public interface EmployeeRepository extends JpaRepository<Employee, Long> {
    List<Employee> findByLastNameStartsWithIgnoreCase(String lastName);
}

EmployeeRepository インターフェースでクエリメソッド findByLastNameStartsWithIgnoreCase を宣言します。 lastName に一致する __Employee __のリストが返されます。

また、いくつかのサンプル __Employee __sをDBに事前入力しましょう。

@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ロジックへの入り口です。

  • 注釈 @ Route は、Spring Bootに自動的にそれを取得してWebアプリケーションのルートに表示するよう指示します。

@Route
public class MainView extends VerticalLayout {
    private EmployeeRepository employeeRepository;
    private EmployeeEditor editor;
    Grid<Employee> 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 はコンポーネントコンテナで、サブコンポーネントを追加順に表示します

次に、コンポーネントを初期化して追加します。

+アイコン付きのボタンにラベルを付けます。

this.grid = new Grid<>(Employee.class);
this.filter = new TextField();
this.addNewBtn = new Button("New employee", VaadinIcon.PLUS.create());

フィルタテキストフィールドとボタンを水平に配置するには、 Horizo​​ntalLayout を使用します。次に、このレイアウト、グリッド、およびエディタを親の垂直レイアウトに追加します。

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はこれを確認します。

リンク:/uploads/vaadin1-100x71.png%20100w[]

4.3. コンポーネントへのロジックの追加

  • ValueChangeMode.EAGER ** を filter テキストフィールドに設定します。これにより、クライアント上で値が変更されるたびに値がサーバーに同期されます。

また、値変更イベントのリスナーを設定します。このイベントは、__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 関数は、フィルタリングされた __Employee __のリストを取得し、グリッドを更新します。

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<Employee> binder = new Binder<>(Employee.class);
    private ChangeHandler changeHandler;
}
  • @ SpringComponent は、Vaadins Component クラスとの競合を避けるため、Springs @ Component アノテーション** の単なる別名です。

@ UIScope はBeanを現在のVaadin UIにバインドします。

現在、編集された Employee employee メンバー変数に格納されています。 firstName および lastName テキストフィールドを介して Employee プロパティをキャプチャします。

フォームには save cancel delete の3つのボタンがあります。

すべてのコンポーネントが配線されると、フォームは次のようになり、行が選択されます。

リンク:/uploads/vaadin2-100x73.png%20100w[]

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アプリケーションを書きました。

いつものように、このコードはhttps://github.com/eugenp/tutorials/tree/master/vaadin[over GitHub]から入手できます。