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-100×71.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-100×73.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]から入手できます。