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

、https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22com.vaadin%22%20AND%20a%3A%22vaadin-client-compiled%22[vaadin-client-compiled]、https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22com.vaadin%22%20AND%20a%3A%22vaadin-themes%22[vaadin-themes]。


  • vaadin-server

    パッケージ – すべてのサーバーを扱うためのクラスを含みます

セッション、クライアント通信などの詳細


  • vaadin-client-compile

    – GWTに基づいており、必要なものを含みます

クライアントをコンパイルするためのパッケージ
**

vaadin-themes

– いくつかの既成のテーマとすべてのユーティリティが含まれています

私たちのテーマを作る

Vaadinウィジェットをコンパイルするには、https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.apache.maven.plugins%22%20AND%20a%3A%を設定する必要があります22maven-war-plugin%22[maven-war-plugin]、https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22com.vaadin%22%20AND%20a%3A% 22vaadin-maven-plugin%22[vaadin-maven-plugin]、およびhttps://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.apache.maven.plugins%22% 20AND%20a%3A%22maven-clean-plugin%22[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>8.0.7</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>


DependencyManagement

タグは、すべてのVaadin __dependenciesのバージョンを制御します。

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

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

プラグインの最新バージョンはここにあります。

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

mvn jetty:run


3 Vaadinとは何ですか?

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

  • フレームワークはサーバー側もカバーしています** これは、ユーザーインターフェースに加えたすべての変更が即座にサーバーに送信されることを意味します。

  • Vaadinは、クライアントサイドとサーバーサイドで構成されています** – クライアントサイドは、よく知られたGoogle Widget Toolkitフレームワークの上に構築され、サーバーサイドは

    VaadinServlet

    によって処理されます。

** 4サーブレット

**

通常、Vaadinアプリケーションは

web.xml

ファイルを使用しません。代わりに、アノテーションを使って

servlet

を定義します。

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

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

** 5メインクラス

**

サーブレットで参照される

VaadinUI

クラスは、フレームワークからUIクラスを拡張し、Vaadinを有効にしてアプリケーションのブートストラップを完了するために

init

メソッドをオーバーライドする必要があります。

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

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 = new VerticalLayout();
verticalLayout.setSpacing(true);
verticalLayout.setMargin(true);
setContent(verticalLayout);

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


6.2.

Horizo​​ntalLayout


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

HorizontalLayout horizontalLayout = new HorizontalLayout();


6.3.

グリッドレイアウト


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

GridLayout gridLayout = new GridLayout(3, 2);


6.4.

FormLayout


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

FormLayout formLayout = new FormLayout();

** 7. バディン成分

**

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

** 7.1.

ラベル


**

リンク:/uploads/label.png[]

ラベルはもちろんよく知られています – そして単にテキストを表示するのに使われます

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");


<a>

要素の典型的なHTML値がすべてここにあることに注目してください。

** 7.3.

テキストフィールド

**

リンク:/uploads/textfield.png[]

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

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

要素をさらにカスタマイズできます。たとえば、

setIcon()

APIを使ってウィジェットに画像を素早く追加できます。

また、

Font Awesomeはフレームワーク

と共に箱から出して出荷されていることに注意してください。これはEnumとして定義されており、簡単に利用できます。

** 7.4.

TextArea

**

ご想像のとおり、

TextArea

は他の従来のHTML要素の隣にあります。

TextArea textArea = new TextArea();

** 7.5.

DateField



InlineDateField

**

リンク:/uploads/datefield.png[]

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

DateField dateField = new DateField("DateField", new Date(0));

リンク:/uploads/inlinedatefield-277×300.png%20277w[]

スペースを節約するために、さらに進んでコンボボックスコントロール内にネストすることができます。

InlineDateField inlineDateField = new InlineDateField();

** 7.6.

PasswordField

**

リンク:/uploads/passwordfield.png[]

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

PasswordField passwordField = new PasswordField();

** 7.7.

RichTextArea

**

リンク:/uploads/richtextarea-300×174.png%20300w[]

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

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.

ボタン

**

リンク:/uploads/buttons-300×162.png%20300w[]

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

ボタンを作成するために、いつものようにウィジェットクラスをインスタンス化します。

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(FontAwesome.ALIGN__LEFT);
buttonLayout.addComponent(iconButton);

** 7.9.

チェックボックス

**

リンク:/uploads/checkbox.png[]

チェッ

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

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

リンク:/uploads/combobox-300×168.png%20300w[]

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


ListSelect

はアイテムを垂直方向に配置し、オーバーフローの場合はスクロールバーを使用します。

リンク:/uploads/listselect.png[]

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


NativeSelect



ComboBox

と似ていますが、ブラウザの外観は次のようになります。

リンク:/uploads/nativeselect.png[]

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


TwinColSelect

は、これら2つのペイン間で項目を変更できる二重リストです。各アイテムは一度に1つのペインにしか存在できません。

リンク:/uploads/twincolselect-300×206.png%20300w[]

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

** 7.11.

グリッド

**

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

リンク:/uploads/grid-300×261.png%20300w[]

Grid grid = new Grid("Grid");
grid.setColumns(new Object[]{"Column1", "Column2", "Column3"});
grid.addRow(new Object[]{"Item1", "Item2", "Item3"});
grid.addRow(new Object[]{"Item4", "Item5", "Item6"});

** 8サーバープッシュ+

**

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

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

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

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

また、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

にバインドします。

BindData bindData = new BindData("BindData");
BeanFieldGroup beanFieldGroup = new BeanFieldGroup(BindData.class);
beanFieldGroup.setItemDataSource(bindData);
TextField bindedTextField
  = (TextField) beanFieldGroup.buildAndBind("BindName", "bindName");

まず、前に作成したクラスを使用して

BindData

オブジェクトを作成し、次に

BeanFieldGroup

がフィールドを__TextFieldにバインドします。

** 10バリデータ

**

入力フィールドのデータを検証するために

Validators

を作成できます。そのために、検証したいフィールドにバリデータを付けます。

TextField stringValidator = new TextField();
stringValidator.addValidator(
  new StringLengthValidator("String must have 2-5 characters lenght", 2, 5, true));
stringValidator.setValidationVisible(false);

それから私達はそれを使う前に私達のデータを検証します:

Button buttonStringValidator = new Button("Validate String");
buttonStringValidator.addClickListener(e -> {
    try {
        stringValidator.setValidationVisible(false);
        stringValidator.validate();
    } catch (InvalidValueException err) {
        stringValidator.setValidationVisible(true);
    }
});

この場合、

String

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


11概要

もちろん、この素早い記述は表面をほとんど傷つけませんでした。フレームワークはユーザーインターフェースウィジェット以上のものです、VaadinはJavaを使って現代のWebアプリケーションを作成するためにあなたが必要とするすべてを提供します。

そしていつものように、コードはhttps://github.com/eugenp/tutorials/tree/master/vaadin[over Github]で見つけることができます。