创建

此时，您已经下载了最新版本的 Google Web Toolkit。

在本节中，您将使用 Google Plugin for Eclipse 或 GWT 命令行工具 webAppCreator 创建 StockWatcher 项目。这些工具会生成您入门所需的项目子目录和文件。为了测试您的项目是否已正确配置，您将以开发模式运行 GWT 启动应用程序。然后您将检查已创建的项目文件。

创建 GWT 应用程序。
测试默认项目组件。
检查项目组件。

创建 GWT 应用程序

创建 StockWatcher 应用程序（使用 Eclipse）

使用 GWT 的优势之一是，您可以利用 Java IDE 中提供的工具，例如重构、代码补全和调试。在本教程中，我们使用 Eclipse，因为它广泛可用且免费。但是，您可以随意使用自己喜欢的 IDE。

Google Plugin for Eclipse 包含一个用于创建 GWT 应用程序的向导。以下是如何创建启动应用程序的步骤。

在工具栏中，单击“新建 Web 应用程序项目”按钮。
填写项目详细信息
1. 输入项目名称“StockWatcher”。
2. 输入包“com.google.gwt.sample.stockwatcher”。
3. 确保选中“使用 Google Web Toolkit”和“使用默认 SDK（GWT）”。
4. （可选）如果您使用的是 Google App Engine，请确保选中“使用 Google App Engine”和“使用默认 SDK（App Engine）”。
5. 如果您在安装 Google Plugin for Eclipse 时没有安装 SDK，则应单击“配置 SDK...”以指定解压缩 GWT（和 App Engine SDK，如果需要）的目录。
单击“完成”按钮。

创建 StockWatcher 应用程序（不使用 Eclipse）

webAppCreator 是 GWT 下载中包含的命令行工具，用于生成您入门所需的项目子目录和文件。它会创建一个启动应用程序，您可以运行它以确保所有组件都已创建并正确连接。在开发应用程序时，您将用自己的代码替换启动应用程序的代码。

从 GWT 1.6 开始，以前的命令行工具 projectCreator 和 applicationCreator 已合并为 webAppCreator。

对于 StockWatcher 项目，您将使用以下参数运行 webAppCreator。

参数	定义	示例
-out	放置生成文件的目录。	StockWatcher
-junit	系统上 junit.jar 的完全限定路径名。您可以在其 sourceforge 项目页面下载 JUnit，也可以使用 Eclipse 附带的版本。	（PC）C:\eclipse\plugins\org.junit_3.8.2.v200706111738\junit.jar （Mac）/Users/myname/eclipse/plugins/org.junit_3.8.2.v200706111738/junit.jar
moduleName	要创建的 GWT 模块的名称。	com.google.gwt.sample.stockwatcher.StockWatcher

创建 StockWatcher 应用程序。
- 在命令行中，转到 StockWatcher 目录
- 执行
- 在 **单行** 上输入以下命令。（示例仅显示在多行上以提高可读性。）
```
webAppCreator -out StockWatcher
              -junit "C:\eclipse\plugins\org.junit_3.8.2.v200706111738\junit.jar"
              com.google.gwt.sample.stockwatcher.StockWatcher
```
将 junit.jar 路径名（在以下示例中突出显示）替换为系统上 junit.jar 的完全限定路径名。
**注意：** * -junit * 参数是可选的。如果您在系统上没有安装 junit 或不希望在应用程序中使用 junit，则可以将其省略。
**提示：** 如果将 GWT 命令行工具包含在 PATH 环境变量中，则不必通过指定其完整路径来调用它们。

Created directory StockWatcher/src
Created directory StockWatcher/war
Created directory StockWatcher/war/WEB-INF
Created directory StockWatcher/war/WEB-INF/lib
Created directory StockWatcher/src/com/google/gwt/sample/stockwatcher
Created directory StockWatcher/src/com/google/gwt/sample/stockwatcher/client
Created directory StockWatcher/src/com/google/gwt/sample/stockwatcher/server
Created directory StockWatcher/test/com/google/gwt/sample/stockwatcher/client
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml
Created file StockWatcher/war/StockWatcher.html
Created file StockWatcher/war/StockWatcher.css
Created file StockWatcher/war/WEB-INF/web.xml
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/client/GreetingService.java
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/client/GreetingServiceAsync.java
Created file StockWatcher/src/com/google/gwt/sample/stockwatcher/server/GreetingServiceImpl.java
Created file StockWatcher/build.xml
Created file StockWatcher/README.txt
Created file StockWatcher/test/com/google/gwt/sample/stockwatcher/client/StockWatcherTest.java
Created file StockWatcher/.project
Created file StockWatcher/.classpath
Created file StockWatcher/StockWatcher.launch
Created file StockWatcher/StockWatcherTest-dev.launch
Created file StockWatcher/StockWatcherTest-prod.launch
Created file StockWatcher/war/WEB-INF/lib/gwt-servlet.jar

