vaadin教程

1.簡介

當(dāng)您是后端開發(fā)人員時，您會聽到別人說您無法創(chuàng)建內(nèi)置HTML的UI頁面并且無法在CSS中設(shè)置樣式而引起的痛苦。 就像成為后端開發(fā)人員一樣，它具有已知的局限性，即我們可以播放和運行大型生產(chǎn)后端應(yīng)用程序，但不能創(chuàng)建漂亮的頁面來實際顯示這些后端應(yīng)用程序管理的數(shù)據(jù)。 如果相同的想法曾經(jīng)困擾過您，請不用擔(dān)心， Vaadin在這里。

使用Vaadin，可以完全使用Java創(chuàng)建應(yīng)用程序的前端 。 它提供了高度成熟的服務(wù)器端UI創(chuàng)建支持，使我們能夠用Java語言編寫生產(chǎn)級可重用組件。 它具有所有流行的Java開發(fā)環(huán)境（Eclipse，IntelliJ，NetBeans，Maven等；本教程的示例使用IntelliJ）的支持。 我們將首先了解Vaadin的實際工作原理，并遵循Vaadin中存在的各種組件和布局。 我們將以出色的示例應(yīng)用程序結(jié)束本課程，該示例應(yīng)用程序在單個視圖中演示事件處理和多種布局。 讓我們開始吧。

目錄

1.簡介 2. Vaadin如何工作？ 3. Vaadin插件 4.創(chuàng)建一個項目 5. Maven依賴 6. Vaadin Servlet 7. Vaadin主班 8. Vaadin布局管理器

8.1 VerticalLayout 8.2 Horizo??ntalLayout 8.3網(wǎng)格布局 8.4 FormLayout

9. Vaadin成分

9.1標(biāo)簽 9.2鏈接 9.3文字欄位 9.4 TextArea 9.5 DateField和InlineDateField 9.6 PasswordField 9.7按鈕 9.8復(fù)選框 9.9清單

10.使用Vaadin主題 11.結(jié)論 12.下載源代碼

2. Vaadin如何工作？

一般來說，Vaadin與AWT，Spring和SWT十分相似。 我們有一些布局和組件，可以實例化并提供數(shù)據(jù)，最后將它們綁定到父布局中以顯示容器。 這些組件和布局的實際呈現(xiàn)方式不同。 Vaadin組件不是使用布局取決于底層操作系統(tǒng)的Java來呈現(xiàn)的傳統(tǒng)組件，而是通過Ajax與后端服務(wù)器通信并由框架自動管理HTML5 / CSS / JavaScript組件。 讓我們可視化Vaadin如何在前端UI引擎及其自身組件之間進(jìn)行排列：

Vaadin建筑

在上圖中，非常清楚的是Vaadin如何防止后端開發(fā)人員編寫基于HTML，CSS和JS的組件，并提供Vaadin引擎，我們可以在該引擎上為UI組件開發(fā)Java代碼本身，然后可以通過框架將其翻譯為HTML組件。本身。

它是客戶端Vaadin引擎（以HTML5 / CSS / JavaScript編寫，基于Google Web Toolkit）和服務(wù)器端框架，它們?yōu)槲覀児芾鞺I。 服務(wù)器端組件還支持Vaadin中的數(shù)據(jù)綁定，這使得將數(shù)據(jù)庫集成到組件中非常容易。 最后，不要認(rèn)為Vaadin僅限于Java。 使用最新版本的Vaadin，還可以編寫基于HTML的Vaadin布局，使用CSS設(shè)置樣式，并使用Javascript本身來調(diào)整行為。 在本課程中，我們將僅限于僅使用Java語言。

3. Vaadin插件

既然我們了解了Vaadin的工作原理，就可以為我們的機器進(jìn)行設(shè)置了。 為了繼續(xù)學(xué)習(xí)本課程以及IDE內(nèi)提供的易于使用的插件，我們可以將Eclipse插件安裝為：

Vaadin Eclipse插件

如果您像我一樣使用IntelliJ，我們也可以獲取IDE的插件：

Vaadin IntelliJ插件

該插件不是絕對需要的，但是它為使用100％基于UI的系統(tǒng)提供了機會，您可以在其中使用WYSIWYG系統(tǒng)。

4.創(chuàng)建一個項目

