1. 概要

Vaadinは、Webユーザーインターフェイスを作成するためのサーバー側のJavaフレームワークです。 これを使用すると、Java機能を使用してフロントエンドを作成できます。

2. Mavenの依存関係とセットアップ

pom.xmlに次の依存関係を追加することから始めましょう。

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-server</artifactId>
</dependency>
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-client-compiled</artifactId>
</dependency>
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-themes</artifactId>
</dependency>

依存関係の最新バージョンは、 vaadin-server vaadin-client-compiled vaadin-themesにあります。

  • vaadin-server パッケージ–セッション、クライアント通信など、すべてのサーバーの詳細を処理するためのクラスが含まれています。
  • vaadin-client-compiled – GWTに基づいており、クライアントをコンパイルするために必要なパッケージが含まれています
  • vaadin-themes –いくつかの事前に作成されたテーマと、テーマを作成するためのすべてのユーティリティが含まれています

Vaadinウィジェットをコンパイルするには、 maven-war-plugin vaadin-maven-plugin 、およびmaven-clean-pluginを構成する必要があります。 完全なpomについては、チュートリアルの最後にあるソースコードのpomファイルを確認してください。

また、Vaadinリポジトリと依存関係管理も追加する必要があります。

<repositories>
    <repository>
        <id>vaadin-addons</id>
        <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>
</repositories>
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>13.0.9</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

DependencyManagement タグは、すべてのVaadin依存関係のバージョンを制御します。

アプリケーションをすばやく実行するために、Jettyプラグインを使用します。

<plugin>
    <groupId>org.eclipse.jetty</groupId>
    <artifactId>jetty-maven-plugin</artifactId>
    <version>9.3.9.v20160517</version>
    <configuration>
        <scanIntervalSeconds>2</scanIntervalSeconds>
        <skipTests>true</skipTests>
    </configuration>
</plugin>

プラグインの最新バージョンは、jetty-maven-pluginにあります。

このプラグインを使用すると、次のコマンドを使用してプロジェクトを実行できます。

mvn jetty:run

3. Vaadinとは何ですか?

簡単に言えば、Vaadinは、テーマとコンポーネント、および多くの拡張オプションを備えたユーザーインターフェイスを作成するためのJavaフレームワークです。

フレームワークはサーバー側もカバーします。つまり、ユーザーインターフェースに加えたすべての変更はすぐにサーバーに送信されるため、バックエンドアプリケーションは常にフロントエンドで何が起こっているかを認識します。 。

Vaadinは、クライアント側とサーバー側で構成され、クライアント側は有名なGoogle Widget Toolkitフレームワークの上に構築され、サーバー側はVaadinServletによって処理されます。

4. サーブレット

通常、Vaadinアプリケーションはweb.xmlファイルを使用しません。 代わりに、アノテーションを使用してサーブレットを定義します。

@WebServlet(urlPatterns = "/VAADIN/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = VaadinUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {}

この場合、このサーブレットは /VAADINパスからコンテンツを提供しています。

5. メインクラス

サーブレットで参照されるVaadinUIクラスは、フレームワークからUIクラスを拡張し、 init メソッドをオーバーライドして、Vaadinを有効にしてアプリケーションのブートストラップを完了する必要があります。

次のステップは、レイアウトを作成し、それをアプリケーションのメインレイアウトに追加することです。

public class VaadinUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout verticalLayout = new VerticalLayout();
        verticalLayout.setSpacing(true);
        verticalLayout.setMargin(true);
        setContent(verticalLayout);
}

6. Vaadinレイアウトマネージャー

フレームワークには、事前定義された多数のレイアウトマネージャーが付属しています。

6.1. VerticalLayout

最初に追加されたものが上にあり、最新のものが下にある列にコンポーネントを積み重ねます。

VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.setSpacing(true);
verticalLayout.setMargin(true);
setContent(verticalLayout);

ここでのプロパティは、一般的なCSS用語から大まかに借用されていることに注意してください。

6.2. 水平レイアウト

このレイアウトは、各コンポーネントを左から右に並べて配置します。これは、垂直レイアウトと似ています。

HorizontalLayout horizontalLayout = new HorizontalLayout();

6.3. GridLayout

このレイアウトでは、各ウィジェットがグリッドに配置されます。グリッドの列と行をパラメーターとして渡す必要があります。

GridLayout gridLayout = new GridLayout(3, 2);

6.4. FormLayout

フォームレイアウトは、キャプションとコンポーネントを2つの異なる列に配置し、必須フィールドのオプションのインジケーターを含めることができます。

