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] <&l