現(xiàn)在我們已經(jīng)準(zhǔn)備就緒，終于可以使用Maven為我們創(chuàng)建一個項目。 我們將使用Vaadin原型創(chuàng)建一個應(yīng)用程序。 讓我們看一下這里的命令：

創(chuàng)建一個項目

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=LATEST -DgroupId=com.javacodegeeks.example -DartifactId=JCG-Vaadin-Example -Dversion=1.0 -Dpackaging=jar

這是創(chuàng)建項目時得到的結(jié)果（我們僅顯示有趣的部分）：

建立專案

[INFO] Scanning for projects... [INFO] [INFO] ------------------< org.apache.maven:standalone-pom >------------------- [INFO] Building Maven Stub Project (No POM) 1 [INFO] --------------------------------[ pom ]--------------------------------- [INFO] [INFO] >>> maven-archetype-plugin:3.0.1:generate (default-cli) > generate-sources @ standalone-pom >>> [INFO] [INFO] <<< maven-archetype-plugin:3.0.1:generate (default-cli) < generate-sources @ standalone-pom <<< [INFO] [INFO] [INFO] --- maven-archetype-plugin:3.0.1:generate (default-cli) @ standalone-pom --- [INFO] Generating project in Interactive mode [INFO] Archetype repository not defined. Using the one from [com.vaadin:vaadin-archetype-application:8.4.1] found in catalog remote....some non-interesting parts....[INFO] Using property: groupId = com.javacodegeeks.example [INFO] Using property: artifactId = JCG-Vaadin-Example [INFO] Using property: version = 1.0 [INFO] Using property: package = com.javacodegeeks.example [INFO] Using property: themeName = mytheme [INFO] Using property: uiName = MyUI Confirm properties configuration: groupId: com.javacodegeeks.example artifactId: JCG-Vaadin-Example version: 1.0 package: com.javacodegeeks.example themeName: mytheme uiName: MyUIY: : [INFO] ---------------------------------------------------------------------------- [INFO] Using following parameters for creating project from Archetype: vaadin-archetype-application:LATEST [INFO] ---------------------------------------------------------------------------- [INFO] Parameter: groupId, Value: com.javacodegeeks.example [INFO] Parameter: artifactId, Value: JCG-Vaadin-Example [INFO] Parameter: version, Value: 1.0 [INFO] Parameter: package, Value: com.javacodegeeks.example [INFO] Parameter: packageInPathFormat, Value: com/javacodegeeks/example [INFO] Parameter: package, Value: com.javacodegeeks.example [INFO] Parameter: version, Value: 1.0 [INFO] Parameter: groupId, Value: com.javacodegeeks.example [INFO] Parameter: themeName, Value: mytheme [INFO] Parameter: uiName, Value: MyUI [INFO] Parameter: artifactId, Value: JCG-Vaadin-Example [INFO] Project created from Archetype in dir: /Users/shubham/JCG-Vaadin-Example [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 32.100 s [INFO] Finished at: 2018-05-13T18:43:43+05:30 [INFO] ------------------------------------------------------------------------

Vaadin原型負(fù)責(zé)在項目中添加適當(dāng)?shù)囊蕾図椧约皹?gòu)建項目所需的所有其他信息。 在下一節(jié)中，我們將了解項目的pom.xml文件中的所有部分。

5. Maven依賴

我們使用Vaadin原型創(chuàng)建的項目負(fù)責(zé)在項目中添加適當(dāng)?shù)囊蕾図棥?讓我們看一下項目的pom.xml文件。 讓我們開始看看添加到文件中的依賴項：

pom.xml

<dependencies><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.0.1</version><scope>provided</scope></dependency><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-server</artifactId></dependency><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-push</artifactId></dependency><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-client-compiled</artifactId></dependency><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-themes</artifactId></dependency> </dependencies>

以下依賴項已添加到項目中：

