Vaadin 快速指南

上一頁
下一頁

Vaadin - 概述

本章將提供Vaadin的概述。完成本章後，您還將能夠列出使用Vaadin的優缺點。

什麼是Vaadin？

Vaadin是一個開源的Web開發框架。它內建支援JavaScript和AJAX。您還可以使用Google Web Toolkit將其中的外部功能包含在內。Vaadin可以為開發者節省時間，因為它無需任何標記檔案即可在瀏覽器中呈現豐富的內容。所有標記和支援檔案都將在執行時藉助Vaadin框架生成。Vaadin使用Java作為程式語言，並且支援伺服器端和客戶端開發。

優勢和劣勢

本節解釋了在Web應用程式中使用Vaadin的優勢和劣勢。

優勢

Vaadin為其開發者提供了以下優勢：

伺服器端程式設計

Vaadin是使用Java構建的。此外，開發者無需使用標記語言來開發網頁。Vaadin還提供使用Google Web Toolkit的各種支援。

提供多種選擇

與任何傳統的Web技術相比，Vaadin提供了許多元件、佈局和不同的偵聽器；因此，使用Vaadin更可取。

完全面向物件

由於Vaadin是基於Java的，因此它是完全面向物件的。Java開發人員只需瞭解Vaadin類及其用途，就可以輕鬆開發網站。

易於學習和整合

Vaadin提供外掛支援，並且易於學習和與其他Web框架整合。

劣勢

Vaadin為其開發者提供了以下劣勢：

難以找到熟練的技術人員

Vaadin是一項新興技術，因此熟練的技術人員始終供不應求，而且成本可能很高。因此，找到能夠解決Vaadin複雜問題的資源可能很困難。

JavaScript檔案的大小

根據上下文，動態JavaScript檔案的大小可能會增加，從而需要更大的伺服器來維護其在網際網路上的可訪問性。

沒有花哨的使用者介面

Vaadin專注於業務。您不能使用Vaadin建立任何花哨的網站。

可擴充套件性

一些專家認為，Vaadin無法與其他基於瘦客戶端的技術（如Angular.js）競爭。因此，Vaadin的可擴充套件性不如其他可用技術。

Vaadin - 環境設定

在本章中，我們將學習如何設定本地環境以開發Vaadin應用程式。

Vaadin安裝步驟

您必須按照以下步驟在應用程式中安裝和使用Vaadin。

步驟1 - Java 8安裝

Vaadin使用JVM。因此，本地開發環境必須使用JDK 8或更高版本。請參考Oracle的官方網站下載並安裝JDK 8或更高版本。您可能需要設定JAVA的環境變數才能使其正常工作。要在Windows作業系統中驗證您的安裝，請在命令提示符中鍵入java –version，輸出將顯示系統中安裝的Java版本。

步驟2 - IDE安裝

您可以使用任何線上提供的IDE。下表提供了不同IDE的下載連結。

IDE名稱 安裝連結
Netbeans https://netbeans.org/downloads/
Eclipse https://www.eclipse.org/downloads/
IntelliJ IDEA https://www.jetbrains.com/idea/download/#section=windows

無論您使用哪個IDE，請確保使用最新版本。請注意，在本教程中，我們使用的是Eclipse IDE。

步驟3 - 伺服器要求

在本教程中，我們將使用Tomcat作為應用程式伺服器。在本章中，我們將在系統中配置Tomcat伺服器。如果您安裝的是最新版本的Netbeans，則可以直接與Netbeans IDE一起安裝Apache Tomcat。否則，請從其官方網站下載最新版本的TOMCAT。將解壓縮的Tomcat檔案儲存到C驅動器或Program Files中，因為我們將在接下來的步驟中使用這些檔案。

步驟4 - 客戶端要求

RichFaces是一個UI元件。網際網路瀏覽器將充當我們應用程式的客戶端。您可以使用任何現代網際網路瀏覽器，例如IE、Safari、Chrome等。

步驟5 - 配置Eclipse

轉到Eclipse Marketplace，並在搜尋欄中鍵入**Vaadin**。您將看到如下所示的螢幕。單擊**Install**按鈕並安裝它。

