vaadin教程_Vaadin教程
vaadin教程
1.簡介
當您是后端開發人員時，您會聽到別人說您無法創建內置HTML的UI頁面并且無法在CSS中設置樣式而引起的痛苦。 就像成為后端開發人員一樣，它具有已知的局限性，即我們可以播放和運行大型生產后端應用程序，但不能創建漂亮的頁面來實際顯示這些后端應用程序管理的數據。 如果相同的想法曾經困擾過您，請不用擔心， Vaadin在這里。
使用Vaadin，可以完全使用Java創建應用程序的前端 。 它提供了高度成熟的服務器端UI創建支持，使我們能夠用Java語言編寫生產級可重用組件。 它具有所有流行的Java開發環境（Eclipse，IntelliJ，NetBeans，Maven等；本教程的示例使用IntelliJ）的支持。 我們將首先了解Vaadin的實際工作原理，并遵循Vaadin中存在的各種組件和布局。 我們將以出色的示例應用程序結束本課程，該示例應用程序在單個視圖中演示事件處理和多種布局。 讓我們開始吧。
目錄
1.簡介 2. Vaadin如何工作？ 3. Vaadin插件 4.創建一個項目 5. Maven依賴 6. Vaadin Servlet 7. Vaadin主班 8. Vaadin布局管理器2. Vaadin如何工作？
一般來說，Vaadin與AWT，Spring和SWT十分相似。 我們有一些布局和組件，可以實例化并提供數據，最后將它們綁定到父布局中以顯示容器。 這些組件和布局的實際呈現方式不同。 Vaadin組件不是使用布局取決于底層操作系統的Java來呈現的傳統組件，而是通過Ajax與后端服務器通信并由框架自動管理HTML5 / CSS / JavaScript組件。 讓我們可視化Vaadin如何在前端UI引擎及其自身組件之間進行排列：
Vaadin建筑
在上圖中，非常清楚的是Vaadin如何防止后端開發人員編寫基于HTML，CSS和JS的組件，并提供Vaadin引擎，我們可以在該引擎上為UI組件開發Java代碼本身，然后可以通過框架將其翻譯為HTML組件。本身。
它是客戶端Vaadin引擎（以HTML5 / CSS / JavaScript編寫，基于Google Web Toolkit）和服務器端框架，它們為我們管理UI。 服務器端組件還支持Vaadin中的數據綁定，這使得將數據庫集成到組件中非常容易。 最后，不要認為Vaadin僅限于Java。 使用最新版本的Vaadin，還可以編寫基于HTML的Vaadin布局，使用CSS設置樣式，并使用Javascript本身來調整行為。 在本課程中，我們將僅限于僅使用Java語言。
3. Vaadin插件
既然我們了解了Vaadin的工作原理，就可以為我們的機器進行設置了。 為了繼續學習本課程以及IDE內提供的易于使用的插件，我們可以將Eclipse插件安裝為：
Vaadin Eclipse插件
如果您像我一樣使用IntelliJ，我們也可以獲取IDE的插件：
Vaadin IntelliJ插件
該插件不是絕對需要的，但是它為使用100％基于UI的系統提供了機會，您可以在其中使用WYSIWYG系統。
4.創建一個項目
現在我們已經準備就緒，終于可以使用Maven為我們創建一個項目。 我們將使用Vaadin原型創建一個應用程序。 讓我們看一下這里的命令：
創建一個項目
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這是創建項目時得到的結果（我們僅顯示有趣的部分）：
建立專案
[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原型負責在項目中添加適當的依賴項以及構建項目所需的所有其他信息。 在下一節中，我們將了解項目的pom.xml文件中的所有部分。
5. Maven依賴
我們使用Vaadin原型創建的項目負責在項目中添加適當的依賴項。 讓我們看一下項目的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 ：此依賴關系提供了將Servlet保留在我們的項目中以進行網絡調用的能力
- vaadin-server ：此依賴性包括用于管理服務器詳細信息（如會話，客戶端通信等）的軟件包。
- vaadin-push ：這種依賴關系對于本課程不是必需的，但仍然很重要。 當我們需要基于在服務器上執行的線程來更新UI時，我們可以將請求從服務器發送到UI，這樣UI可以立即更新，并且UI不必發出網絡請求即可獲取UI上的數據狀態。服務器。 為此，使用推包。
- vaadin-client-compiled ：此依賴項基于GWT，并且包含用于編譯客戶端組件的軟件包。
- vaadin-themes ：此依賴項包括一些內置主題和用于制作自定義主題的所有實用程序。
接下來，我們還需要添加Vaadin存儲庫和依賴項管理。 dependencyManagement標簽有助于管理所有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來輕松測試開發版本。
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應用程序，并為我們提供嵌入式Jetty服務器。
6. Vaadin Servlet
在Vaadin中，我們沒有web.xml文件來配置應用程序的調度程序servlet。 相反，我們有Vaadin Servlet，它通過一些注釋定義了應用程序的入口點：
MyUI.java
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { }在上面的servlet應用程序中， ui字段明確提到MyUI.class是指定應用程序的主要入口點。
7. Vaadin主班
當我們使用Vaadin原型定義應用程序時，該應用程序附帶一個已經在應用程序主類中設置的基本UI，如上一節所示，該UI還包含Vaadin Servlet的定義。 這是我們的應用程序中預定義的主要入口點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是應用程序的入口點。 UI可以代表瀏覽器窗口（或選項卡）或嵌入Vaadin應用程序HTML頁面的某些部分。 UI使用VaadinRequest初始化。 旨在重寫此方法以將組件添加到用戶界面并初始化非組件功能。
實際上，我們現在就可以運行該項目，以顯示Vaadin原型本身所做的默認應用程序布局。 運行以下命令以運行項目：
運行項目
mvn jetty:run訪問以下網址以查看該應用程序的運行情況：
打開網址
http://localhost:8080/我們現在可以嘗試該應用程序：
運行示例應用程序
8. Vaadin布局管理器
我們上面運行的示例應用程序使用VerticalLayout來以垂直方式排列UI元素。 與VerticalLayout相似，Vaadin為我們提供了各種布局管理器，以將UI組件布置在不同的方向。 讓我們探討一下經理是什么
8.1 VerticalLayout
當我們需要將組件堆疊在單個列中，其中第一個元素保留在底部，其余元素顯示在上述組件下方時，我們可以使用VerticalLayout布置：
垂直布局
VerticalLayout vertical = new VerticalLayout(); vertical.setSpacing(true); vertical.setMargin(true); setContent(vertical);添加到此布局的所有組件都將堆疊在一起。 請注意，與每個組件（ 布局也是一個組件 ）相關的方法的樣式都很好，其名稱基于它們設置CSS屬性。 這使得方法名稱易于猜測并且更具可讀性。
8.2 Horizo??ntalLayout
與將組件以垂直方式排列的VerticalLayout ， HorizontalLayout將組件水平排列。 讓我們看一下如何實例化此布局的示例：
水平布局
final HorizontalLayout layout = new HorizontalLayout();在示例應用程序，只需更換VerticalLayout與VerticalLayout和看到的布局現在怎么會出現：
Vaadin水平布局
8.3網格布局
另一個布局GridLayout允許我們制作一個組件網格，該網格為我們渲染的頁面提供了非常光滑一致的外觀。
網格布局
GridLayout gridLayout = new GridLayout(3, 2);繼續嘗試現有布局中的GridLayout ，以與UI組件的布局配合使用。
8.4 FormLayout
最后，我們可以使用FormLayout將組件的標簽和組件本身放在兩個單獨的列中，并且還可以為必填字段提供可選的指示器。 可以實例化為：
表格布局
FormLayout formLayout = new FormLayout();9. Vaadin成分
在本節中，我們將介紹一些基本但最有用的Vaadin UI元素，這些元素幾乎在所有用于Web的UI中使用。
9.1標簽
Label是用于顯示靜態文本的組件，該文本不會隨應用程序狀態而改變。 讓我們定義一個提供Label實例并將其設置在VerticalLayout的函數：
標簽
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中的標簽
9.2鏈接
在提供外部網頁地址時，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組合而成的組件。 這是一個示例程序，用于顯示帶有圖標的TextField以及內置于Vaadin庫中的圖標：
文本域
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組件一樣，唯一的區別是TextArea組件中允許多行輸入。 讓我們看一個示范：
文字區域
private Layout showTextArea() {final VerticalLayout layout = new VerticalLayout();TextArea textArea = new TextArea();layout.addComponent(textArea);return layout; }這是TextArea外觀：
Vaadin TextArea組件
TextArea組件使我們能夠在組件中輸入大文本并反映應輸入的文本限制。
9.5 DateField和InlineDateField
在Web UI中，選擇日期是非常常見的任務。 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內聯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按鈕
為了使用戶能夠在某些情況下（例如提交表單或類似內容）執行操作，Button是最好的使用組件。 讓我們看一個示例程序：
紐扣
private Layout showButton() {final VerticalLayout layout = new VerticalLayout();Button normalButton = new Button("Normal Button");layout.addComponent(normalButton);return layout; }這是Button組件的外觀：
Vaadin按鈕組件
Vaadin允許我們制作多種類型的按鈕，例如“危險”按鈕（默認為紅色），相當多的按鈕等等。
9.8復選框
為了接受多個值到某個值，我們可以使用CheckBoxes ，它允許用戶設置或取消設置它們，而不必依賴UI中是否設置了其他CheckBoxes 。 讓我們看一個示例程序：
復選框
private Layout showCheckBox() {final VerticalLayout layout = new VerticalLayout();CheckBox checkbox = new CheckBox("CheckBox");checkbox.setValue(true);layout.addComponent(checkbox);return layout; } 這是CheckBox組件的外觀：
Vaadin復選框組件
9.9清單
作為最終組件，顯示包含固定元素的項目列表是非常常見的任務。 讓我們看一下如何做到這一點的演示：
清單
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列表組件
因此，我們只創建了一個List來收集項目并將其顯示在ComboBox元素中，該元素顯示了一個包含List項目的下拉菜單。
10.使用Vaadin主題
Vaadin主題是將應用外觀完全指向Vaadin項目使用的樣式表中的新主題的最佳方式。 默認情況下，Vaadin提供了四個內置主題，我們可以隨時更改它們。 內置主題是valo ， 馴鹿 ， 變色龍和runo 。 要查找樣式表，請訪問WebContent/themes/declarativeui/declarativeui.scss 。 我們可以在指定文件的末尾更改指定的主題值，這將更改應用程序選擇的主題。
請查看Vaadin目錄 ，查找幾乎無限數量的可以在您的項目中使用的即用型Vaadin主題。
11.結論
在本課程中，我們研究了如何使用單個Maven命令創建非常簡單但有效的Vaadin應用程序。 我們看到了生產級Vaadin應用程序需要哪些Maven依賴項和插件。 我們研究了Vaadin UI應用程序中常用的許多Vaadin組件。 對于Java后端工程師而言，Vaadin是一個出色的框架。 它提供了Java開發人員可以想到的所有優勢，因為它允許基于Maven的構建系統進行依賴關系管理，這是一種非常簡單的方法，可以直接在同一項目本身中直接使用Spring服務，或者僅遵循設計模式來保持UI和網絡層在項目中完全分開。
在未來的Vaadin課程中，我們將看到如何通過在應用程序中添加一個工作后端來使Vaadin應用程序動態化，例如使用Spring Boot應用程序從數據庫向應用程序提供動態內容。
12.下載源代碼
這是Vaadin框架的一個示例。
下載您可以在此處下載此示例的完整源代碼： Vaadin示例
翻譯自: https://www.javacodegeeks.com/2018/05/vaadin-tutorial.html
vaadin教程
總結
以上是生活随笔為你收集整理的vaadin教程_Vaadin教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三点水一个间读什么 三点水一个间的读音
- 下一篇： 功在千秋的意思 功在千秋是什么意思