• javax.servlet-api ：此依賴關(guān)系提供了將Servlet保留在我們的項目中以進(jìn)行網(wǎng)絡(luò)調(diào)用的能力
• vaadin-server ：此依賴性包括用于管理服務(wù)器詳細(xì)信息（如會話，客戶端通信等）的軟件包。
• vaadin-push ：這種依賴關(guān)系對于本課程不是必需的，但仍然很重要。 當(dāng)我們需要基于在服務(wù)器上執(zhí)行的線程來更新UI時，我們可以將請求從服務(wù)器發(fā)送到UI，這樣UI可以立即更新，并且UI不必發(fā)出網(wǎng)絡(luò)請求即可獲取UI上的數(shù)據(jù)狀態(tài)。服務(wù)器。 為此，使用推包。
• vaadin-client-compiled ：此依賴項基于GWT，并且包含用于編譯客戶端組件的軟件包。
• vaadin-themes ：此依賴項包括一些內(nèi)置主題和用于制作自定義主題的所有實用程序。

接下來，我們還需要添加Vaadin存儲庫和依賴項管理。 dependencyManagement標(biāo)簽有助于管理所有Vaadin依賴項的版本：

pom.xml

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

最后，我們需要有Jetty插件，該插件使我們可以通過在命令行上運行jetty:run來輕松測試開發(fā)版本。

pom.xml

<plugin><groupId>org.eclipse.jetty</groupId><artifactId>jetty-maven-plugin</artifactId><version>${jetty.plugin.version}</version><configuration><scanIntervalSeconds>2</scanIntervalSeconds></configuration> </plugin>

這使我們可以直接從命令行運行Vaadin應(yīng)用程序，并為我們提供嵌入式Jetty服務(wù)器。

6. Vaadin Servlet

在Vaadin中，我們沒有web.xml文件來配置應(yīng)用程序的調(diào)度程序servlet。 相反，我們有Vaadin Servlet，它通過一些注釋定義了應(yīng)用程序的入口點：

MyUI.java

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

在上面的servlet應(yīng)用程序中， ui字段明確提到MyUI.class是指定應(yīng)用程序的主要入口點。

7. Vaadin主班

當(dāng)我們使用Vaadin原型定義應(yīng)用程序時，該應(yīng)用程序附帶一個已經(jīng)在應(yīng)用程序主類中設(shè)置的基本UI，如上一節(jié)所示，該UI還包含Vaadin Servlet的定義。 這是我們的應(yīng)用程序中預(yù)定義的主要入口點UI類：

MyUI.java

package com.javacodegeeks.example;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.Button; 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 {private static final long serialVersionUID = 7132834690301152714L;@Overrideprotected void init(VaadinRequest vaadinRequest) {final VerticalLayout layout = new VerticalLayout();final TextField name = new TextField();name.setCaption("Type your name here:");Button button = new Button("Click Me");button.addClickListener(e -> {layout.addComponent(new Label("Thanks " + name.getValue() + ", it works!"));});layout.addComponents(name, button);setContent(layout);}@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)public static class MyUIServlet extends VaadinServlet {} }

此UI是應(yīng)用程序的入口點。 UI可以代表瀏覽器窗口（或選項卡）或嵌入Vaadin應(yīng)用程序HTML頁面的某些部分。 UI使用VaadinRequest初始化。 旨在重寫此方法以將組件添加到用戶界面并初始化非組件功能。

實際上，我們現(xiàn)在就可以運行該項目，以顯示Vaadin原型本身所做的默認(rèn)應(yīng)用程序布局。 運行以下命令以運行項目：

運行項目

mvn jetty:run

訪問以下網(wǎng)址以查看該應(yīng)用程序的運行情況：

打開網(wǎng)址

http://localhost:8080/

我們現(xiàn)在可以嘗試該應(yīng)用程序：

運行示例應(yīng)用程序

8. Vaadin布局管理器

我們上面運行的示例應(yīng)用程序使用VerticalLayout來以垂直方式排列UI元素。 與VerticalLayout相似，Vaadin為我們提供了各種布局管理器，以將UI組件布置在不同的方向。 讓我們探討一下經(jīng)理是什么

8.1 VerticalLayout

當(dāng)我們需要將組件堆疊在單個列中，其中第一個元素保留在底部，其余元素顯示在上述組件下方時，我們可以使用VerticalLayout布置：

垂直布局

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

添加到此布局的所有組件都將堆疊在一起。 請注意，與每個組件（ 布局也是一個組件 ）相關(guān)的方法的樣式都很好，其名稱基于它們設(shè)置CSS屬性。 這使得方法名稱易于猜測并且更具可讀性。

8.2 Horizo??ntalLayout

