解析Google Web Toolkit开发Ajax(2)

在开始我们的实验之前，我们需要准备一下GWT环境，首先要到Google的网站上去下载一个Windows版本的GWT，目前的版本号是1.0.21。然后要在机器上配置好JDK环境，具体的配置方法网络上有大量文档，这里就不再详细介绍。由于我们这个实验是在Eclipse开发环境下进行的，所以你还需要一个Eclipse的环境，可以到Eclipse的官方网站下载Eclipse的开发环境。接下来我们详细介绍试验过程。

1. 创建Eclipse工程

我们可以利用GWT自带的一个批处理文件projectCreator.cmd来创建Eclipse的工程。如图三所示，我们创建了一个名字为myProject的工程，存放在当前目录的myProject子目录下面，关于批处理文件projectCreator.cmd的详细用法，请参见Google关于GWT的帮助文档。


图三:用GWT创建Eclipse工程

2. 创建GWT应用程序

在创建完Eclipse工程myProject之后，我们利用GWT自带的另外一个批处理文件applicationCreator.cmd来创建一个GWT应用程序。图四显示了创建一个GWT应用的过程。大家注意到这个批处理文件接受一个名为 -eclipse 的参数，这个参数正是指定了一个Eclipse的工程，我们的例子中指定为我们刚创建好的Eclipse工程myProject。


图四:创建GWT应用程序

3. 导入Eclipse工程

在创建完Eclipse工程和GWT应用程序框架后，我们接着将Eclipse工程导入到Eclipse开发环境当中以进行进一步的开发，具体的导入过程不再详细介绍。导入后的工程结构如图五所示。


图五:导入Eclipse工程

6.添加UI组件

在导入工程后，我们会发现工程里面有一个名字为DemoClient的Java文件。这个文件是在运行applicationCreator.cmd批处理文件时创建的，我们现在需要做的工作就是在这个Java文件上加入自己需要的UI组件。我们在这个文件中加入了五个组件，分别是:两个Label，一个Button，一个TextBox和一个PasswordTextBox。代码列表Listing 1中列出了本程序的所有代码。