Vaadin-core-elements

提供：Dev Guides
移動先:案内、検索

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 {}
}

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

ヴァーディンアイコン

「https://www.finddevguides.com/index.php?title=Vaadin-core-elements&oldid=10294」から取得
Powered by MediaWiki