與將組件以垂直方式排列的VerticalLayout ， HorizontalLayout將組件水平排列。 讓我們看一下如何實例化此布局的示例：

水平布局

final HorizontalLayout layout = new HorizontalLayout();

在示例應(yīng)用程序，只需更換VerticalLayout與VerticalLayout和看到的布局現(xiàn)在怎么會出現(xiàn)：

Vaadin水平布局

8.3網(wǎng)格布局

另一個布局GridLayout允許我們制作一個組件網(wǎng)格，該網(wǎng)格為我們渲染的頁面提供了非常光滑一致的外觀。

網(wǎng)格布局

GridLayout gridLayout = new GridLayout(3, 2);

繼續(xù)嘗試現(xiàn)有布局中的GridLayout ，以與UI組件的布局配合使用。

8.4 FormLayout

最后，我們可以使用FormLayout將組件的標(biāo)簽和組件本身放在兩個單獨的列中，并且還可以為必填字段提供可選的指示器。 可以實例化為：

表格布局

FormLayout formLayout = new FormLayout();

9. Vaadin成分

在本節(jié)中，我們將介紹一些基本但最有用的Vaadin UI元素，這些元素幾乎在所有用于Web的UI中使用。

9.1標(biāo)簽

Label是用于顯示靜態(tài)文本的組件，該文本不會隨應(yīng)用程序狀態(tài)而改變。 讓我們定義一個提供Label實例并將其設(shè)置在VerticalLayout的函數(shù)：

標(biāo)簽

private Layout showLabels() {final VerticalLayout layout = new VerticalLayout();Label label = new Label();label.setId("LabelID");label.setValue("JavaCodeGeeks");label.setCaption("Label");layout.addComponent(label);return layout; }

此Label外觀如下：

Vaadin中的標(biāo)簽

9.2鏈接

在提供外部網(wǎng)頁地址時，Vaadin提供了具有相同目的的鏈接組件：

鏈接

private Layout showLink() {final VerticalLayout layout = new VerticalLayout();Link jcgLink = new Link("JavaCodeGeeks",new ExternalResource("https://www.javacodegeeks.com/"));jcgLink.setTargetName("_blank");layout.addComponent(jcgLink);return layout; }

這是Link外觀：

Vaadin Link組件

9.3文字欄位

TextFields是由Label組件和允許用戶提供輸入的一行TextArea組合而成的組件。 這是一個示例程序，用于顯示帶有圖標(biāo)的TextField以及內(nèi)置于Vaadin庫中的圖標(biāo)：

文本域

private Layout showTextField() {final VerticalLayout layout = new VerticalLayout();TextField textField = new TextField();textField.setIcon(FontAwesome.USER);layout.addComponent(textField);return layout; }

這是TextField外觀：

Vaadin TextField組件

9.4 TextArea

TextArea組件就像TextField組件一樣，唯一的區(qū)別是TextArea組件中允許多行輸入。 讓我們看一個示范：

文字區(qū)域

private Layout showTextArea() {final VerticalLayout layout = new VerticalLayout();TextArea textArea = new TextArea();layout.addComponent(textArea);return layout; }

這是TextArea外觀：

Vaadin TextArea組件

TextArea組件使我們能夠在組件中輸入大文本并反映應(yīng)輸入的文本限制。

9.5 DateField和InlineDateField

在Web UI中，選擇日期是非常常見的任務(wù)。 Vaadin提供了兩個相同的元素DateField和InlineDateField 。 DateField組件顯示一個下拉日歷，我們可以在其中選擇一個日期。 在其中選擇日期后， InLineDateField不會消失。 讓我們看一個示例程序：

DateField和InlineDateField

private Layout showDateField() {final VerticalLayout layout = new VerticalLayout();DateField dateField = new DateField("DateField", LocalDate.now());InlineDateField inlineDateField = new InlineDateField();layout.addComponent(dateField);layout.addComponent(inlineDateField);return layout; }

這是DateField外觀：

Vaadin DateField組件

這是InLineDateField外觀：

Vaadin內(nèi)聯(lián)DateField組件

用戶從中選擇日期后， InlineDateField不會消失。

9.6 PasswordField

要在UI中接受秘密密鑰和密碼，我們可以使用PasswordField 。 讓我們看一個示范：

密碼欄位

