ヴァーディン-概要

この章では、Vaadinの概要を説明します。また、この章を終了したら、Vaadinを使用するメリットとデメリットをリストすることもできます。

Vaadinとは何ですか？

Vaadinは、オープンソースのWeb開発フレームワークです。 JavaスクリプトとAJAXの組み込みサポートが付属しています。 Google Webツールキットを使用して、外部機能を組み込むこともできます。 Vaadinは、マークアップファイルを使用せずにブラウザーでリッチコンテンツをレンダリングするため、開発者にとって時間の節約になります。すべてのマークアップとサポートファイルは、Vaadinフレームワークを使用して実行時に生成されます。 Vaadinはプログラミング言語としてJavaを使用し、サーバー側とクライアント側の両方の開発をサポートしています。

長所と短所

このセクションでは、WebアプリケーションでVaadinを使用する利点と欠点について説明します。

利点

Vaadinは、その開発者に次の利点を提供します-

サーバー側プログラミング

VaadinはJavaを使用して構築されています。さらに、開発者がマークアップ言語を使用してWebページを開発する必要はありません。 Vaadinは、Google Webツールキットを使用してあらゆる種類のサポートも提供します。

複数のオプションを提供

Vaadinは、従来のWebテクノロジーと比較して、多くのコンポーネント、レイアウト、異なるリスナーを提供します。したがって、Vaadinを使用することをお勧めします。

完全にオブジェクト指向

VaadinはJavaベースであるため、完全にオブジェクト指向です。 Java開発者は、単にVaadinクラスとその使用法を理解するだけで、Webサイトを簡単に開発できます。

学習と統合が簡単

Vaadinはプラグインのサポートを提供し、他のWebフレームワークとの習得と統合が非常に簡単です。

デメリット

Vaadinは、その開発者に次の欠点を提供します-

熟練した人材を見つけるのが難しい

Vaadinは最近の技術であるため、適切なスキルを持つ人材は常にオンデマンドであり、費用がかかる場合があります。したがって、Vaadinの複雑な問題を解決できるリソースを見つけるのは難しいかもしれません。

Java Scriptファイルのサイズ*

コンテキストによっては、動的なjavaスクリプトファイルのサイズが大きくなる可能性があり、そのため、インターネット経由でアクセシビリティを維持するためにより大きなサーバーが必要になります。

派手なユーザーインターフェイスなし

Vaadinはビジネスに焦点を合わせました。 Vaadinを使用して派手なWebサイトを作成することはできません。

スケーラビリティ

一部の専門家は、VaadinがAngular.jsなどの他のシンクライアントベースのテクノロジーと競合できないと感じています。そのため、Vaadinは他の利用可能なテクノロジーよりも拡張性が低くなります。

Vaadin-環境のセットアップ

この章では、ローカル環境をセットアップしてVaadinアプリケーションを開発する方法を学びます。

Vaadinのインストール手順

Vaadinをインストールしてアプリケーションに使用するには、以下の手順に従う必要があります。

ステップ1-Java 8のインストール

VaadinはJVMを使用します。したがって、ローカル開発環境にはJDK 8を使用する必要があります。 Oracleの公式Webサイトを参照して、JDK 8以上のバージョンをダウンロードしてインストールしてください。正しく動作するように、JAVAの環境変数を設定する必要がある場合があります。 Windowsオペレーティングシステムでのインストールを確認するには、コマンドプロンプトでjava –versionを押すと、出力としてシステムにインストールされているjavaバージョンが表示されます。

ステップ2-IDEのインストール

オンラインで利用可能なIDEを使用できます。次の表に、さまざまなIDEのダウンロードリンクを示します。

IDE Name	Installation Link
Netbean	https://netbeans.org/downloads/
Eclipse	https://www.eclipse.org/downloads/
Intellij	https://www.jetbrains.com/idea/download/#section=windows

どちらのIDEを使用する場合でも、必ず最新バージョンを使用してください。このチュートリアルではEclipse IDEを使用していることに注意してください。

ステップ3-サーバー要件

このチュートリアルでは、Tomcatをアプリケーションサーバーとして使用します。この章では、システムでTomcatサーバーを構成します。 Netbeanの最新バージョンをインストールする場合は、Netbean IDEとともにApache Tomcatを直接インストールできます。それ以外の場合は、https://tomcat.apache.org/[公式ウェブサイト]からTOMCATの最新バージョンをダウンロードしてください。次の手順でこれらのファイルを使用するため、抽出したTomcatファイルをCドライブまたはプログラムファイルに保存します。

ステップ4-クライアント要件

RichFacesはUIコンポーネントです。インターネットブラウザは、アプリケーションのクライアントとして機能します。 IE、Safari、Chromeなどの最新のインターネットブラウザーを使用できます。

ステップ5-Eclipseの構成

Eclipse Market Placeに移動し、検索バーに Vaadin と入力します。以下に示す画面が表示されます。 *インストール*ボタンをクリックしてインストールします。

Eclipseの構成

Eclipseは関連するすべてのファイルをダウンロードしてインストールし、最新のIDEで構成する必要があるため、このステップには時間がかかる場合があります。インストールが正常に完了すると、新しい変更が反映されるのは同じ再起動後のみであるため、Eclipseはクイック再起動のプロンプトを表示します。再起動すると、ローカルシステムでVaadinアプリケーションを使用する準備が整います。