FormLayout formLayout = new FormLayout();

7. Vaadinコンポーネント

レイアウトが処理されたので、ユーザーインターフェイスを構築するためのより一般的なコンポーネントのいくつかを見てみましょう。

7.1. ラベル

もちろん、ラベルはよく知られています–そして単にテキストを表示するために使用されます:

Label label = new Label();
label.setId("LabelID");
label.setValue("Label Value");
label.setCaption("Label");
gridLayout.addComponent(label);

コンポーネントを作成したら、それをレイアウトに追加するという重要なステップに注目してください。

7.2. リンク

link ウィジェットは、基本的に基本的なハイパーリンクです。

Link link = new Link("Baeldung",
  new ExternalResource("http://www.baeldung.com/"));
link.setTargetName("_blank");

の典型的なHTML値がどのように要素はすべてここにあります。

7.3. TextField

このウィジェットは、テキストを入力するために使用されます。

TextField textField = new TextField();
textField.setIcon(VaadinIcons.USER);

要素をさらにカスタマイズできます。 たとえば、 setIcon()APIを介してウィジェットに画像をすばやく追加できます。

また、FontAwesomeはフレームワークとともに出荷されます。 これは列挙型として定義されており、簡単に利用できます。

7.4. TextArea

ご想像のとおり、 TextArea は、他の従来のHTML要素の横にあります。

TextArea textArea = new TextArea();

7.5. DateFieldおよびInlineDateField

この強力なコンポーネントは、日付を選択するために使用されます。 dateパラメータは、ウィジェットで選択される現在の日付です。

DateField dateField = new DateField("DateField", LocalDate.ofEpochDay(0));

さらに進んで、コンボボックスコントロール内にネストして、スペースを節約できます。

InlineDateField inlineDateField = new InlineDateField();

7.6. PasswordField

これは、標準のマスクされたパスワード入力です。

PasswordField passwordField = new PasswordField();

7.7. RichTextArea

このコンポーネントを使用すると、フォーマットされたテキストを表示でき、フォント、サイズ、配置などを制御するためのボタンでそのようなテキストを操作するためのインターフェイスが提供されます。

RichTextArea richTextArea = new RichTextArea();
richTextArea.setCaption("Rich Text Area");
richTextArea.setValue("<h1>RichTextArea</h1>");
richTextArea.setSizeFull();
Panel richTextPanel = new Panel();
richTextPanel.setContent(richTextArea);

7.8. ボタン

ボタンはユーザー入力をキャプチャするために使用され、さまざまなサイズと色があります。

ボタンを作成するために、通常どおりウィジェットクラスをインスタンス化します。

Button normalButton = new Button("Normal Button");

スタイルを変更すると、いくつかの異なるボタンを使用できます。

tinyButton.addStyleName("tiny");
smallButton.addStyleName("small");
largeButton.addStyleName("large");
hugeButton.addStyleName("huge");
dangerButton.addStyleName("danger");
friendlyButton.addStyleName("friendly");
primaryButton.addStyleName("primary");
borderlessButton.addStyleName("borderless");
linkButton.addStyleName("link");
quietButton.addStyleName("quiet");

無効なボタンを作成できます。

Button disabledButton = new Button("Disabled Button");
disabledButton.setDescription("This button cannot be clicked");
disabledButton.setEnabled(false);
buttonLayout.addComponent(disabledButton);

ブラウザの外観を使用するネイティブボタン:

NativeButton nativeButton = new NativeButton("Native Button");
buttonLayout.addComponent(nativeButton);

そしてアイコン付きのボタン:

Button iconButton = new Button("Icon Button");
iconButton.setIcon(VaadinIcons.ALIGN_LEFT);
buttonLayout.addComponent(iconButton);

7.9. チェックボックス

チェックボックスは状態変更要素であり、オンまたはオフになっています。

CheckBox checkbox = new CheckBox("CheckBox");        
checkbox.setValue(true);
checkbox.addValueChangeListener(e ->
  checkbox.setValue(!checkbox.getValue()));
formLayout.addComponent(checkbox);

7.10. リスト

Vaadinには、リストを処理するための便利なウィジェットがいくつかあります。

まず、ウィジェットに配置するアイテムのリストを作成します。

List<String> numbers = new ArrayList<>();
numbers.add("One");
numbers.add("Ten");
numbers.add("Eleven");

ComboBoxはドロップダウンリストです。

ComboBox comboBox = new ComboBox("ComboBox");
comboBox.addItems(numbers);
formLayout.addComponent(comboBox);

