Eclipe+ GWT:使用 Google Web Toolkit 开发 Ajax

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。

图一：GWT 支持的部分 UI 组件

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

图二：GWT 支持的部分面板

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

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

创建 Eclipse 工程

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

图三：用 GWT 创建 Eclipse 工程

创建 GWT 应用程序

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

图四：创建 GWT 应用程序

导入 Eclipse 工程

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

图五：导入 Eclipse 工程

添加 UI 组件

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

Listing 1：Sample GWT Application

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 当中。

编译应用程序

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

运行程序

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

图六：程序运行结果

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

回页首

用 Javascript 开发 Ajax 应用

为了使用户能更清楚地理解用 GWT 开发 Ajax 应用与用传统的 Javascript 开发 Ajax 应用的不同，文章的这一部分将简要介绍如何利用 Javascript 对象进行 Ajax 应用的开发。

大家都知道 Ajax 技术中的一个核心对象是 XMLHttpRequest 对象，这个对象支持异步请求，所谓异步请求既是当客户端发送一个请求到服务器的时候，客户端不必一直等待服务器的响应。这样就不会造成整个页面的刷新，给用户带来更好的体验。而当服务器端响应返回时，客户端利用一个 Javascript 函数对返回值进行处理，以更新页面上的部分元素的值。

由于在 IE 和其他浏览器上声称 XMLHttpRequest 对象的方法不一样，所以我们用 Javascript 创建 XMLHttpRequest 对象的时候必须区分不同的浏览器。创建一个 XMLHttpRequest 对象的方法如清单 2 中的代码所示。

清单2：创建 XMLHttpRequest 对象

1    function createObject(){
2     try {
3		  xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
4	  } catch (e1) {
5		  try {
6		    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
7		  } catch (e2) {
8		    xmlHttpRequest = false;
9		  }
10	  }
11  if (!xmlHttpRequest) {
12		 xmlHttpRequest = new XMLHttpRequest();
13	  }
14	  return xmlHttpRequest;      
16  }

在创建好 XMLHttpRequest 对象之后，来看一下如何与 server 端进行异步的交互。清单 3 中列出了与服务器段进行交互的代码

清单 3：与服务器端进行交互

1    function ajaxSample() {
2        var xmlHttpRequest = createObject();
3        var url = "/sampleServlet?userName=Jason";
4        xmlHttpRequest.open("GET", url, true);
5        xmlHttpRequest.onreadystatechange = updatePage;
6        xmlHttpRequest.send(null);
7    }

这段代码演示了如何与服务器端进行交互的过程。程序的第 2 行首先获得一个 XMLHttpRequest 对象，程序的第三行指定了服务器端响应客户端的请求的地址。程序的第 4 行利用 XMLHttpRequest 对象打开一个连接，第一个参数指定用 GET 方法传递参数，第二个参数指定了接受请求的 URL，在我们的例子中是一个 Servlet，最后一个参数设置成 true 意味着将要发出的请求是一个异步的请求。程序的第 5 行指定了回调函数，也就是当服务器端返回结果后执行哪个 Javascript 函数。

这一部分对如何利用 Javascript 进行 Ajax 开发作了一个简要的介绍，下面我们将详细介绍如何利用 GWT 进行 Ajax 应用的开发。

回页首

用 GWT 进行 Ajax 开发

在文章的第二部分我们已经掌握了如何利用 GWT 创建一个工程并在工程里添加一个 GWT 应用程序，同样我们这一部分也需要创建一个 GWT 的工程，并添加一个 GWT 应用程序，由于默认创建的 GWT 程序不含有 Server 端的示例代码，我们必须手工加进去。我们创建好的工程 GWTSample 如图七所示。我们将要介绍的实例主要功能是采用异步通信的方式从服务器端取出一个字符串显示在 HTML 页面上。这个例子虽然简单，但却包含了如何利用 GWT 进行 Ajax 开发的主要流程。

图七：GWTSample 工程结构

大家注意到我们这个工程里面有个 com.sample.myProject.server 包，这个包里面包含有运行在服务器端的代码。我们从客户端发送的请求也是发送到这个包里面的一个 Servlet 上去的。

为了进行异步调用，在 Client 端必须定义一个继承自接口 RemoteService 的接口，在我们的这个例子中，我们定义了接口 SampleService，SampleService 的代码如清单 4 所示。

1    package com.sample.myProject.client;

2    import com.google.gwt.user.client.rpc.RemoteService;

3    public interface SampleService extends RemoteService{
4    //The implementation of this method is used to return a string
5    String getString();
6    }

大家注意到这个接口继承自 RemoteService，并且声明了一个方法 getString();，这个方法会在服务器端的代码中实现。当然，大家可能现在已经意识到，这里声明的方法就是我们采用异步调用方式所能够调用的方法。

在声明完这个接口之后，我们还必须声明另外一个异步调用接口，在我们的例子中是接口 SampleServiceAsync，这个接口里声明的方法名称必须与 SampleService 里面的相同，但是多个一个类型为 AsyncCallback 的参数，接口 SampleServiceAsync 的代码清单如清单 5 所示：