Vaadin-最初のアプリケーションの作成

前の章では、ローカルシステムへのVaadinのインストールについて説明しました。この章では、Vaadinを使用して最初のアプリケーションを作成することから始めましょう。このチュートリアルではEclipse IDEを使用していることを思い出してください。

Vaadinで最初のアプリケーションの作成を開始するには、ローカルシステムでEclipse IDEを開き、以下の手順に従います-

ステップ1 *-*ファイル*メニューで、*新規*をクリックし、*その他*をクリックします。理解を深めるために、次のスクリーンショットを参照してください。

最初のアプリケーション

ステップ2 *-検索ボックスに *Vaadin と入力すると、次のスクリーンショットに示すようにオプションが表示されます。ここで、オプションから Vaadin 8 を選択し、 Next をクリックします。

Vaadin検索ボックス

ステップ3 *-以下に示すように、4つのオプションのあるウィンドウが表示されます。最初のオプションを選択して、次の手順に進みます。

最初のオプション

ステップ4 *-次に、次のスクリーンショットに示すような画面が表示されます。グループIDとアーティファクトIDを指定して、[完了]を選択します。これでプロジェクトが完了し、EclipseがVaadinを作成します。

グループIDおよびアーティファクトID

この手順には構成設定が必要なため、時間がかかる場合があります。アーティファクトIDは、現在のプロジェクトの名前です。 MyFirstApp という名前を付けました。

ステップ5 *-これで、以下に示すように、自動化されたVaadinプロジェクトのディレクトリ構造を見つけることができます-

Direcory Structure

ステップ6 *-最初のVaadinアプリケーションの準備ができました。任意のアプリケーションサーバーでプロジェクトを実行します。準備ができたら、以下に示すように画面を見つけることができます-

最初のVaadinアプリケーション

ステップ7 *-テキストボックスにテキストを入力し、 *Click Me ボタンをクリックします。次のように出力を観察できます-

テキストボックス

おめでとうございます。最初のVaadinアプリケーションが正常に作成されました。

Vaadin-アーキテクチャ

この章では、Vaadinアーキテクチャについて詳しく学習します。 Vaadinは、Webサイト開発用に2つのモジュールを提供しています-サーバー側とクライアント側の1つです。以下の画像は、Vaadinフレームワークのランタイム環境全体を示しています。

Vaadin Architecture

Vaadinランタイム構成を扱うときは、次の点を理解する必要があります-

Vaadinクライアント側エンジンは、基本的なHTTPメソッドとブラウザーを介して出力またはユーザーアクションをレンダリングするために使用されます。表現ブロックのこの生成は完全に自動化されています。バックエンドのみをコーディングする必要があり、すべてのマークアップが自動的に生成されます。
サーバー側は、イベントベースの要求を受信し、クライアントの応答を準備するビジネスパーツを処理します。 2つの層の間の通信は、HTTPプロトコルを介して行われます。
ターミナルアダプターは要求を受信し、サーバーベースのJavaクラスであるサーバー側UIコンポーネントを使用して同じ要求を処理し、別のコンポーネントGWTを使用してレンダリングする応答を生成します。これはVaadin Servlet APIとも呼ばれ、サーブレットのプロパティを拡張し、さまざまなクライアントからリクエストを受け取り、ユーザーの応答を決定します。
VaadinはGWT（Google Web Tool Kit）を使用しているため、従来のJava Scriptベースのアプリケーションよりも高速な出力と拡張されたスケーラビリティを提供します。
Vaadinは、従来のXMLベースのアプリケーションよりも高速であるため、JSONを使用します。
別のコンポーネント、つまり CSS と Theme を使用して、すばらしいクライアント側の応答を提供できます。このコンポーネントは、基本的に外観と表現を分離します。
データバインディングモジュールは、必要に応じてDBに接続して操作するためのAPIを提供します。

Vaadin-ユーザーインターフェイスコンポーネント

Vaadinは、Webページに豊富なユーザーインターフェイスコンポーネントを構築するために使用されます。この章では、良質のWebページを維持するためにVaadinによって導入されたさまざまなユーザーインターフェイスコンポーネントについて学習します。この章の最初の部分では、基本的なWebコンポーネントとその使用方法について説明し、2番目の部分では、バックエンドでのコンポーネントのバインドについて説明します。

フィールドコンポーネント

フィールドは、ユーザーがIO操作を通じて操作できるWebコンポーネントです。 VaadinはJAVAに基づいているため、Vaadinでは、すべてのWebコンポーネントにVaadinライブラリ関数とともにクラスが実装されています。以下に示す画像は、 AbstractField <T> という名前の基本クラスからさまざまなフィールドコンポーネントが継承される方法を示しています。

Vaadinフィールドコンポーネント

これらのモジュールはすべて、UI開発のモジュールに似ていることに注意してください。 Vaadinには、それぞれを実装する個別のクラスがあります。これらについては、今後の章で詳しく説明します。

ラベル

ラベルは、Webページ内の編集不可能なテキストに言及するために使用されます。以下の例は、アプリケーションでラベルを使用する方法を示しています。指定された例では、JAVAクラスを作成し、* LabelExam.java * nterfaceという名前を付け、その* init（）*メソッドをオーバーライドして実行することに注意してください。

package com.MyTutorials.MyFirstApp;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

