2006 年 7 月 03 日

GWT(Google Web Toolkit) 是 Google 最近推出的一个开发 Ajax 应用的框架，它支持用 Java 开发和调试 Ajax 应用，本文主要介绍如何利用 GWT 进行 Ajax 的开发。

Ajax技术是当前开发web应用的非常热门的技术，也是Web 2.0的一个重要的组成部分。然而如果用传统的方式Javascript进行Ajax开发的话，就会使得应用程序非常难以进行调试，从而降低了生产效率。Google最近推出的GWT有望为我们解决这个难题，GWT是一个开发Ajax应用的框架，它使程序员用Java同时开发客户端和服务器端的代码。GWT的编译器会把用于开发客户端的Java代码转化成Javascript和Html，而程序员不用关心这一转换过程。这样程序员就可以在自己喜欢的Java IDE里面开发自己的Ajax应用程序。

本文主要从以下几个方面进行介绍：

1、 GWT特性简介

2、 用GWT进行UI开发

3、 用Javascript开发Ajax应用简介

4、 用GWT进行Ajax开发

GWT特性简介

1．动态，可重用的UI组件

GWT提供的组件库使用户可以很容易的开发出漂亮的UI, 每个组件对应于GWT的一个类。在本文的第二部分会比较详细的介绍GWT对UI的支持。

2．简单的RPC调用

使用GWT，可以方便的实现客户端和服务器端的通信，特别是使得异步通信变的非常简单。在本文的后面部分将对利用GWT进行RPC调用进行详细介绍。

3．更加方便的调试

由于在开发阶段不需要生成HTML截面，用户开发的代码实际上是在JVM上运行的，这样用户就可以用传统的调试Java代码的方法对程序进行调试，从而加快了调试的速度，减少了软件开发的时间。

4．浏览器兼容性

在大多数情况下，用GWT开发出来的程序会支持IE、Firefox、Mozilla、Safari和Opera，用户在开发的时候不必担心浏览器的兼容性问题。而浏览器的兼容性问题也是用直接用Javascript进行Ajax应用开发所面临的一个另程序员棘手问题。

5．可扩展性

如果你觉得GWT提供的API不能满足需求，你可以利用JSNI将Javascript语句直接嵌入至Java代码中。

用GWT进行UI开发

在本文的这一部分，我们将探讨一下GWT对UI开发的支持。在GWT中，包含我们进行Web开发所需要的大部分组件，比如按纽(Button)，文本框（Text box）等。图一显示了部分GWT所支持的UI组件。从图片的显示效果来看，利用GWT可以做出非常漂亮的UI。

值得一提的是，在每个UI组件是必须放在一个称之为面板（Panel）的控件里面。而面板具有不同的风格，这也决定了UI的风格。图二显示了GWT所支持的部分面板。

在看过这些组件之后，我们接下来用一个实验来讲述怎样把UI组件添加到页面上。这个实验的最终结果是一个登录框界面。

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

1． 创建Eclipse工程

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

2． 创建GWT应用程序

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

3． 导入Eclipse工程

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

6．添加UI组件

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

1    package com.sample.myProject.client;

2    import com.google.gwt.core.client.EntryPoint;
3    import com.google.gwt.user.client.ui.Button;
4    import com.google.gwt.user.client.ui.HorizontalPanel;
5    import com.google.gwt.user.client.ui.Label;
6    import com.google.gwt.user.client.ui.PasswordTextBox;
7    import com.google.gwt.user.client.ui.RootPanel;
8    import com.google.gwt.user.client.ui.TextBox;

/**
 * This class is used to demostrate how to add widget onto the Web page
 */
9    public class DemoClient implements EntryPoint {
  /**
   * This is the entry point method, when the module is load, this method
   * will be automatically invoked.
   */
10	  public void onModuleLoad() {
11		    Label labelName = new Label();
12		    Label labelPassword = new Label();		    
13		    TextBox tbName = new TextBox();
14	PasswordTextBox tbPassword = new PasswordTextBox();
15	Button button = new Button();
16		    
17		    labelName.setText("Name:        ");
18		    labelPassword.setText("Password: ");
19		    button.setText("submit");
20		    
21		    HorizontalPanel hPanel = new HorizontalPanel();
22		    HorizontalPanel hPanel2 = new HorizontalPanel();
23		    
24		    hPanel.add(labelName);
25		    hPanel.add(tbName);
26		    hPanel2.add(labelPassword);
27		    hPanel2.add(tbPassword);
		    
28		    RootPanel.get().add(hPanel);
29		    RootPanel.get().add(hPanel2);
30		    RootPanel.get().add(button);
31		  }
32   }

接下来我们分析一下这些程序代码，注意到类DemoClient继承自EntryPoint，所有需要最终被翻译成HTML页面的类都必须继承自EntryPoint，并且需要重写onModuleLoad方法，这个方法会在模块被装载的时候自动调用。因此我们也就需要把我们的添加组件的代码放到这个函数里面。

程序的11至15行分别创建了5个组件的实例。分别是两个Label，一个Button，一个TextBox和一个PasswordTextBox。然后程序的17到19行分别设置了两个Label组件以及一个Button组件的显示内容。程序的21行和22行穿件两个Panel对象，这两个Panel对象的类型都是水平Panel对象。也就是说放在这种Panel里面的组件是被水平排列的。程序的24行到27行分别向这两个Panel对象中加入TextBox组件和Label组件。在程序的最后，将刚才创建好的两个Panel对象以及一个Button对象加到最外层的Panel当中。

7．编译应用程序

在代码开发完成后，我们可以双击工程里面的DemoClient-compile.cmd批处理文件来将我们开发出来Java文件编译成Javascript和HTML。编译后的文件将存放在工程的根目录下面的www子目录中。

8．运行程序

编译好程序后，我们会发现生成了一个名字为DemoClient.html的HTML文件，双击这个文件，程序的运行结果如图六所示：

在这一部分，我们主要讨论了如何将UI组件添加到Web页面中，而这些组件如何与远程服务器进行异步的交互将在下面的章节中进行讨论。

共21页