Configuring Eclipse

此步驟可能需要一些時間，因為Eclipse需要下載所有相關檔案並安裝它們，並將其與最新的IDE配置。安裝成功後，Eclipse將提示您快速重啟，因為只有在重啟後才會反映新的更改。重啟後，您的本地系統就可以使用Vaadin應用程式了。

Vaadin - 建立第一個應用程式

在上一章中，您已經瞭解瞭如何在本地系統上安裝Vaadin。在本章中，讓我們從使用Vaadin建立第一個應用程式開始。回想一下，在本教程中我們使用的是Eclipse IDE。

要在Vaadin中開始建立您的第一個應用程式，請在本地系統中開啟Eclipse IDE，並按照以下步驟操作：

**步驟1** - 在**檔案**選單上，單擊**新建**，然後單擊**其他**。請參考以下螢幕截圖以更好地理解。

First Application

**步驟2** - 現在，在搜尋框中鍵入**Vaadin**，您將看到如下所示的選項。現在，從選項中選擇**Vaadin 8**，然後單擊**下一步**。

Vaadin Search Box

**步驟3** - 您將看到一個包含四個選項的視窗，如下所示。選擇第一個選項，然後繼續下一步。

First Option

**步驟4** - 接下來，您將看到如下所示的螢幕。提供組ID和構件ID，然後選擇完成。這將完成專案，Eclipse將為您建立Vaadin。

Group Id and Artifact Id

請注意，此步驟可能需要一些時間，因為它需要配置設定。構件ID是當前專案的名稱。我們將其命名為**MyFirstApp**。

**步驟5** - 現在，您可以找到如下所示的自動化Vaadin專案的目錄結構：

Direcory Structure

**步驟6** - 您的第一個Vaadin應用程式已準備就緒。在任何應用程式伺服器上執行該專案。準備就緒後，您將看到如下所示的螢幕：

First Vaadin Application

**步驟7** - 在文字框中輸入任何文字，然後單擊**單擊我**按鈕。您可以觀察到如下所示的輸出：

Text Box

恭喜！您已成功建立您的第一個Vaadin應用程式。

Vaadin - 架構

在本章中，您將詳細瞭解Vaadin架構。Vaadin提供兩個用於網站開發的模組：一個用於伺服器端，另一個用於客戶端。下圖說明了Vaadin框架的整個執行時環境。

Vaadin Architecture

處理Vaadin執行時配置時，您必須瞭解以下幾點：

  • Vaadin客戶端引擎用於透過基本HTTP方法和瀏覽器呈現輸出或使用者操作。此表示塊的生成是完全自動化的。您只需要編寫後端程式碼，所有標記都將自動生成。

  • 伺服器端處理接收基於事件的請求併為客戶端準備響應的業務部分。兩層之間的通訊透過HTTP協議進行。

  • 終端介面卡接收請求並使用伺服器端UI元件處理請求，這是一個基於伺服器的JAVA類，用於生成使用另一個元件GWT呈現的響應。這也被稱為Vaadin Servlet API，它擴充套件了servlet的屬性，接收來自不同客戶端的請求，並確定使用者的響應。

  • Vaadin使用GWT（Google Web Toolkit），因此比傳統的基於JavaScript的應用程式呈現更快的輸出和增強的可擴充套件性。

  • Vaadin使用JSON，因為它比傳統的基於XML的應用程式更快。

  • 可以使用名為**CSS**和**主題**的單獨元件來提供出色的客戶端響應。此元件基本上將外觀與表示分開。

  • 資料繫結模組提供API以連線和操作資料庫（如果需要）。

Vaadin - 使用者介面元件

Vaadin用於在網頁中構建豐富的使用者介面元件。在本章中，您將瞭解Vaadin為維護高質量網頁而引入的不同使用者介面元件。本章的第一部分討論了基本的Web元件及其用途，而第二部分討論了在後端繫結元件。

欄位元件

欄位是使用者可以透過IO操作操作的Web元件。Vaadin基於JAVA，因此在Vaadin中，所有Web元件都具有一個已實現的類以及Vaadin庫函式。下圖顯示了不同的欄位元件如何從名為**AbstractField**的基類繼承。