//extending UI
public class LabelExam extends UI {
   @Override
   protected void init(VaadinRequest request) {
      final HorizontalLayout hLayout = new HorizontalLayout();//creating a Layout
      Label l1 = new Label(" Welcome to the World of Vaadin Tutorials.");
      Label l2 = new Label("\n Happy Learning .." ,ContentMode.PREFORMATTED);//Content Mode tells JVM to interpret the String mentioned in the label. Hence label2 will be printed in next line because of “\n”.
      hLayout.addComponents(l1,l2);//adding labels to layout
      setContent(hLayout);//setting the layout as a content of the web page.
   }
  //Code to control URL
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)

   @VaadinServletConfiguration(ui = LabelExam.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記の例では、2つのラベルを作成し、最後にそのラベルをレイアウトに追加しました。レイアウトの詳細については、今後の章で説明します。 VaadinServlet は、URLを制御するために実装されています。ただし、実際のプロジェクトでは、相互にリンクされるため、すべてのJavaアプリケーションでサーブレットを定義する必要はありません。ファイルを選択し、[サーバーで実行]をクリックすると、上記のコードにより、次のような出力が生成されます。

Vaadin Run on Server

Link

リンクは、他のWebサイトへの外部リンクを実装するのに役立ちます。このクラスは、HTMLのハイパーリンクタグとまったく同じように機能します。以下の例では、リンクを使用して、ここをクリック*というイベントに応じてユーザーを別のWebサイトにリダイレクトします。次に、以下に示すように *MyUI.java クラスを変更します。

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Link;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();

      final HorizontalLayout hLayout = new HorizontalLayout();

      Link link = new Link("Click Me",new ExternalResource("https://www.finddevguides.com/"));
      hLayout.addComponent(link);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記の例では、別のWebサイトへの外部ハイパーリンクを作成しました。ブラウザに次の出力が表示されます。

Vaadin Hyperlink

ユーザーがリンクをクリックすると、https://www.finddevguides.com/index [www.finddevguides.com]にリダイレクトされます

テキストフィールド

このセクションでは、クラス内のVaadinビルドを使用してテキストフィールドを生成する方法について説明します。このため、以下に示すようにMyUI.javaクラスを更新します。

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;

import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      Label l1 = new Label("Example of TextField--\n ",ContentMode.PREFORMATTED);
      TextField text = new TextField();
      text.setValue("----");
      layout.addComponents(l1,text);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

ここで、プロジェクトを更新し、クリーンビルドします。ブラウザで次の出力を確認できます。ブラウザを再起動して、最新の変更を取得することを忘れないでください。

Vaadinテキストフィールド

テキストエリア

このセクションでは、事前定義されたVaadinクラスを使用して、ブラウザーでテキスト領域を作成する方法について説明します。たとえば、以下のコードを確認してください。

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;

import com.vaadin.ui.Alignment;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      TextArea text = new TextArea();
      text.setValue(" I am the example of Text Area in Vaadin");
      hLayout.addComponent(text);
      hLayout.setComponentAlignment(text,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードは、ブラウザで以下の出力を生成します-

Vaadin Text Area

日時

package com.example.myapplication;

import java.time.LocalDate;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;

import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.DateField;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Enter today's Date\n",ContentMode.PREFORMATTED);
      DateField date = new DateField();
      date.setValue(LocalDate.now());
      date.setLocale(new Locale("en","IND"));
      hLayout.addComponents(l1,date);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(date,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {
}

上記の例では、Vaadinの事前定義された日付関数を使用して、Webページに日付コンポーネントを設定しました。このコードは、以下のスクリーンショットに示すように出力を提供します-

Vaadin Date and Time

ボタン

以下に示すコードは、Webページにボタンを適用する方法を説明します。ここでは、 Click Me という名前のボタンを使用しました。

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;

import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Link;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      TextArea text = new TextArea();
      text.setValue("Please enter some Value");
      Button b = new Button("Click Me");
      hLayout.addComponent(text);
      hLayout.addComponent(b);
      hLayout.setComponentAlignment(text,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(b,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)

   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

Vaadin Button

チェックボックス

Vaadinは、Webページにチェックボックスを作成する組み込みクラスも提供します。以下の例では、VaadinリッチWebコンポーネントを使用してチェックボックスを作成します。

package com.example.myapplication;

import java.time.LocalDate;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;

import com.vaadin.ui.CheckBox;
import com.vaadin.ui.DateField;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Example of Check Box\n",ContentMode.PREFORMATTED);
      CheckBox chk1 = new CheckBox("Option1");
      CheckBox chk2 = new CheckBox("Option2");
      CheckBox chk3 = new CheckBox("Option3");
      hLayout.addComponents(l1,chk1,chk2,chk3);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk2,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk3,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードは、次のようにブラウザに出力を生成します。ユーザーのチェックボックスをいくつでも作成できます。以降の章では、Webページにチェックボックスを挿入するさまざまな方法について学習します。

Vaadinチェックボックス

データバインディング

このセクションでは、フレームワークとしてVaadinを使用して、フロントエンドからバックエンドにデータをバインドする方法を説明します。以下に示すコードは、データフィールドを持つフロントエンドから入力を受け取ることに注意してください。データフィールドをバインドするために、Beanクラスを作成しましょう。 Javaクラスを作成し、 Employee.java という名前を付けます。

package com.example.myapplication;

public class EmployeeBean {

   private String name = "";
   private String Email = " ";
   public EmployeeBean() {
      super();
     //TODO Auto-generated constructor stub
   }
   public EmployeeBean(String name, String email) {
      super();
      this.name = name;
      Email = email;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      System.out.println("asdassd");
      this.name = name;
   }
   public String getEmail() {
      return Email;
   }
   public void setEmail(String email) {
      Email = email;
   }
}

従業員クラスのデータフィールドをバインドするには、 MyUI.java クラスを変更する必要があります。変更されたクラスの次のコードを確認してください。

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.PropertyId;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;

import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      EmployeeBean bean = new EmployeeBean("finddevguides","Abc@finddevguides.com");
      Binder<EmployeeBean> binder = new Binder  <EmployeeBean>();
      final FormLayout form = new FormLayout();
      Label l1 = new Label("Please fill Below Form");
      Label labelName = new Label("Name--");
      TextField name = new TextField();
      binder.bind(name,EmployeeBean::getName,EmployeeBean::setName);
      Label labelEmail = new Label("Email---");
      TextField email = new TextField();
      binder.bind(email,EmployeeBean::getEmail,EmployeeBean::setEmail);
      Button button = new Button("Process..");
      form.addComponents(l1,labelName,name,labelEmail,email,button);
      setContent(form);
      binder.setBean(bean);//auto binding using in built method
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {
   }
}

上記のコードは、ブラウザに次の出力を生成します。

Vaadinデータバインディング

表

テーブルはVaadinの最も有用な機能の1つです。テーブルセルには、任意のタイプのデータを含めることができます。テーブルコンポーネントは、行と列の構造に編成された表形式ですべてのデータを表示するために開発されています。ただし、Vaadin 8リリーステーブルの機能は絶対的なものであり、同じ機能がGridコンポーネントで変更されています。まだ古いバージョンのVaadinを使用している場合は、以下の形式で示されている表を自由に使用できます。

/*Create the table with a caption.*/
Table table = new Table("This is my Table");
/* Define the names and data types of columns.
 *The "default value" parameter is meaningless here.*/

table.addContainerProperty("First Name", String.class, null);
table.addContainerProperty("Last Name", String.class, null);
table.addContainerProperty("Year", Integer.class, null);

/*Add a few items in the table.*/
table.addItem(new Object[] {"Nicolaus","Copernicus",new Integer(1473)}, new Integer(1));
table.addItem(new Object[] {"Tycho", "Brahe", new Integer(1546)}, new Integer(2));
table.addItem(new Object[] {"Giordano","Bruno", new Integer(1548)}, new Integer(3));
table.addItem(new Object[] {"Galileo", "Galilei", new Integer(1564)}, new Integer(4));
table.addItem(new Object[] {"Johannes","Kepler", new Integer(1571)}, new Integer(5));
table.addItem(new Object[] {"Isaac", "Newton", new Integer(1643)}, new Integer(6));

今後の GRID の章では、グリッドの作成とそれを使用したデータの入力について詳しく学習します。

Tree

ツリーコンポーネントは、Webサイトのディレクトリ構造を作成するために使用されます。このセクションでは、Vaadinフレームワークを使用してWebページにツリーを取り込む方法を学習します。以下に示すように、必要な MyUI クラスを更新します。

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Component;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      VerticalLayout layout = new VerticalLayout();
      Tree<String> tree = new Tree<>();
      TreeData<String> treeData =tree.getTreeData();

     //Couple of childless root items
      treeData.addItem(null, "Option1");
      treeData.addItem("Option1", "Child1");
      treeData.addItem(null, "Option2");
      treeData.addItem("Option2", "Child2");

     //Items with hierarchy
      treeData.addItem(null, "Option3");
      treeData.addItem("Option3", "Child3");
      layout.addComponent(tree);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードは、ブラウザに次の出力を生成します。

vaadin Tree

メニューバー

メニューバーコンポーネントは、Webサイトにメニューを作成するのに役立ちます。動的にすることも、ネストすることもできます。 Vaadin Menu Barコンポーネントを使用してネストされたメニューバーを作成した例を以下に示します。次のようにクラスを変更してください。

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;

import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.MenuBar;
import com.vaadin.ui.MenuBar.MenuItem;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      VerticalLayout layout = new VerticalLayout();
      MenuBar barmenu = new MenuBar();
      layout.addComponent(barmenu);

     //A feedback component
      final Label selection = new Label("-");
      layout.addComponent(selection);

     //Define a common menu command for all the menu items.
      MenuBar.Command mycommand = new MenuBar.Command() {
         public void menuSelected(MenuItem selectedItem) {
            selection.setValue("Ordered a " +
            selectedItem.getText() +
            " from menu.");
         }
      };

     //Put some items in the menu hierarchically
      MenuBar.MenuItem beverages =
      barmenu.addItem("Beverages", null, null);
      MenuBar.MenuItem hot_beverages =
      beverages.addItem("Hot", null, null);
      hot_beverages.addItem("Tea", null, mycommand);
      hot_beverages.addItem("Coffee", null, mycommand);
      MenuBar.MenuItem cold_beverages =
      beverages.addItem("Cold", null, null);
      cold_beverages.addItem("Milk", null, mycommand);
      cold_beverages.addItem("Weissbier", null, mycommand);

     //Another top-level item
      MenuBar.MenuItem snacks =
      barmenu.addItem("Snacks", null, null);
      snacks.addItem("Weisswurst", null, mycommand);
      snacks.addItem("Bratwurst", null, mycommand);
      snacks.addItem("Currywurst", null, mycommand);

     //Yet another top-level item
      MenuBar.MenuItem services =
      barmenu.addItem("Services", null, null);
      services.addItem("Car Service", null, mycommand);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記の例では、ネストされたメニューバーを作成しました。上記のコードを実行すると、次のようにブラウザで出力を確認できます-

Vaadinメニューバー

Vaadin-コア要素

これまでに、Vaadinのさまざまなコンポーネントについて学びました。この章では、Vaadinがライブラリの一部として提供するさまざまなコアコンポーネントについて学習します。 Vaadinのコアコンポーネントは、ユーザーフレンドリーで、わかりやすく、最新のブラウザーと互換性があります。

コンボボックス

コンボボックスは、ユーザーがドロップダウンメニューから選択するのに役立つ選択コンポーネントであり、開発者が特定のフィールドのドロップダウンを作成するのにも役立ちます。以下に示す例は、コンボボックスの作成方法を説明しています。ここでは、Vaadinコンボボックスを使用してPlanetの履歴を作成します。

package com.example.myapplication;

public class Planet {

   private int id;
   private String name;

   public Planet(){}
   public Planet(int i, String name){
      this.id = i;
      this.name = name;
   }
   public int getId() {
      return id;
   }
   public void setId(int id) {
      this.id = id;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name; 6. Vaadin – Core Elements
   }
}

以下に示すコードを観察し、それに応じてMyUI.javaクラスを更新します。

package com.example.myapplication;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.MenuBar;
import com.vaadin.ui.MenuBar.MenuItem;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {

     //VerticalLayout layout = new VerticalLayout();
     //List of planets
      List<Planet> planets = new ArrayList();
      planets.add(new Planet(1, "Mercury"));
      planets.add(new Planet(2, "Venus"));
      planets.add(new Planet(3, "Earth"));
      ComboBox<Planet> select =
      new ComboBox<>("Select or Add a Planet");
      select.setItems(planets);

     //Use the name property for item captions
      select.setItemCaptionGenerator(Planet::getName);

     //layout.addComponent(select);
      setContent(select);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードは、ブラウザに次の出力を生成します。

vaadin

コンテキストメニュー

コンテキストメニューは、開発者がブラウザで依存リストを表示するのに役立つ機能です。ただし、この機能はVaadin 8の最新バージョンでは非推奨になりました。 *メニューバー*オプションを使用しても同じことができることに注意してください。アプリケーションで同じものを使用する場合は、以下に示すコードを使用できます。 npmディレクトリを使用してポリマーをインストールし、htmlコードで同じものを使用する必要があることに注意してください。

<vaadin-context-menu>
   <template>
      <vaadin-list-box>
         <vaadin-item>First menu item</vaadin-item>
         <vaadin-item>Second menu item</vaadin-item>
      </vaadin-list-box>
   </template>

   <p>This paragraph has the context menu provided in the above template.</p>
   <p>Another paragraph with the context menu that can be opened with <b>right click</b> or with <b>long touch.</b></p>
</vaadin-context-menu>

これはJavaベースのチュートリアルであるため、Vaadinコンテキストメニューを学習するには、メニューバーオプションを使用することをお勧めします。

日付ピッカー

日付ピッカーはVaadinがサポートする別のコンポーネントであり、開発者が簡単にWebサイトを作成するのに役立ちます。次のコードは、Vaadin UIで日付ピッカーを作成する方法を示しています。これはVaadin 8の最近のバージョンでは廃止されているため、日付フィールドにデータを入力するにはJava日付オブジェクトを使用する必要があることに注意してください。ただし、Vaadin Webプロジェクトを使用している場合は、引き続き使用できます。

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.time.LocalDate;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.DateField;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Label;

import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Enter today's Date\n",ContentMode.PREFORMATTED);
      DateField date = new DateField();
      date.setValue(LocalDate.now());
      date.setLocale(new Locale("en","IND"));
      hLayout.addComponents(l1,date);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(date,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードを実行すると、以下に示すように、次の出力を見つけることができます-

Vaadin Date Picker

以下に示すように、JavaのVaadin日付ピッカークラスを直接使用することもできます。これにより、ブラウザーで同じ結果が得られます。

DatePicker datePicker = new DatePicker();

DatePickerクラスを使用するには、Vaadin V 3.0を使用する必要がありますが、Vaadin 8を使用していることに注意してください。

データグリッド

データグリッドとは、データのリストを渡すことです。ブラウザのツリーと同様に機能します。次の例は、グリッドの仕組みを示しています。

以下に示すようにクラスを作成し、MyCharArray.javaという名前を付けます。

package com.TutorialsMy.myApp;

public class MyCharArray {
   private String c;

   public String getC() {
      return c;
   }
   public void setC(String c) {
      this.c = c;
   }

   public MyCharArray(){}
   public MyCharArray(String ch){
      this.c = ch;
   }
}

次に、以下に示すようにMyUI.javaクラスを変更します-

package com.TutorialsMy.myApp;

import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;

import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;

import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {
      VerticalLayout layout = new VerticalLayout();

      List<MyCharArray> values = Arrays.asList(
      new MyCharArray("First Value"),
      new MyCharArray("Second Value"),
      new MyCharArray("thired Value"));

      final Grid<MyCharArray> grid = new Grid<>("My Table");
      grid.setItems(values);
      grid.addColumn(MyCharArray::getC).setCaption("Value");
      layout.addComponent(grid);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

ここで、上記のコードを実行すると、ブラウザーに次の出力が表示されます。

Vaadin Data Grid

分割レイアウト

Vaadinは、開発者の選択に応じてWebページを設計するための多くのツールを提供します。分割レイアウトを使用すると、選択に応じて画面全体をカスタマイズできます。次の例は、Vaadinコアコンポーネントを使用してレイアウトを分割するさまざまなオプションを示しています。

以下に示すようにMyUI.javaを変更します-

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.List;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;

import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {

     //A 400x250 pixels size layout
      Panel panel = new Panel("Split Panel example");
      Panel ex = new Panel("My Splitpanel- horizontal ");

     //Have a horizontal split panel as its content
      HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
      hsplit.addComponent(ex);
      panel.setContent(hsplit);
      setContent(hsplit);

     /* Panel ex1 = new Panel("My Splitpanel- vertical ");
     //Have a horizontal split panel as its content
      VerticalSplitPanel vsplit = new VerticalSplitPanel();
      hsplit.addComponent(ex1);
      panel.setContent(vsplit);
      setContent(vsplit);*/
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

同じ方法で、ウィンドウを垂直に分割できます。上記のコードを実行すると、ブラウザに次の出力が生成されます。

Vaadin Split Layout

アップロードする

アップロードコンテンツは、ユーザーがサーバーにファイルをアップロードするのに役立ちます。 Vaadinコアフレームワークで制御される2つの異なるモード、即時モードと非即時モードがあります。即時モードでは、アップロード時にファイル名入力ボックスとファイルを選択するためのボタンが表示されます。非即時モードでは、ユーザーはアップロードボタンを使用してアップロードをトリガーする必要があります。

次の例は、アップロードのこれら2つのモードを示しています-

2つのアップロードモード

ICON

Vaadinには、一般的な目的として使用できるアイコンが組み込まれています。これらのアイコンには、画像よりも多くの利点があります。コードサイズを削減し、コンパイルを高速化します。次の例は、Vaadinでこれを使用する方法を示しています。

以下に示すようにMyUI.javaクラスを更新します。

package com.TutorialsMy.myApp;

import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.List;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {

     //A 400x250 pixels size layout
      VerticalLayout content = new VerticalLayout();
      Panel p = new Panel("Example of Vaadin Upload-");
      TextField name = new TextField("Name");
      name.setIcon(VaadinIcons.USER);
      content.addComponent(name);

     //Button allows specifying icon resource in constructor
      Button ok = new Button("OK", VaadinIcons.CHECK);
      content.addComponent(ok);
      setContent(content);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

このコードはブラウザで実行され、ブラウザで以下の出力を生成します-

ヴァーディンアイコン

Vaadin-レイアウトコンポーネント

レイアウトコンポーネントは、フロントエンドでデータを保持および表現するプレースホルダーとして機能します。この章では、VAADINのさまざまなタイプのレイアウトコンポーネントについて学習します。

垂直および水平レイアウト

垂直および水平レイアウトは、ユーザーがデータを垂直または水平にレンダリングするのに役立つ順序付けられたレイアウトです。これまで見てきた多くの以前の例でこの概念を使用しました。次の例は、Vaadinアプリケーションで同じものを使用する方法を示します。

package com.TutorialsMy.myApp;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      Label l1 = new Label("Your Name-\n",ContentMode.PREFORMATTED);
      Label l2 = new Label("Your Address-\n",ContentMode.PREFORMATTED);
      Label l3 = new Label("Your Postal code-\n",ContentMode.PREFORMATTED);
      final VerticalLayout vLayout = new VerticalLayout();
      final HorizontalLayout hLayout = new HorizontalLayout();
      vLayout.setDescription("This is a example of vertical layout");
      vLayout.addComponents(l1,l2,l3);;
     //hLayout.setDescription("This is example of Horizontal layout");
     //hLayout.addComponents(l1,l2,l3);
      setContent(vLayout);
     //setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

このコードは、ブラウザで以下の出力を生成します。

Vaadin Vertical Layout

垂直ではなく水平レイアウトを使用すると、同じコードがブラウザの出力の下に生成されます。

Vaadin水平レイアウト

Grid

グリッドはVaadinのもう1つのコンポーネントであり、ユーザーはこれを使用してブラウザで表形式のデータを表すことができます。このセクションでは、グリッドとその使用法について学習します。

最初に「Person」という名前のクラスを作成します。

package com.TutorialsMy.myApp;

public class Person {
   private String name;
   private int number;
   public Person(){}
   public Person(String string, int i) {

     //TODO Auto-generated constructor stub
      this.name = string;
      this.number =i;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }
   public int getNumber() {
      return number;
   }
   public void setNumber(int number) {
      this.number = number;
   }
}

ここで、MyUI.javaクラスに次のコードを追加します-

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      HorizontalLayout hLayout = new HorizontalLayout();

     //Have some data
      List<Person> people = Arrays.asList(
      new Person("First Boy", 98),
      new Person("Second Boy", 99),
      new Person("Thired Boy", 57));

     //Create a grid bound to the list
      Grid<Person> grid = new Grid<>();
      grid.setItems(people);
      grid.addColumn(Person::getName).setCaption("Name");
      grid.addColumn(Person::getNumber).setCaption("Number in Examination");
      hLayout.addComponent(grid);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

両方のステップが完了したら、それらをコンパイルして実行します。あなたはブラウザで次の出力を観察することができます-

Vaadin Grid

フォームレイアウト

フォームレイアウトはVaadinの別のコンポーネントであり、2つの異なる列形式でデータを表すのに役立ちます。フォームのように見えます。このセクションでは、このレイアウトについて詳しく学習します。

以下に示すように、MyUI.javaファイルを編集します-

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {
      FormLayout form = new FormLayout();
      TextField tf1 = new TextField("Name");
      tf1.setIcon(VaadinIcons.USER);
      tf1.setRequiredIndicatorVisible(true);
      form.addComponent(tf1);
      TextField tf2 = new TextField("Street address");
      tf2.setIcon(VaadinIcons.ROAD);
      form.addComponent(tf2);
      TextField tf3 = new TextField("Postal code");
      tf3.setIcon(VaadinIcons.ENVELOPE);
      form.addComponent(tf3);

     //normally comes from validation by Binder
      tf3.setComponentError(new UserError("Doh!"));
      setContent(form);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードをコンパイルして実行すると、ブラウザに次の出力がレンダリングされます-

VaadinFormレイアウト

パネル

パネルは、フレームが輪郭を描いた単一のコンポーネントコンテナです。フォームレイアウトにより多くの機能を提供します。次の例では、Vaadinでパネルを使用する方法を理解します。

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {
      HorizontalLayout layout = new HorizontalLayout();
      Panel panel = new Panel("Panel Example ");
      panel.addStyleName("mypanelexample");
      panel.setSizeUndefined();//Shrink to fit content
      layout.addComponent(panel);

     //Create the content
      FormLayout content = new FormLayout();
      content.addStyleName("mypanelcontent");
      content.addComponent(new TextField("Name"));
      content.addComponent(new TextField("Password"));
      content.setSizeUndefined();//Shrink to fit
      content.setMargin(true);
      panel.setContent(content);
      setContent(panel);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードを実行すると、ブラウザに次の出力が生成されます

Vaadinパネル

サブウィンドウ

サブウィンドウは、アクティブなブラウザー内のフローティングパネルです。これにより、ユーザーはコンテンツを別のウィンドウに分離できます。他のレイアウトコンポーネントと同様に、ランタイムVaadin Htmlコードによっても制御されます。次の例では、サブウィンドウパネルの動作を確認します。

以下に示すように、MYUIコードを変更します。

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      setContent(new Label("Sub Window"));

     //Create a sub-window and set the content
      Window subWindow = new Window("~~~~~~~~Sub-window Example~~~~~~~");
      VerticalLayout subContent = new VerticalLayout();
      subWindow.setContent(subContent);

     //Put some components in it
      subContent.addComponent(new Label("This is a new label inside the window"));
      subContent.addComponent(new Button("Click Me :)"));

     //Center it in the browser window
      subWindow.center();

     //Open it in the UI
      addWindow(subWindow);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードをコンパイルして実行すると、ブラウザに次の出力が表示されます。

Vaadinサブウィンドウ

タブシート

タブシートは、タブを使用してコンポーネントを切り替えることができるマルチコンポーネントコンテナです。すべてのタブは、タブシートの上部にタブバーとして整理されています。次のコード。 Vaadin Tab-Sheetの使用方法を示します。

以下に示すようにMyUI.javaクラスを変更してください。

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;import com.vaadin.annotations.Theme;

import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {
      TabSheet tabsheet = new TabSheet();
      VerticalLayout layout = new VerticalLayout();
      layout.addComponent(tabsheet);

     //Create the first tab
      VerticalLayout tab1 = new VerticalLayout();
      tab1.addComponent(new Label("Eaxmple of Train"));
      tab1.setCaption("Train");
      tabsheet.addTab(tab1).setIcon(VaadinIcons.TRAIN);;

     //This tab gets its caption from the component caption
      VerticalLayout tab2 = new VerticalLayout();
      tab2.addComponent(new Label("Example of Plane"));
      tab2.setCaption("Plane");
      tabsheet.addTab(tab2).setIcon(VaadinIcons.AIRPLANE);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードを実行すると、ブラウザで次の出力を確認できます。タブヘッダーでの選択に応じて、電車と飛行機を切り替えることができます。

Vaadinタブシート

絶対レイアウト

絶対レイアウトを使用すると、コンテンツを任意の方法で選択した位置に配置できます。次のコードは、absoluteの使用例です。

以下に示すようにMyUI.javaクラスを更新します。

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {

     //A 400x250 pixels size layout
      AbsoluteLayout layout = new AbsoluteLayout();
      layout.setWidth("400px");
      layout.setHeight("200px");

     //A component with coordinates for its top-left corner
      TextField text = new TextField("Example of Absolute Layout");
      layout.addComponent(text, "left: 50px; top: 50px;");
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードを実行すると、ブラウザで次の出力を確認できます-

Vaadin Absolute Layout

カスタムレイアウト

カスタムレイアウトとは、要件に応じてカスタマイズできるレイアウトであり、したがって名前です。次の例は、アプリケーションのカスタムレイアウトを1つ作成する方法を示しています。

以下に示すようにMyUI.javaクラスを変更します-

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {

     //A 400x250 pixels size layout
      Panel loginPanel = new Panel("Login");
      CustomLayout content = new CustomLayout("layoutname");
      content.setSizeUndefined();
      loginPanel.setContent(content);
      loginPanel.setSizeUndefined();

     //No captions for fields is they are provided in the template
      content.addComponent(new TextField(), "username");
      content.addComponent(new TextField(), "password");
      content.addComponent(new Button("Login"), "okbutton");

     //content.addComponent(loginPanel
      setContent(loginPanel);
      setContent(content);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードを実行すると、ブラウザで次の出力を確認できます-

Vaadinカスタムレイアウト

Vaadin-テーマ

この章では、テーマとして知られるVaadinの別の機能について詳しく説明します。一般に、テーマとは、実行時にカスタマイズ可能なフレームワークを意味します。コンテンツは、サーバー側で受信した応答に応じて動的になります。

Vaadinは、独自のJavaベースのSAASコンパイラーの助けを借りて、テーマをすぐに使用するためのクールなインターフェースを提供します。テーマ機能は、カスタマイズ可能なスタイルとアプリケーションの外観を提供するためにVaadinに提供されます。テーマはあらかじめ作成されたテンプレートであり、開発者は時間を節約する独自のアプリケーションを構築するためにテンプレートをカスタマイズする必要があります。

Vaadinのすべてのテーマは theme フォルダーの下にあり、各サブフォルダーは自己記述可能です。したがって、コードの変更とカスタマイズも非常に簡単です。テーマには、。saas *タイプと *.css タイプの2種類のCSSファイルを含めることができます。 Vaadinにはフォルダ名に関する制限はありませんが、上記の画像からわかるように、常にフォルダ名を使用することをお勧めします。

*Inbuilt* と *Custom* の2種類のテーマが利用可能です。 このセクションでは、それらについて詳しく説明します。

ビルトインテーマ

テーマに組み込まれたVaadinは、次に示すようにテーマ名で注釈を付けることで提供されます。

@Theme("mytheme")
public class MyUI extends UI {

Vaadinアプリケーションの実行中のすべての灰色の背景は、組み込みの css ファイルに由来します。別の種類のテーマであるカスタムテーマとして作成するために、これらのファイルを変更できます。テーマに組み込まれたVaadinについて学ぶことができるものは何もありません。上記のコンポーネントはすべてVaadinテーマの一部です。

カスタムテーマ–テーマの作成と使用

カスタムテーマは、Webアプリケーションの VAADIN/themes フォルダー、Mavenプロジェクトの WebContent フォルダーまたは src/main/webapp の下のEclipseプロジェクトに配置されます。これらの場所は固定されており、どのタイプの要件でも変更しないことをお勧めします。 mytheme という名前でSAASテーマを定義するには、ファイルをテーマフォルダーの下のmythemeフォルダーに配置してから、プロジェクトを再構築する必要があります。 Vaadinは、ブラウザから要求されるたびに、独自の.cssファイルをその場で自動的に作成します。

Vaadinカスタムテーマ

要件に応じて、cssファイルのスタイルコンテンツを変更できます。ただし、プロジェクトをもう一度ビルドすることを忘れないでください。プロジェクトは進行中に反映され始めます。

レスポンシブテーマ

Vaadinはレスポンシブテーマもサポートしています。レスポンシブWebページは、画面サイズに応じてフォントサイズを自動的に設定できます。 Vaadinアプリケーションでは、アプリケーション全体をレスポンシブにするために1行のコードを追加する必要があります。

Vaadinについてさらに学ぶために、次の例を考えてみましょう。以下に示すように、MyUI.javaクラスを変更します。

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.time.LocalDate;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.Responsive;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.DateField;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;

import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Enter today's Date\n",ContentMode.PREFORMATTED);
      DateField date = new DateField();
      date.setValue(LocalDate.now());
      date.setLocale(new Locale("en","IND"));
      hLayout.addComponents(l1,date);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(date,Alignment.BOTTOM_CENTER);
      Responsive.makeResponsive(hLayout);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードを実行すると、ブラウザで次の出力を確認できます。

Vaadin Responsive Theme

レイアウトの応答性をテストするには、ブラウザーを縮小すると、それに応じてパネルとレイアウトコンポーネントのサイズと形状が変化することがわかります。

Vaadin-quick-guide

ヴァーディン-概要

Vaadinとは何ですか？

長所と短所

利点

デメリット

Vaadin-環境のセットアップ

Vaadinのインストール手順

ステップ1-Java 8のインストール

ステップ2-IDEのインストール

ステップ3-サーバー要件

ステップ4-クライアント要件

ステップ5-Eclipseの構成

Vaadin-最初のアプリケーションの作成

Vaadin-アーキテクチャ

Vaadin-ユーザーインターフェイスコンポーネント

フィールドコンポーネント

ラベル

Link

テキストフィールド

テキストエリア

日時

ボタン

チェックボックス

データバインディング

表

Tree

メニューバー

Vaadin-コア要素

コンボボックス

コンテキストメニュー

日付ピッカー

データグリッド

分割レイアウト

アップロードする

ICON

Vaadin-レイアウトコンポーネント

垂直および水平レイアウト

Grid

フォームレイアウト

パネル

サブウィンドウ

タブシート

絶対レイアウト

カスタムレイアウト

Vaadin-テーマ

ビルトインテーマ

カスタムテーマ–テーマの作成と使用

レスポンシブテーマ