清单5：SampleServiceAsync 代码清单

1    package com.sample.myProject.client;

2    import com.google.gwt.user.client.rpc.AsyncCallback;

3    public interface SampleServiceAsync {
	
4    void getString(AsyncCallback callback);
5	}

在客户端定义完接口之后，我们必须在服务器端实现这个接口，在我们的例子中，类 SampleServiceImpl 实现了接口 SampleService，同时你也会注意到 SampleServiceImpl 也继承了类 RemoteServiceServlet，而 RemoteServiceServlet 是 HttpServlet 的一个子类，这样我们的客户端的请求就可以提交到 Servlet SampleServiceImpl 上面。类 SampleServiceImpl 的代码清单如清单 6 所示：

清单6：SampleServiceImpl 代码清单

1    package com.sample.myProject.server;

2    import com.google.gwt.user.server.rpc.RemoteServiceServlet;
3    import com.sample.myProject.client.SampleService;

4	public class SampleServiceImpl extends RemoteServiceServlet implements 
5	 SampleService {
6          public String getString() {
7         return "This string is from server";
8          }
9	}

最后我们来看一下类 DemoClient，这个类和我们在第二部分创建的工程 myProject 中的类 DemoClient 是同一个类型的。只不过在我们这个工程中我们使用它来进行向 server 端的异步调用。清单 7 列出了类 DemoClient 的代码。

清单7：DemoClient 代码清单

1    package com.sample.myProject.client;

2    import com.google.gwt.core.client.EntryPoint;
3    import com.google.gwt.core.client.GWT;
4    import com.google.gwt.user.client.rpc.AsyncCallback;
5    import com.google.gwt.user.client.rpc.ServiceDefTarget;
6    import com.google.gwt.user.client.ui.Button;
7    import com.google.gwt.user.client.ui.ClickListener;
8    import com.google.gwt.user.client.ui.Label;
9    import com.google.gwt.user.client.ui.RootPanel;
10   import com.google.gwt.user.client.ui.Widget;

/**
 * This class is used to demostrate hwo to 
 * interact with the server client in asynchronized
 * way
 */
11   public class DemoClient implements EntryPoint {

12       public void onModuleLoad() {
13	final SampleServiceAsync sampleService = (SampleServiceAsync) 
14	 GWT.create(SampleService.class);
15        ServiceDefTarget target = (ServiceDefTarget)sampleService;
16        String staticResponseURL = GWT.getModuleBaseURL();
17        staticResponseURL += "/getStringService";
18        target.setServiceEntryPoint(staticResponseURL);
19        
20        final Label label = new Label();
21        final Button button = new Button("Get String");
        
22        button.addClickListener(new ClickListener() {
23            public void onClick(Widget sender) {
24                sampleService.getString(new AsyncCallback() {
25                    public void onSuccess(Object result) {
26                        label.setText((String) result);
27                    }
28                    public void onFailure(Throwable caught) {
29                        label.setText(caught.getMessage());
30                    }
31                });
32            }
33        });

34        RootPanel.get("1").add(button);
35        RootPanel.get("2").add(label);
36    }
37}

代码的第 13 行得到了一个实现了接口 SampleServiceAsync 的类的实例。第 15 行创建了一个 ServiceDefTarget 对象的一个实例，通过这个对象可以设置请求的目的地。程序的第 18 行设置了请求的目的地的 URL，在我们的例子中是 "/getStringService"，这个 URL 会在 web.xml 文件中被 mapping 到 servlet SampleServiceImpl 上。程序的 22 行到 33 行为我们添加的 button 设置了单击响应事件。在单击响应事件中调用 sampleService 的 getString(AsyncCallback callback); 方法。这个方法是用来进行异步的远程过程调用的 (RPC).并且在实现接口 AsyncCallback 的代码中指定了回调函数，当远程过程调用成功后就执行 onSuccess(Object result) 函数，其中 result 中存放有从服务器端返回的结果.。在远程工程调用失败后就执行 onFailure(Throwable caught) 函数。程序的最后把 Button 组件和 Label 组件加到 panel 中。

现在我们已经完成了程序的开发，图八显示了我们程序的运行结果，在点击 Button 后，右边回打出一句话来，重要的是这句话是以异步的方式从服务器端取得的，不需要进行页面的刷新，怎么样，现在是不是也想用 GWT 进行 Ajax 应用开发了呢？

图八：RPC 调用示例

回页首

总结

本文主要对用 GWT 进行 Ajax 开发进行了比较详细的介绍，并通过与传统的 Ajax 开发方式进行比较，使读者能更清楚地理解它们之间的区别，最后我们可以看出用 GWT 进行 Ajax 开发可以使得程序员免受调试 Javascript 之苦，并且 GWT 自动处理了浏览器之间的兼容性问题，这些都会使得开发更加容易，快捷。因此，用 GWT 进行 Ajax 开发是一种比较好的方式。希望本文能为读者学习 GWT 进行 Ajax 的开发有所帮助。

回页首

下载

名字 大小 下载方法

GWTSample_Project.rar	8KB	HTTP