使用 Maven 的 vaadin HelloWorld Web 應用 · HowToDoInJava 中文系列教程

# 使用 Maven 的 vaadin HelloWorld Web 應用 > 原文： [https://howtodoinjava.com/vaadin/hello-world-web-application-maven/](https://howtodoinjava.com/vaadin/hello-world-web-application-maven/) 在此示例中，我們將學習使用 maven 創建 **vaadin helloworld 應用**，然后在內置Jetty服務器中運行部署該應用。 ## 使用 Maven 原型創建 vaadin 項目在工作區中使用下面的 maven 命令創建最簡單的 vaadin Web 應用。 ```java $ mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=LATEST -DgroupId=com.howtodoinjava.vaadin.demo -DartifactId=VaadinExample -Dversion=1.0 -Dpackaging=war ``` 請根據需要更新`-DgroupId`和`-DartifactId`。 ## 生成的項目結構現在，將生成的項目作為現有的 maven 項目導入到您的 IDE（在我的情況下為 eclipse）中。 ![Vaadin HelloWorld Application Project Structure](https://img.kancloud.cn/a3/52/a352d99dceede21f4a97740364801035_289x482.png) Vaadin HelloWorld 應用項目結構生成的項目包含任何 Maven Web 應用的標準文件夾結構。 ## 生成的文件連同文件夾結構一起，我們將獲得這些生成的文件以及 **vaadin helloworld 項目**。 #### `pom.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd; <modelVersion>4.0.0</modelVersion> <groupId>com.howtodoinjava.vaadin.demo</groupId> <artifactId>VaadinExample</artifactId> <packaging>war</packaging> <version>1.0</version> <name>VaadinExample</name> <prerequisites> <maven>3</maven> </prerequisites> <properties> <vaadin.version>7.7.0</vaadin.version> <vaadin.plugin.version>7.7.0</vaadin.plugin.version> <jetty.plugin.version>9.3.9.v20160517</jetty.plugin.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target>  <vaadin.widgetset.mode>local</vaadin.widgetset.mode> </properties> <repositories> <repository> <id>vaadin-addons</id> <url>http://maven.vaadin.com/vaadin-addons</url> </repository> <repository> <id>vaadin-snapshots</id> <url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url> <releases> <enabled>false</enabled> </releases> <snapshots> <enabled>true</enabled> </snapshots> </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> <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> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.6</version> <configuration> <failOnMissingWebXml>false</failOnMissingWebXml>  <packagingExcludes>WEB-INF/classes/VAADIN/widgetsets/WEB-INF/**</packagingExcludes> </configuration> </plugin> <plugin> <groupId>com.vaadin</groupId> <artifactId>vaadin-maven-plugin</artifactId> <version>${vaadin.plugin.version}</version> <executions> <execution> <goals> <goal>update-theme</goal> <goal>update-widgetset</goal> <goal>compile</goal>  <goal>compile-theme</goal> </goals> </execution> </executions> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-clean-plugin</artifactId> <version>3.0.0</version>  <configuration> <filesets> <fileset> <directory>src/main/webapp/VAADIN/themes</directory> <includes> <include>**/styles.css</include> <include>**/styles.scss.cache</include> </includes> </fileset> </filesets> </configuration> </plugin>  <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>${jetty.plugin.version}</version> <configuration> <scanIntervalSeconds>2</scanIntervalSeconds> </configuration> </plugin> </plugins> </build> <profiles> <profile>  <id>vaadin-prerelease</id> <activation> <activeByDefault>false</activeByDefault> </activation> <repositories> <repository> <id>vaadin-prereleases</id> <url>http://maven.vaadin.com/vaadin-prereleases</url> </repository> </repositories> <pluginRepositories> <pluginRepository> <id>vaadin-prereleases</id> <url>http://maven.vaadin.com/vaadin-prereleases</url> </pluginRepository> </pluginRepositories> </profile> </profiles> </project> ``` #### `MyUI.java` ```java package com.howtodoinjava.vaadin.demo; 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; /** * This UI is the application entry point. A UI may either represent a browser window * (or tab) or some part of a html page where a Vaadin application is embedded. * <p> * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be * overridden to add component to the user interface and initialize non-component functionality. */ @Theme("mytheme") public class MyUI extends UI { @Override protected 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); layout.setMargin(true); layout.setSpacing(true); setContent(layout); } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } ``` 如果要使用`web.xml`文件，因為您的服務器不支持 servlet 3.0 規范，則可以在`web.xml`文件中使用此配置。 ```java <?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>myservlet</servlet-name> <servlet-class>com.vaadin.server.VaadinServlet</servlet-class> <init-param> <param-name>UI</param-name> <param-value>com.howtodoinjava.vaadin.demo.MyUI</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>myservlet</servlet-name> <url-pattern>/*</url-pattern> </servlet-mapping> </web-app> ``` 如果您正在使用`web.xml`文件，請不要忘記刪除`@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)`。 ## 構建生成的項目現在該構建項目，以便它可以下載所有依賴項并將其包含在項目的運行時中。 ```java $ mvn clean install ``` 上面的 maven 命令將下載依賴項（需要一些時間），并構建 war 文件`VaadinExample-1.0.war`。 ## 運行并測試 vaadin HelloWorld 應用現在該運行該應用了。在命令提示符下，運行以下命令以啟動隨附的 Jetty 服務器。 ```java $mvn jetty:run ``` 這將啟動內置的 Jetty 服務器，您可以通過`http://localhost:8080/`訪問該應用。 ![Vaadin HelloWorld Screen](https://img.kancloud.cn/6a/59/6a595c30b0ce0aac12f262d472d2ecdf_334x224.png) Vaadin 你好世界屏幕現在在文本框中填寫您的姓名或任何字符串，然后單擊按鈕。它將在按鈕下方打印消息。 ![Vaadin HelloWorld Screen -2](https://img.kancloud.cn/f8/96/f8966e6eddf098016f538bf8d7693314_407x250.png) Vaadin 你好世界屏幕 - 2 [下載源碼](//howtodoinjava.com/wp-content/downloads/VaadinExample.zip) 學習愉快！資源： [Vaadin 原型](https://vaadin.com/docs/-/part/framework/getting-started/getting-started-archetypes.html) [Vaadin Maven 設置](https://vaadin.com/docs/-/part/framework/getting-started/getting-started-maven.html)