GWT webAppCreator 会生成您入门所需的项目子目录和文件。

创建的目录
/src/com/google/gwt/sample/stockwatcher 包含 GWT 模块定义和初始应用程序文件。
/test/com/google/gwt/sample/stockwatcher 包含 JUnit 测试目录和一个启动测试类。
/war 包含可以公开提供服务的静态资源，例如图像文件、样式表和 HTML 主页。
/war/WEB-INF 包含 Java Web 应用程序文件。

/war/WEB-INF/lib 包含 Java Web 应用程序库。

从 GWT 1.6 开始，静态文件已移至 /war。

创建的文件
StockWatcher.gwt.xml GWT 模块定义
StockWatcher.html 主页
StockWatcher.css 应用程序样式表
web.xml Java Web 应用程序描述符
StockWatcher.java GWT 入口点类
GreetingService.java、GreetingServiceAsync.java、GreetingServiceImpl.java GWT 示例 RPC 类
gwt-servlet.jar GWT 服务器运行时库

StockWatcherTest.java StockWatcher 的启动测试用例

创建的脚本

build.xml 用于以开发模式运行应用程序或从命令行调用 GWT 编译器的 Ant 构建文件。

创建的 Eclipse 文件
.project
.classpath
StockWatcher.launch
StockWatcherTest-dev.launch

StockWatcherTest-prod.launch

要查看 webAppCreator 的完整选项列表，请参见命令行工具，webAppCreator。

有关项目结构的更多信息，请参见开发者指南，目录/包约定。

测试默认项目组件

要检查是否已创建所有项目组件，请以开发模式运行启动应用程序。在开发模式下，您可以像最终部署时一样在浏览器中与应用程序进行交互。

运行开发模式代码服务器（从 Eclipse）
在“包资源管理器”视图中，选择 StockWatcher 项目。
在工具栏中，单击“运行”按钮（以 Web 应用程序身份运行）。注意：使用较新版本的 Chrome 浏览器时，请改用“以 Web 应用程序身份运行（GWT Super Dev Mode）”。默认运行模式所需的“Google Web Toolkit Developer Plugin”不再适用于较新版本的浏览器。
打开开发模式选项卡时，右键单击 URL 以将其复制。

将 URL 粘贴到您选择的浏览器中。

运行开发模式代码服务器（不从 Eclipse）

webAppCreator 会创建一个包含用于以开发模式运行应用程序的目标的 ant 构建文件。
从命令行，更改到 StockWatcher 目录

ant devmode

执行

**提示：** 如果将 Ant 命令行工具包含在 PATH 环境变量中，则不必通过指定其完整路径来调用它们。

开发模式将打开两个选项卡：开发模式代码服务器和 Jetty HTTP 服务器。按下“启动默认浏览器”按钮，使用默认浏览器以开发模式启动 StockWatcher。或者，您可以单击“复制到剪贴板”以复制启动 URL 并将其粘贴到您选择的浏览器中。

连接到开发模式代码服务器（使用和不使用 Eclipse）

启动开发模式（从 Eclipse 或使用 build.xml 脚本）并将 URL 输入到浏览器后，浏览器将尝试连接。如果这是您第一次以开发模式运行 GWT 应用程序，系统可能会提示您安装 Google Web Toolkit Developer Plugin。按照页面上的说明安装插件，然后重新启动浏览器并返回到同一 URL。

启动应用程序

使用 GWT 创建新的 Web 应用程序时，默认情况下它会创建一个简单的启动应用程序，如下所示。此应用程序可帮助您在开始开发之前测试所有组件是否已安装和配置。在开始编写 StockWatcher 应用程序时，您将用自己的代码替换此启动应用程序代码。

检查项目组件

