原文： https://howtodoinjava.com/vaadin/hello-world-web-application-maven/

在此示例中，我们将学习使用 maven 创建 vaadin helloworld 应用，然后在内置Jetty服务器中运行部署该应用。

使用 Maven 原型创建 vaadin 项目

在工作区中使用下面的 maven 命令创建最简单的 vaadin Web 应用。

  1. $ mvn archetype:generate 
  2.     -DarchetypeGroupId=com.vaadin 
  3.     -DarchetypeArtifactId=vaadin-archetype-application 
  4.     -DarchetypeVersion=LATEST 
  5.     -DgroupId=com.howtodoinjava.vaadin.demo 
  6.     -DartifactId=VaadinExample 
  7.     -Dversion=1.0 
  8.     -Dpackaging=war

请根据需要更新-DgroupId和-DartifactId。

生成的项目结构

现在，将生成的项目作为现有的 maven 项目导入到您的 IDE（在我的情况下为 eclipse）中。

使用 Maven 的 vaadin HelloWorld Web 应用 - 图1

Vaadin HelloWorld 应用项目结构

生成的项目包含任何 Maven Web 应用的标准文件夹结构。

生成的文件

连同文件夹结构一起，我们将获得这些生成的文件以及 vaadin helloworld 项目。

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd;
  4.     <modelVersion>4.0.0</modelVersion>
  6.     <groupId>com.howtodoinjava.vaadin.demo</groupId>
  7.     <artifactId>VaadinExample</artifactId>
  8.     <packaging>war</packaging>
  9.     <version>1.0</version>
  10.     <name>VaadinExample</name>
  12.     <prerequisites>
  13.         <maven>3</maven>
  14.     </prerequisites>
  16.     <properties>
  17.         <vaadin.version>7.7.0</vaadin.version>
  18.         <vaadin.plugin.version>7.7.0</vaadin.plugin.version>
  19.         <jetty.plugin.version>9.3.9.v20160517</jetty.plugin.version>
  20.         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  21.         <maven.compiler.source>1.8</maven.compiler.source>
  22.         <maven.compiler.target>1.8</maven.compiler.target>
  23.         <!-- If there are no local customisations, this can also be "fetch" or "cdn" -->
  24.         <vaadin.widgetset.mode>local</vaadin.widgetset.mode>
  25.     </properties>
  27.     <repositories>
  28.         <repository>
  29.             <id>vaadin-addons</id>
  30.             <url>http://maven.vaadin.com/vaadin-addons</url>
  31.         </repository>
  32.         <repository>
  33.             <id>vaadin-snapshots</id>
  34.             <url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
  35.             <releases>
  36.                 <enabled>false</enabled>
  37.             </releases>
  38.             <snapshots>
  39.                 <enabled>true</enabled>
  40.             </snapshots>
  41.         </repository>
  42.     </repositories>
  44.     <dependencyManagement>
  45.         <dependencies>
  46.             <dependency>
  47.                 <groupId>com.vaadin</groupId>
  48.                 <artifactId>vaadin-bom</artifactId>
  49.                 <version>${vaadin.version}</version>
  50.                 <type>pom</type>
  51.                 <scope>import</scope>
  52.             </dependency>
  53.         </dependencies>
  54.     </dependencyManagement>
  56.     <dependencies>
  57.         <dependency>
  58.             <groupId>javax.servlet</groupId>
  59.             <artifactId>javax.servlet-api</artifactId>
  60.             <version>3.0.1</version>
  61.             <scope>provided</scope>
  62.         </dependency>
  63.         <dependency>
  64.             <groupId>com.vaadin</groupId>
  65.             <artifactId>vaadin-server</artifactId>
  66.         </dependency>
  67.         <dependency>
  68.             <groupId>com.vaadin</groupId>
  69.             <artifactId>vaadin-push</artifactId>
  70.         </dependency>
  71.         <dependency>
  72.             <groupId>com.vaadin</groupId>
  73.             <artifactId>vaadin-client-compiled</artifactId>
  74.         </dependency>
  75.         <dependency>
  76.             <groupId>com.vaadin</groupId>
  77.             <artifactId>vaadin-themes</artifactId>
  78.         </dependency>
  79.     </dependencies>
  81.     <build>
  82.         <plugins>
  83.             <plugin>
  84.                 <groupId>org.apache.maven.plugins</groupId>
  85.                 <artifactId>maven-war-plugin</artifactId>
  86.                 <version>2.6</version>
  87.                 <configuration>
  88.                     <failOnMissingWebXml>false</failOnMissingWebXml>
  89.                     <!-- Exclude an unnecessary file generated by the GWT compiler. -->
  90.                     <packagingExcludes>WEB-INF/classes/VAADIN/widgetsets/WEB-INF/**</packagingExcludes>
  91.                 </configuration>
  92.             </plugin>
  93.             <plugin>
  94.                 <groupId>com.vaadin</groupId>
  95.                 <artifactId>vaadin-maven-plugin</artifactId>
  96.                 <version>${vaadin.plugin.version}</version>
  97.                 <executions>
  98.                     <execution>
  99.                         <goals>
  100.                             <goal>update-theme</goal>
  101.                             <goal>update-widgetset</goal>
  102.                             <goal>compile</goal>
  103.                             <!-- Comment out compile-theme goal to use on-the-fly theme compilation -->
  104.                             <goal>compile-theme</goal>
  105.                         </goals>
  106.                     </execution>
  107.                 </executions>
  108.             </plugin>
  109.             <plugin>
  110.                 <groupId>org.apache.maven.plugins</groupId>
  111.                 <artifactId>maven-clean-plugin</artifactId>
  112.                 <version>3.0.0</version>
  113.                 <!-- Clean up also any pre-compiled themes -->
  114.                 <configuration>
  115.                     <filesets>
  116.                         <fileset>
  117.                             <directory>src/main/webapp/VAADIN/themes</directory>
  118.                             <includes>
  119.                                 <include>**/styles.css</include>
  120.                                 <include>**/styles.scss.cache</include>
  121.                             </includes>
  122.                         </fileset>
  123.                     </filesets>
  124.                 </configuration>
  125.             </plugin>
  127.             <!-- The Jetty plugin allows us to easily test the development build by
  128.                 running jetty:run on the command line. -->
  129.             <plugin>
  130.                 <groupId>org.eclipse.jetty</groupId>
  131.                 <artifactId>jetty-maven-plugin</artifactId>
  132.                 <version>${jetty.plugin.version}</version>
  133.                 <configuration>
  134.                     <scanIntervalSeconds>2</scanIntervalSeconds>
  135.                 </configuration>
  136.             </plugin>
  137.         </plugins>
  138.     </build>
  140.     <profiles>
  141.         <profile>
  142.             <!-- Vaadin pre-release repositories -->
  143.             <id>vaadin-prerelease</id>
  144.             <activation>
  145.                 <activeByDefault>false</activeByDefault>
  146.             </activation>
  148.             <repositories>
  149.                 <repository>
  150.                     <id>vaadin-prereleases</id>
  151.                     <url>http://maven.vaadin.com/vaadin-prereleases</url>
  152.                 </repository>
  153.             </repositories>
  154.             <pluginRepositories>
  155.                 <pluginRepository>
  156.                     <id>vaadin-prereleases</id>
  157.                     <url>http://maven.vaadin.com/vaadin-prereleases</url>
  158.                 </pluginRepository>
  159.             </pluginRepositories>
  160.         </profile>
  161.     </profiles>
  163. </project>

