?创建 TodoList 项目

在本节中，我们将使用 GWT 的 webAppCreator（一个命令行工具）从头开始创建 TodoList 项目。

在我们开始之前，请确保下载最新的 GWT 分发版并安装 Maven。

使用 webAppCreator

webAppCreator 是 GWT SDK 中包含的一个命令行工具。它生成开始所需的项目结构。它还创建一个启动应用程序，您可以运行该应用程序以确保组件已成功创建和链接。

在您开发软件时，您将用自己的代码替换启动应用程序中的代码。

对于 TodoList 项目，我们需要使用以下参数运行 webAppCreator

参数	定义	示例
-templates	要使用的以逗号分隔的模板	maven,sample
-out	放置生成文件的目录。	TodoList
moduleName	要创建的 GWT 模块的名称。	org.gwtproject.tutorial.TodoList

设置新项目。

创建 TodoList 应用程序。
GWT webAppCreator 将生成项目结构和构建脚本（maven pom.xml）。
```
$ /full_path_to_gwt_sdk/webAppCreator \
    -templates maven,sample \
    -out TodoListApp \
    org.gwtproject.tutorial.TodoList
```
提示：如果您将 GWT SDK 文件夹包含在 PATH 环境变量中，则无需指定完整路径。
您可能需要修改 pom.xml 才能运行应用程序。将 <type>pom</type> 添加到 gwt 依赖项中，否则您将遇到错误。有关更多信息，请参阅 webAppCreator 文档中的“创建 Maven 项目”部分。
在超级开发模式中运行应用程序。
要检查项目是否已正确创建，请在超级开发模式中启动新应用程序。
```
$ cd TodoListApp
$ mvn war:exploded
$ mvn gwt:devmode
```
提示：由于创建的项目是用 Maven 构建的，因此您可以在 Eclipse、IDEA 等中导入它。
启动您的浏览器。
在 GWT 开发人员窗口中，按“启动默认浏览器”以启动应用程序。或者，您可以点击“复制到剪贴板”并将 URL 粘贴到任何浏览器中。
如果您更改了代码中的内容，只需重新加载网页即可重新编译应用程序。如果您更改了配置文件，例如 pom.xml 或 webapp 中的静态内容，则可能需要重新启动超级开发模式。Ctrl+C 和 mvn gwt:run 分别停止和启动执行。

自定义您的项目

设置好基本项目后，我们现在将添加必要的外部依赖项。同时，我们还将删除在构建启动应用程序时默认设置和生成的一些文件和依赖项。

通过编辑 pom.xml 文件，将 vaadin gwt-polymer-elements 依赖项添加到您的项目中。
```
<dependency>
 <groupId>com.vaadin.polymer</groupId>
 <artifactId>vaadin-gwt-polymer-elements</artifactId>
 <version>${gwtPolymerVersion}</version>
 <scope>provided</scope>
</dependency>
```
注意：将 ${gwtPolymerVersion} 占位符替换为当前版本（截至撰写本文时为 1.0.2.0-alpha3），或在您的 pom.xml 中添加相应的属性。
更新 gwt-maven-plugin 配置以支持实验性的 JsInterop 功能。
```
<plugin>
  <groupId>org.codehaus.mojo</groupId>
  <artifactId>gwt-maven-plugin</artifactId>
  ...
  <configuration>
    <jsInteropMode>JS</jsInteropMode>
    ...
  </configuration>
</plugin>
```
注意：JsInterop 是 GWT-2.7.0 中的实验性标志，您需要显式启用它。在 GWT 的未来版本中，它将默认启用。

更新 TodoList.gwt.xml 模块文件，以便我们可以使用新的 gwt 库。

<module rename-to="todolist">
  ...
  <inherits name="com.vaadin.polymer.Elements"/>
  ...
</module>

更新 TodoList.html

配置 <meta> 视口以处理移动布局。
为不支持 Web 组件的浏览器导入 polyfill <script>。
删除标签内的内容。

    <!doctype html>
    <html>
    <head>
     <meta name="viewport"
       content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
     <script src="todolist/bower_components/webcomponentsjs/webcomponents.js"></script>
     <script type="text/javascript" src="todolist/todolist.nocache.js"></script>
    </head>
    <body>
    </body>
    </html>

删除 greetServlet 及其在 WEB-INF/web-xml 中的映射。
```
<web-app>
</web-app>
```
删除所有不必要的文件。
- 删除位于 src/main/java/org/gwtproject/tutorial 中的文件夹和共享文件夹。
- 从 client 包中删除 GreetingService.java 和 GreetingServiceAsync.java。
- 删除 src/main/test 中的示例测试。

更新 EntryPoint。

将 TodoList.java 的内容替换为

package org.gwtproject.tutorial.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.vaadin.polymer.paper.widget.PaperButton;

public class TodoList implements EntryPoint {
  public void onModuleLoad() {
    // Use Widget API to Create a <paper-button>
    PaperButton button = new PaperButton("Press me!");
    button.setRaised(true);
    RootPanel.get().add(button);
  }
}

注意：上面的示例演示了如何使用 Widget API 添加 PaperButton 元素。

再次运行应用程序。
您应该看到一个包含 Material Design 按钮的网页。

下一步

在本课中，我们学习了如何

从头开始创建一个新的 GWT maven 项目。
在超级开发模式下运行和调试我们的应用程序。
将外部依赖项添加到我们的项目中。
配置我们的项目以使用实验性的 JsInterop 模式。
用我们自己的代码替换启动应用程序的代码。

我们现在准备设计 TodoList 应用程序的 UI。我们可以通过两种方式来完成：使用 GWT Widget（经典）或元素 API（现代）。

步骤 2a：使用 Widget 构建用户界面

步骤 2b：使用元素构建用户界面

免责声明