让我们检查一些生成的文件，看看它们如何组合在一起形成 GWT 项目。

模块 XML 文件

打开模块 XML 文件 StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml。

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='stockwatcher'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
  <!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/>     -->

  <!-- Other module inherits                                      -->

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.google.gwt.sample.stockwatcher.client.StockWatcher'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>

</module>

在模块 XML 文件中，您指定应用程序的入口点类。为了编译，GWT 模块必须指定一个入口点。如果 GWT 模块没有入口点，那么它只能被其他模块继承。可以包含其他模块，这些模块在其模块 XML 文件中指定了入口点。如果是这样，那么您的模块将具有多个入口点。每个入口点按顺序执行。

默认情况下，StockWatcher 使用两个样式表：默认的 GWT 样式表 standard.css（通过继承的主题引用），以及应用程序样式表 StockWatcher.css，该样式表由 webAppCreator 生成。在本教程的后面，您将学习如何覆盖默认的 GWT 样式。

宿主页面

打开宿主页面 StockWatcher/war/StockWatcher.html。

Web 应用程序的代码在 HTML 文档中执行。在 GWT 中，我们称之为宿主页面。例如，StockWatcher 项目的宿主页面是 StockWatcher.html。

宿主页面引用应用程序样式表 StockWatcher.css。

宿主页面引用负责页面上动态元素的 JavaScript 源代码的路径（由 GWT 生成）。整个 body 元素的内容可以动态生成，例如，在启动应用程序时就是这样。但是，在您实现 StockWatcher 应用程序时，您将使用静态元素和动态元素的混合。您将创建一个 HTML <div> 元素作为页面动态生成部分的占位符。

选择怪癖模式与标准模式

为了提供更好的跨浏览器兼容性，GWT 将文档类型声明设置为 HTML 4.01 Transitional。这反过来将浏览器的渲染引擎设置为“怪癖模式”。如果您想在“标准模式”下渲染应用程序，则可以使用许多其他文档类型来强制浏览器进入此渲染模式。一般来说，GWT 应用程序在“标准模式”下的工作效果与“怪癖模式”一样好，但在某些情况下，使用面板等小部件可能无法正确渲染。这个问题在 GWT 1.5 之后得到了很大改进，并且正在进行更多工作来彻底解决这个问题。

保留浏览器历史记录

GWT 提供了一种机制，可以帮助您的应用程序满足用户对网页的期望，特别是在用户能够使用浏览器的后退按钮的情况下，例如在多页向导或购物车/结账场景中。宿主页面包含 iframe 标签，这些标签对于在您的 GWT 应用程序中加入历史记录支持是必需的。

要了解有关在 GWT 应用程序中管理浏览器历史记录的更多信息，请参阅开发者指南，历史记录。

应用程序样式表

打开应用程序样式表 StockWatcher/war/StockWatcher.css。

每个项目都关联一个样式表。默认情况下，应用程序样式表 StockWatcher.css 包含启动应用程序的样式规则。在本教程的应用样式部分，您将使用 StockWatcher 应用程序的样式规则替换启动应用程序的样式规则。

与任何网页一样，您可以指定多个样式表。以继承顺序列出多个样式表；也就是说，将最具体的样式规则列在最后一个样式表中。

Java 源代码

打开 StockWatcher 入口点类的源代码 StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java。

目前，StockWatcher.java 包含启动应用程序的 Java 源代码。在本教程中，您将用 StockWatcher 的客户端代码替换此代码。

StockWatcher 类实现了 GWT 接口 EntryPoint。它包含 onModuleLoad 方法。因为 StockWatcher 类在 StockWatcher 的模块定义中被指定为入口点类，所以当您启动 StockWatcher 时，会调用 onModuleLoad 方法。

StockWatcher 类通过在 StockWatcher 的模块定义 (StockWatcher.gwt.xml) 中包含的其他 GWT 模块继承功能。例如，在构建用户界面时，您可以包含来自包 com.google.gwt.user.client.ui 的类型和资源，因为它属于 GWT 模块 com.google.gwt.user.User 中包含的 GWT 核心功能的一部分。

下一步

此时，您已为 StockWatcher 应用程序创建了存根文件，并将该项目加载到 Eclipse（或您喜欢的任何 Java IDE）中。

现在，您已准备好设计 StockWatcher 应用程序。

步骤 2：设计应用程序