Vaadin Field Component

請注意，所有這些模組都類似於UI開發中的那些模組。在Vaadin中，我們有單獨的類來實現每一個模組。您將在接下來的章節中詳細瞭解這些內容。

標籤

標籤用於在網頁中提及任何不可編輯的文字。下面的示例顯示瞭如何在我們的應用程式中使用標籤。請注意，在給定的示例中，我們建立了一個JAVA類並將其命名為**LabelExam.java**介面，我們將覆蓋其**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 {}
}

在上面的示例中，我們建立了兩個標籤，最後我們將該標籤新增到我們的佈局中。您將在接下來的章節中瞭解有關佈局的更多資訊。**VaadinServlet**已實現以控制URL。但是，在實際專案中，您不必在每個java應用程式中定義servlet，因為它將相互關聯。選擇檔案並單擊**在伺服器上執行**，上面給出的程式碼將產生如下所示的輸出。

Vaadin Run on Server

連結

連結用於實現到其他網站的外部連結。此類的工作方式與HTML的超連結標籤完全相同。在下面的示例中，我們將使用Link根據名為**單擊此處**的事件將使用者重定向到另一個網站。現在，修改**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://tutorialspoint.tw/"));
      hLayout.addComponent(link);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

在上面的示例中，我們建立了一個到另一個網站的外部連結。它將在瀏覽器中給我們以下輸出。

Vaadin Hyperlink

一旦使用者單擊連結，他們將被重定向到www.tutorialspoint.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 Text Field

文字區域

本節解釋瞭如何使用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

日期和時間

您可以使用日期選擇器在瀏覽器中填充日期和時間。觀察以下示例程式碼。在這裡，我們使用了Vaadin預定義的Date類在瀏覽器中填充日期和時間。
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 預定義的日期函式來填充網頁中的日期元件。這段程式碼將給出如下截圖所示的輸出：

Vaadin Date and Time

按鈕

以下程式碼將解釋如何在網頁中應用按鈕。這裡，我們使用了名為點選我的按鈕。

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 按鈕

複選框

Vaadin 還提供內建類來在網頁中建立複選框。在下面的例子中，我們將使用 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 {}
}

以上程式碼將在瀏覽器中產生如下所示的輸出。您也可以為使用者建立任意數量的複選框。在後續章節中，您將學習在網頁中填充複選框的不同方法。

Vaadin Check Box

資料繫結

