Vaadin教程

1.简介

当您是后端开发人员时，您会听到人们说您无法创建内置HTML的UI页面并且无法使用CSS设置样式时所引起的痛苦。就像成为后端开发人员一样，它具有已知的局限性，即我们可以播放和运行大型生产后端应用程序，但不能创建漂亮的页面来实际显示这些后端应用程序管理的数据。如果您曾经遇到过同样的想法，请不用担心， Vaadin在这里。

使用Vaadin，可以完全使用Java创建应用程序的前端 。它提供了高度成熟的服务器端UI创建支持，使我们能够用Java语言编写生产级可重用组件。它具有所有流行的Java开发环境（Eclipse，IntelliJ，NetBeans，Maven等；本教程的示例使用IntelliJ）的支持。我们将首先了解Vaadin的实际工作原理，并遵循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的系统提供了机会，您可以在其中使用所见即所得的系统。

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文件。让我们先来看一下添加到文件中的依赖项：

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 HorizontalLayout

与将组件VerticalLayout放置的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

要在用户界面中接受秘密密钥和密码，我们可以使用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应用程序从数据库向应用程序提供动态内容。