MyUI.java

  1. package com.howtodoinjava.vaadin.demo;
  3. import javax.servlet.annotation.WebServlet;
  5. import com.vaadin.annotations.Theme;
  6. import com.vaadin.annotations.VaadinServletConfiguration;
  7. import com.vaadin.server.VaadinRequest;
  8. import com.vaadin.server.VaadinServlet;
  9. import com.vaadin.ui.Button;
  10. import com.vaadin.ui.Label;
  11. import com.vaadin.ui.TextField;
  12. import com.vaadin.ui.UI;
  13. import com.vaadin.ui.VerticalLayout;
  15. /**
  16.  * This UI is the application entry point. A UI may either represent a browser window 
  17.  * (or tab) or some part of a html page where a Vaadin application is embedded.
  18.  * <p>
  19.  * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be 
  20.  * overridden to add component to the user interface and initialize non-component functionality.
  21.  */
  22. @Theme("mytheme")
  23. public class MyUI extends UI {
  25.     @Override
  26.     protected void init(VaadinRequest vaadinRequest) {
  27.         final VerticalLayout layout = new VerticalLayout();
  29.         final TextField name = new TextField();
  30.         name.setCaption("Type your name here:");
  32.         Button button = new Button("Click Me");
  33.         button.addClickListener( e -> {
  34.             layout.addComponent(new Label("Thanks " + name.getValue() 
  35.                     + ", it works!"));
  36.         });
  38.         layout.addComponents(name, button);
  39.         layout.setMargin(true);
  40.         layout.setSpacing(true);
  42.         setContent(layout);
  43.     }
  45.     @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
  46.     @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
  47.     public static class MyUIServlet extends VaadinServlet {
  48.     }
  49. }

如果要使用web.xml文件，因为您的服务器不支持 servlet 3.0 规范，则可以在web.xml文件中使用此配置。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app id="WebApp_ID" version="2.4"
  3.     xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
  5.      http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  7.     <servlet>
  8.         <servlet-name>myservlet</servlet-name>
  9.         <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
  10.         <init-param>
  11.             <param-name>UI</param-name>
  12.             <param-value>com.howtodoinjava.vaadin.demo.MyUI</param-value>
  13.         </init-param>
  14.     </servlet>
  16.     <servlet-mapping>
  17.         <servlet-name>myservlet</servlet-name>
  18.         <url-pattern>/*</url-pattern>
  19.     </servlet-mapping>
  20. </web-app>

如果您正在使用web.xml文件，请不要忘记删除@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)。

构建生成的项目

现在该构建项目，以便它可以下载所有依赖项并将其包含在项目的运行时中。

  1. $ mvn clean install

上面的 maven 命令将下载依赖项（需要一些时间），并构建 war 文件VaadinExample-1.0.war。

运行并测试 vaadin HelloWorld 应用

现在该运行该应用了。 在命令提示符下，运行以下命令以启动随附的 Jetty 服务器。

  1. $mvn jetty:run

这将启动内置的 Jetty 服务器，您可以通过http://localhost:8080/访问该应用。

使用 Maven 的 vaadin HelloWorld Web 应用 - 图2

Vaadin 你好世界屏幕

现在在文本框中填写您的姓名或任何字符串，然后单击按钮。 它将在按钮下方打印消息。

使用 Maven 的 vaadin HelloWorld Web 应用 - 图3

Vaadin 你好世界屏幕 - 2

下载源码

学习愉快！

资源：

Vaadin 原型

Vaadin Maven 设置