本節解釋如何使用 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("TutorialsPoint","Abc@TutorialsPoint.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 Data Binding

表格

表格是 Vaadin 最常用的功能之一。表格單元格可以包含任何型別的資料。表格元件用於以表格格式顯示所有資料，這些資料組織成行和列結構。但是，自從 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的章節中，您將學習更多關於 Grid 建立和使用相同方法填充資料的知識。

樹

樹元件用於在網站中填充目錄結構。在本節中，您將學習如何使用 Vaadin 框架在網頁中填充樹。更新所需的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

選單欄

選單欄元件幫助我們在網站上建立選單。它可以是動態的，也可以是巢狀的。請查詢以下示例，我們使用 Vaadin 選單欄元件建立了一個巢狀選單欄。繼續修改我們的類，如下所示。

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 Menu Bar

Vaadin - 核心元素

到目前為止，您已經學習了 Vaadin 的不同元件。在本章中，您將學習 Vaadin 庫提供的不同核心元件。Vaadin 核心元件使用者友好、易於理解且與任何現代瀏覽器相容。

組合框

組合框是一個選擇元件，它幫助使用者從下拉選單中進行選擇，它也幫助開發人員為特定欄位建立下拉選單。以下示例解釋瞭如何建立組合框。這裡我們將使用 Vaadin 組合框填充行星曆史。

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 目錄安裝 polymer 並將其用於您的 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 支援的另一個元件，它幫助開發人員輕鬆建立網站。以下程式碼顯示瞭如何在 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 提供了許多工具來根據開發人員的選擇設計網頁。使用分割佈局，我們可以根據自己的選擇自定義整個螢幕。以下示例向您展示了使用 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 核心框架控制。在立即模式下，上傳顯示檔名輸入框和用於選擇檔案的按鈕。在非立即模式下，使用者需要使用上傳按鈕觸發上傳。

以下示例顯示了這兩種上傳模式：

Vaadin Two Upload Modes

圖示

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 Icon

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 Horizontal Layout

網格

網格是 Vaadin 的另一個元件，使用者可以使用它在瀏覽器中表示表格資料。在本節中，我們將學習關於網格及其用法的知識。

首先建立一個名為“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 的另一個元件，它幫助我們將資料表示為兩種不同的列格式。它看起來就像一個表單。在本節中，您將學習更多關於此佈局的知識。

編輯您的 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 Layout

面板

面板是一個帶有框架輪廓的單元件容器。它為表單佈局提供了更多功能。在下面的示例中，我們將瞭解如何在 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 Panel

子視窗

子視窗是活動瀏覽器中的一個浮動面板。這允許使用者將內容隔離到不同的視窗。像其他佈局元件一樣，它也由執行時 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 Sub Window

選項卡頁

選項卡頁是一個多元件容器，允許使用選項卡在元件之間切換。所有選項卡都組織在選項卡頁頂部的選項卡欄中。以下程式碼顯示瞭如何使用 Vaadin 選項卡頁。

請修改您的 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 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.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

自定義佈局

自定義佈局是可以根據您的要求自定義的佈局，因此得名。以下示例顯示瞭如何為我們的應用程式建立一個自定義佈局。

更改 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 Custom Layout

Vaadin - 主題

本章詳細討論了 Vaadin 的另一個特性，稱為主題。一般來說，主題是指一個可在執行時自定義的框架。內容將根據伺服器端接收到的響應而動態變化。

Vaadin 提供了一個很酷的介面，可以在一秒鐘內使用主題，這得益於它自己的基於 Java 的 SAAS 編譯器。主題功能提供給 Vaadin 是為了為應用程式提供可自定義的樣式和外觀。主題是一個預先製作的模板，開發人員需要自定義它才能構建自己的應用程式，從而節省他們的時間。

您可以在 Vaadin 的theme資料夾下找到所有主題，每個子資料夾都是自描述的。因此，更改程式碼並自定義它也很容易。任何主題都可以包含兩種型別的 CSS 檔案：.saas型別和.css型別。儘管 Vaadin 對資料夾名稱沒有任何限制，但始終建議使用資料夾名稱，如上圖所示。

有兩種主題可用：內建和自定義。本節將詳細討論它們。

內建主題

Vaadin 內建主題是透過使用主題名稱對其進行註釋來提供的，如下所示。

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

執行 Vaadin 應用程式時，所有灰色背景都來自內建的css檔案。我們可以更改這些檔案，以使它們成為自定義主題，這是另一種主題。關於 Vaadin 內建主題，我們沒有什麼可以學習的。所有上述元件都是 Vaadin 主題的一部分。

自定義主題 – 建立和使用主題

自定義主題放置在 Web 應用的 **VAADIN/themes** 資料夾中，在 Eclipse 專案中位於 **WebContent** 資料夾下，在 Maven 專案中位於 **src/main/webapp** 資料夾下。這些位置是固定的，建議任何情況下都不要更改。要定義一個名為 **mytheme** 的 SAAS 主題，必須將檔案放在主題資料夾下的 mytheme 資料夾中，然後重新構建專案。Vaadin 將在瀏覽器請求時動態建立自己的 .css 檔案。

Vaadin Custom theme

您可以根據需要更改 css 檔案中的樣式內容。但是，請記住再次構建專案，更改才會生效。

響應式主題

Vaadin 也支援響應式主題。響應式網頁可以根據螢幕尺寸自動調整字型大小。在 Vaadin 應用中，只需新增一行程式碼即可使整個應用具有響應性。

讓我們考慮以下示例，以進一步瞭解 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

要測試佈局的響應性，請縮小瀏覽器視窗，您可以觀察到面板和佈局元件將相應地更改其大小和形狀。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.