ListSelect はアイテムを垂直に配置し、オーバーフローが発生した場合にスクロールバーを使用します。

ListSelect listSelect = new ListSelect("ListSelect");
listSelect.addItems(numbers);
listSelect.setRows(2);
formLayout.addComponent(listSelect);

NativeSelectComboBoxに似ていますが、ブラウザーのルックアンドフィールは次のとおりです。

NativeSelect nativeSelect = new NativeSelect("NativeSelect");
nativeSelect.addItems(numbers);
formLayout.addComponent(nativeSelect);

TwinColSelect は、これら2つのペイン間で項目を変更できるデュアルリストです。 各アイテムは、一度に1つのペインにのみ存在できます。

TwinColSelect twinColSelect = new TwinColSelect("TwinColSelect");
twinColSelect.addItems(numbers);

7.11. グリッド

グリッドは、データを長方形で表示するために使用されます。 行と列があり、データのヘッダーと脚を定義できます。

Grid<Row> grid = new Grid(Row.class);
grid.setColumns("column1", "column2", "column3");
Row row1 = new Row("Item1", "Item2", "Item3");
Row row2 = new Row("Item4", "Item5", "Item6");
List<Row> rows = new ArrayList();
rows.add(row1);
rows.add(row2);
grid.setItems(rows);

上記のRowクラスは、行を表すために追加した単純なPOJOです。

public class Row {
    private String column1;
    private String column2;
    private String column3;

    // constructors, getters, setters
}

8. サーバープッシュ

もう1つの興味深い機能は、サーバーからUIにメッセージを送信する機能です。

サーバープッシュを使用するには、 pom.xmlに次の依存関係を追加する必要があります:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-push</artifactId>
    <versionId>8.8.5</versionId>
</dependency>

依存関係の最新バージョンは、vaadin-pushにあります。

また、UIを表すクラスに@Pushアノテーションを追加する必要があります。

@Push
@Theme("mytheme")
public class VaadinUI extends UI {...}

サーバープッシュメッセージをキャプチャするためのラベルを作成します。

private Label currentTime;

次に、サーバーからlabelに時間を送信するScheduledExecutorServiceを作成します。

ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool(1);
Runnable task = () -> {
    currentTime.setValue("Current Time : " + Instant.now());
};
scheduleExecutor.scheduleWithFixedDelay(task, 0, 1, TimeUnit.SECONDS);

ScheduledExecutorService はアプリケーションのサーバー側で実行されており、実行されるたびにユーザーインターフェイスが更新されます。

9. データバインディング

ユーザーインターフェイスをビジネスクラスにバインドできます。

まず、Javaクラスを作成します。

public class BindData {

    private String bindName;

    public BindData(String bindName){
        this.bindName = bindName;
    }
    
    // getter & setter
}

次に、単一のフィールドを持つクラスをユーザーインターフェイスのTextFieldにバインドします。

Binder<BindData> binder = new Binder<>();
BindData bindData = new BindData("BindData");
binder.readBean(bindData);
TextField bindedTextField = new TextField();
binder.forField(bindedTextField).bind(BindData::getBindName, BindData::setBindName);

まず、前に作成したクラスを使用して BindData オブジェクトを作成し、次にBinderがフィールドをTextFieldにバインドします。

10. バリデーター

Validators を作成して、入力フィールドのデータを検証できます。 これを行うには、検証するフィールドにバリデーターをアタッチします。

BindData stringValidatorBindData = new BindData("");
TextField stringValidator = new TextField();
Binder<BindData> stringValidatorBinder = new Binder<>();
stringValidatorBinder.setBean(stringValidatorBindData);
stringValidatorBinder.forField(stringValidator)
  .withValidator(new StringLengthValidator("String must have 2-5 characters lenght", 2, 5))
  .bind(BindData::getBindName, BindData::setBindName);

次に、使用する前にデータを検証します。

Button buttonStringValidator = new Button("Validate String");
buttonStringValidator.addClickListener(e -> stringValidatorBinder.validate());

この場合、Stringの長さを検証するStringLengthValidatorを使用していますが、Vaadinは他の便利なバリデーターを提供し、カスタムバリデーターを作成することもできます。

11. 概要

もちろん、この簡単な記事は表面をほとんど傷つけませんでした。 フレームワークはユーザーインターフェイスウィジェットをはるかに超えており、VaadinはJavaを使用して最新のWebアプリケーションを作成するために必要なすべてを提供します。

そして、いつものように、コードはGithubにあります。