使用 Google Web Toolkit 和 JSON 开发 Ajax 应用程序_H5之家

Google Web Toolkit 和 JSON 简介

请访问 Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

centertop

Google Web Toolkit（GWT）是一套用来开发 Ajax 程序的工具，它支持开发者使用 Java 代码来创建 Ajax 的应用程序。

JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。它是一种完全和语言无关的文本格式。同时由于 JSON 是 JavaScript 的对象文字符号的子集，所以在 Ajax 开发中，经常用来作为客户端和服务器端数据交换的标准格式。

关于 GWT 和 JSON，developerWorks 已经有了一系列文章进行介绍，本文就不再详细介绍，相关资源请参阅。本文将关注如何使用 GWT 这个强大的开发工具包开发使用 JSON 作为数据交换格式的 Ajax 应用程序。

示例程序

本文将介绍如何使用 GWT 和其它开源工具来实现一个可以在页面上动态实时地展示当前服务器端单元测试执行结果的 Ajax 应用程序。其中，将讨论如何使用 GWT 和其它开源工具转换和处理 JSON 数据。

背景介绍

当开发人员提交自己修改的代码到代码服务器时，通常需要做回归测试，用来测试新提交的代码是否能够保证产品质量。测试人员在服务器端事先部署好测试工具、版本控制的代码以及可运行的 TestCases。当代码更新的时候，测试人员启动代码的回归单元测试，希望能够实时地看到服务器端 TestCases 的执行情况。然而，以往的 Web 技术很难达到以上目标，通常只有在全部结果执行完毕，才能一次性的看到全部结果，或者让用户手动地频繁刷新页面来实时的察看服务器端执行结果。

使用 Ajax 技术，可以实现页面实时刷新的动态效果。而以 GWT 作为 Ajax 开发工具，可以快捷方便的协助开发。使用 JSON 作为服务器端和客户端通讯的数据交换格式，可以更清晰地定义和传递相对复杂的结构化数据。

架构图 1. 系统构架图

图 1. 系统构架图

客户端通过 GWT 的 UI Component 来构建用户界面。客户端收集用户输入的参数 testCaseNum 和 testSuites ，编码成为 JSON 格式数据，并通过 RequestBuilder 发送到服务器端。得到返回信息以后，解析 JSON 数据，并将得到的测试结果通过 resultsGrid 实时显示出来。

服务器端 RemoteServiceServlet 接收到 JSON 格式数据以后，解析并转换为 RequestForm 对象。服务器获取请求参数，并启动测试程序。当客户端发送获取当前已完成测试结果请求的时候，服务器端读取所有生成的 TestResult 对象，并转换成为 JSON 格式数据返回给客户端。

创建 Unit Test Ajax Application 的 Eclipse 项目

首先下载 Google Web Toolkit（参见），目前最新版本为 1.4 RC，本示例代码是基于 GWT 1.4.10 开发的。如果您还没有安装 Eclipse，也请下载最新的 Eclipse（参见）。

本文示例将把 gwt-windows-1.4.10.zip 文件解压到 c:\gwt-windows-1.4.10，在该目录下将会有 projectCreator.cmd 和 applicationCreator.cmd 两个文件。然后建立项目目录 c:\workspace\unitTestProject。打开命令窗口，进入到该目录，并运行以下命令来创建 Eclipse 项目所需的项目文件：

projectCreator -eclipse unitTestProject applicationCreator -eclipse unitTestProject unitTest.client.MainApplication

之后就可以在 Eclipse 中导入 GWT 创建的项目 unitTestProject。

为了让 GWT 客户端支持 GWT 提供的 JSON 和 http 模块，需要在项目的 src/unitTest/MainApplication.gwt.xml 文件中加入 JSON 和 http 的模块声明。这样才能在 GWT 中正常使用 com.google.gwt.json.* 以及 com.google.gwt.http.* 包中的 Java 类。列出了需要加入的 inherits。

清单 1. MainApplication.gwt.xml 加入的 JSON, HTTP 模块声明

定义用户界面

现在，我们将开始创建这个 Ajax 示例应用程序，首先将创建用户界面部分，我们将建立一些用于显示的 HTML 页面和样式表，下面将介绍创建过程。

打开 src/unitTest/public/MainApplication.html。在 <style>…</style> 中定义样式。示例程序定义了按钮、状态文字以及测试结果所在单元格的样式，如所示。

清单 2. 按钮、状态条以及测试结果的样式定义

测试程序使用一个页面来展示所有元素，包括测试参数的输入界面，运行按钮，当前测试运行状态条和测试结果输出界面。为此，我们定义了如下表格（见 )，并用 id 来标志各个部分界面将会出现的位置。

清单 3. Html 文件里界面元素的定位

在 MainApplication 类中使用 GWT 界面组件创建交互界面。测试参数输入界面，包括 TestCase 的数目以及 TestSuite 列表，使用了 Grid、TextBox 以及 ListBox 来构建页面。

运行测试按钮。同时定义测试启动按钮和按钮触发 Listener 类，在 Listener 的 onClick 方法中发送运行测试请求到服务器端。

清单 4. 运行按钮的监听类主要逻辑