private Layout showPasswordField() {final VerticalLayout layout = new VerticalLayout();PasswordField passwordField = new PasswordField();layout.addComponent(passwordField);return layout; }

這是PasswordField外觀：

Vaadin PasswordField組件

PasswordField是一個TextField ，它只是掩蓋我們在其中輸入的文本。

9.7按鈕

為了使用戶能夠在某些情況下（例如提交表單或類似內(nèi)容）執(zhí)行操作，Button是最好的使用組件。 讓我們看一個示例程序：

紐扣

private Layout showButton() {final VerticalLayout layout = new VerticalLayout();Button normalButton = new Button("Normal Button");layout.addComponent(normalButton);return layout; }

這是Button組件的外觀：

Vaadin按鈕組件

Vaadin允許我們制作多種類型的按鈕，例如“危險”按鈕（默認(rèn)為紅色），相當(dāng)多的按鈕等等。

9.8復(fù)選框

為了接受多個值到某個值，我們可以使用CheckBoxes ，它允許用戶設(shè)置或取消設(shè)置它們，而不必依賴UI中是否設(shè)置了其他CheckBoxes 。 讓我們看一個示例程序：

復(fù)選框

private Layout showCheckBox() {final VerticalLayout layout = new VerticalLayout();CheckBox checkbox = new CheckBox("CheckBox");checkbox.setValue(true);layout.addComponent(checkbox);return layout; }

這是CheckBox組件的外觀：

Vaadin復(fù)選框組件

9.9清單

作為最終組件，顯示包含固定元素的項目列表是非常常見的任務(wù)。 讓我們看一下如何做到這一點的演示：

清單

private Layout showLists() {final VerticalLayout layout = new VerticalLayout();List<String> numbers = new ArrayList<>();numbers.add("One");numbers.add("Ten");numbers.add("Eleven");ComboBox comboBox = new ComboBox("ComboBox");comboBox.setItems(numbers);layout.addComponent(comboBox);return layout; }

這是Lists組件的外觀：

Vaadin列表組件

因此，我們只創(chuàng)建了一個List來收集項目并將其顯示在ComboBox元素中，該元素顯示了一個包含List項目的下拉菜單。

10.使用Vaadin主題

Vaadin主題是將應(yīng)用外觀完全指向Vaadin項目使用的樣式表中的新主題的最佳方式。 默認(rèn)情況下，Vaadin提供了四個內(nèi)置主題，我們可以隨時更改它們。 內(nèi)置主題是valo ， 馴鹿 ， 變色龍和runo 。 要查找樣式表，請訪問WebContent/themes/declarativeui/declarativeui.scss 。 我們可以在指定文件的末尾更改指定的主題值，這將更改應(yīng)用程序選擇的主題。

請查看Vaadin目錄 ，查找?guī)缀鯚o限數(shù)量的可以在您的項目中使用的即用型Vaadin主題。

11.結(jié)論

在本課程中，我們研究了如何使用單個Maven命令創(chuàng)建非常簡單但有效的Vaadin應(yīng)用程序。 我們看到了生產(chǎn)級Vaadin應(yīng)用程序需要哪些Maven依賴項和插件。 我們研究了Vaadin UI應(yīng)用程序中常用的許多Vaadin組件。 對于Java后端工程師而言，Vaadin是一個出色的框架。 它提供了Java開發(fā)人員可以想到的所有優(yōu)勢，因為它允許基于Maven的構(gòu)建系統(tǒng)進(jìn)行依賴關(guān)系管理，這是一種非常簡單的方法，可以直接在同一項目本身中直接使用Spring服務(wù)，或者僅遵循設(shè)計模式來保持UI和網(wǎng)絡(luò)層在項目中完全分開。

在未來的Vaadin課程中，我們將看到如何通過在應(yīng)用程序中添加一個工作后端來使Vaadin應(yīng)用程序動態(tài)化，例如使用Spring Boot應(yīng)用程序從數(shù)據(jù)庫向應(yīng)用程序提供動態(tài)內(nèi)容。

12.下載源代碼

這是Vaadin框架的一個示例。

下載
您可以在此處下載此示例的完整源代碼： Vaadin示例

翻譯自: https://www.javacodegeeks.com/2018/05/vaadin-tutorial.html

vaadin教程

總結(jié)

以上是生活随笔為你收集整理的vaadin教程_Vaadin教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。