1、面向 Java 开发人员的 Ajax: Google Web Toolkit 入门级别： 初级肖 菁, 唯 J 族创始人2006 年 7 月 03 日Ajax 被用于创建更加动态和交互性更好的 Web 应用程序。Google Web Toolkit (简称 GWT) 是 Google 推出的 Ajax 应用开发包，GWT 支持开发者使用 Java 语言开发 Ajax 应用。本文中作者将介绍如何使用 GWT 开发 Ajax 应用的基本方法和步骤。Ajax 简介Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写，由 XHTML、CSS、Jav
2、aScript、XMLHttpRequest、XML 等技术组合而成，是当前 Web 应用开发领域的热门技术，用于创建更加动态和交互性更好的 Web 应用程序，提升用户的浏览体验。Ajax 的核心是 JavaScript 对象 XmlHttpRequest。XmlHttpRequest 处理所有服务器通信的对象，是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。Ajax 并不是本文的中心关注点，因此这里不再赘述，请大家访问参考资源区的相关链接，了解更多关于 Ajax 技术和应用方面的知识。为什么选择
3、GWT？众所周知，即使对于 Ajax 技术非常熟悉的开发者而言，Ajax 应用的开发和调试过程也不是一件容易的事情，更困难的是，到目前为止，一直没有出现合适的开发工具能够支持 Ajax 应用的开发和调试。与此相反的是，Java 语言- 企业应用开发的主流语言-的开发和调试过程却因为有各种各样开发工具的支持而简单的多，而且这样的开发工具我们可以免费获得，比如 Eclipse、NetBeans。如果能够应用 Java 语言开发 Ajax，Ajax 应用开发的最大难题- 开发工具的缺失-就将迎刃而解。这种情况下，我们就可以既充分利用 Java 语言的开发优势降低 Ajax 应用开发的难度，加快 Aj
4、ax 应用的开发速度，为 Ajax 的大规模应用创造可能，又可以充分发挥 Ajax 技术的优势，创建更加动态和交互性更好的 Web 应用程序，提升用户的浏览体验。Google Web Toolkit(简称 GWT)的出现为我们提供了这种可能。GWT 是 Google 推出的 Ajax 应用开发包，支持开发者使用 Java 语言开发 Ajax 应用。GWT 框架本身是开源的，但是 GWT 中的开发工具仅仅提供开发用 License，不允许分发。GWT 提供了一组基于 Java 语言的开发包，这个开发包的设计参考 Java AWT 包设计，类命名规则、接口设计、事件监听等都和 AWT 非常类似。熟
5、悉Java AWT 的开发者不需要花费多大的力气就能够快速的理解 GWT 开发工具包，将更多地时间投入到 GWT 应用的开发过程中。开发出来的 Java 应用将由 GWT 开发包提供的编译工具编译后声生成对应的、应用了 Ajax 技术的 Web 应用，Java 应用中出现的、和服务器之间的交互动作被自动生成的异步调用代码所代替。GWT 特性GWT 除了支持将应用 Java 语言开发的应用转化为 Ajax 应用，同时提供了更多的高级特性，下面是这些特性的简单描述。1. GWT 编译器GWT 编译器是 GWT 的核心，负责完成将 Java 代码翻译很 Ajax 内容的工作。GWT 编译器能够翻译
6、Java 语言的大部分特性。包括支持 Java 语言中的基本类型、违例处理等，支持 java.lang 包和 java.util 包中的绝大部分类和接口，支持正则表达式和序列化。2. 跨平台支持如果你使用 GWT 中提供的显示组件( 比如 Button)和组装组件(比如 VerticalPanel)，GWT 编译生成的 Ajax 应用能够支持大部分的浏览器和操作系统，比如 Internet Explorer、Firefox 等，也能够支持 Linux、Windows 等不同操作系统。这是因为 GWT 最大限度的将这些控件翻译成浏览器内置的类型。比如Button 类编译后生成的是标准 HTML：
7、。GWT 建议使用 CSS 修饰页面元素的显示效果。GWT 的类中很少提供访问页面元素样式属性的方法，我们可以直接在 CSS 文件中通过对应的样式名称来设置页面元素的默认显示效果。比如使用 .gwt-Button font-size: 150%; 使用 Button 元素的默认显示效果。3. 宿主模式(Hosted Mode)宿主模式是指我们和没有转换为 Ajax 应用的 GWT 应用交互的状态。当我们开发和调试时，我们就一直处在宿主模式下。在这种情况下，Java 虚拟机使用 GWT 内置的浏览器运行 GWT 应用编译后的 class 内容，因此能够提供“编码、测试、调试“过程的最佳速度。我们
8、可以运行 com.google.gwt.dev.GWTShell 启动宿主模式。4. Web 模式(Web Mode)Web 模式是指已经成功转化为 Ajax 应用的状态，这种状态下，我们已经开始通过 Web 方式来访问 Ajax 应用了。在 Web 模式下运行时，不再需要 GWT 工具包或者 JVM 的支持。5. 命令行工具GWT 工具包中提供了几个非常适用的小工具来帮助我们更快的建立 GWT 应用开发环境：projectCreator、applicationCreator、junitCreator。 projectCreator 创建在 Eclipse 中开发 GWT 应用所需要的项目基本
9、文件和可选的 Ant buildfile 文件。 applicationCreator applicationCreator 命令用于创建基本的 HelloWorld！应用和 GWT 应用开发环境。 junitCreator 生成 junti 测试代码。 通过上面的内容，我们已经了解了 GWT 工具集工作的基本原理和主要特性。有些迫不及待了吧，那么就请随我一起进入 GWT 应用开发的过程吧，享受应用 Java 语言开发 Ajax 应用带来的简单和便利。本文中所有的环境准备、实例开发和说明均针对 Windows 操作平台，如果使用其他的操作系统，请根据实际情况进行适当的调整。环境准备1、 下载和
10、安装 JDK1.4.X GWT 工具包的编译需要 JDK 支持，因此在安装 GWT 工具包之前请下载和安装合适的 JDK。GWT 工具支持 Java 语言 1.4 版本或者以下版本，因此JDK 版本选择 JDK1.4.X 是比较合适的，不需要采用最新的 JDK5.0 或者更高版本。请访问 网站上下载安装版本，下载后安装到 C:/jdk 目录下，本书中的后续内容中将使用%JAVA_HOME% 变量来引用这个目录。您可以根据实际情况将 JDK 安装到任意目录下。但是在运行本文中例子的时候，请记住将对应的%JAVA_HOME%变量替换为您的实际安装目录。2、 下载和安装 GWT请访问 http:/
11、 GWT 的最新版本，将下载的压缩文件解压缩到 C:/GWT 目录下。本书中的后续内容中将使用%GWT_HOME%变量来引用这个目录。GWT 工具包支持不同的操作系统，请根据自己的操作系统选择合适的安装包。您可以根据实际情况将 GWT 安装到任意目录下。但是在运行本文中例子的时候，请记住将对应的 %GWT_HOME%变量替换为您的实际安装目录。第一个例子-Hello World！下面的内容中我们将介绍如何使用 GWT 工具集来完成第一个 GWT 的例子-“Hello World！“，并且将使用 GWT 编译及将他转化为 Ajax 应用，在浏览器中完成测试。我们要完成的例子要实现的功能包括：1、
12、 在页面上显示一个按钮2、 点击该按钮，默认情况下，我们将在按钮后面紧跟着显示字符串“Hello World!“。3、 如果点击按钮时，“Hello World!“字符串已经显示在浏览器中，我们要将他隐藏起来。我们现在开始使用 GWT 工具集完成“Hello World！“例子的开发，下面的步骤是完成“Hello World！“例子开发环境配置、应用开发、编译的基本步骤，同样适用于其他 GWT 应用的开发，只是根据实际情况可能有增减。1、 创建 GWT 应用开发环境从上面的 GWT 特性部分我们知道，GWT 工具包中提供的 applicationCreator 命令行工具可以帮助我们创建 GW
13、T 应用开发所需要的环境，因此我们可以直接使用 applicationCreator 帮助我们完成这项工作。打开命令行工具，进入 C:/根目录下，执行“mkdi“命令创建新的文件目录 HelloWorld。C: mkdir HelloWorld执行下面的命令将%JAVA_HOME%bin 目录和%GWT_HOME% 目录加入到 PATH 路径中。C:set path=%JAVA_HOME%bin;%GWT_HOME%请将命令行中的%JAVA_HOME%替换为实际环境中 JDK 的安装目录，将%GWT_HOME%替换为 GWT 工具包的安装目录。进入新创建的 HelloWorld 目录，然后运行
14、 applicationCreator 命令创建 GWT 应用开发环境。applicationCreator.cmd 命令支持的语法如下。ApplicationCreator -eclipse projectName -out dir -overwrite -ignore className 其中最重要的一个参数是 classname，也就是我们创建的 GWT 应用中的主 Java 类，我们这里选择使用 org.vivianj.gwt.client.HelloWorld。C:HelloWorldapplicationCreator.cmd org.vivianj.gwt.client.Hell
15、oWorld根据 GWT 工具包的默认规则，GWT 应用中的主 Java 类报名的最后一段必须是 client。也就是说，只有 xxx.client.Xxxx 这样命名的 Java 类才能被识别为正确的 GWT 应用主类。ApplicationCreator 工具运行的时候，屏幕上会打印如下内容。Created directory C:HelloWorldsrcCreated directory C:HelloWorldsrcorgvivianjgwtCreated directory C:HelloWorldsrcorgvivianjgwtclientCreated directory C:
16、HelloWorldsrcorgvivianjgwtpublicCreated file C:HelloWorldsrcorgvivianjgwtHelloWorld.gwt.xmlCreated file C:HelloWorldsrcorgvivianjgwtpublicHelloWorld.htmlCreated file C:HelloWorldsrcorgvivianjgwtclientHelloWorld.javaCreated file C:HelloWorldHelloWorld-shell.cmdCreated file C:HelloWorldHelloWorld-comp
17、ile.cmd2、 开发 “Hello World！“例子使用 ApplicationCreator 工具的时候，ApplicationCreator 工具其实已经帮我们生成了符合 Hello World!例子要求的全部内容。为了不打断第一个例子的演示过程，我们先简单的了解一下 ApplicationCreator 工具的生成内容。我们将在将在测试过程后面做出更加详细的分析。图 1 中显示了 ApplicationCreator 工具执行后生成的目录结构。图 1 GWT 应用开发环境图 1 中的 srcorgvivianjgwtclient 目录中的 HelloWorld.java 是 GWT
18、 应用的主类；srcorgvivianjgwtpublic 目录中的 HelloWorld.html 文件是例子的默认页面；srcorgvivianjgwt 目录下的 HelloWorld.gwt.xml 是 GWT 应用的配置文件，提供 GWT 应用中页面和主类的配置信息；根目录下的 HelloWorld-compile.cmd 文件用于提供将该 GWT 应用编译成 Ajax 的命令；根目录下的 HelloWorld-shell.cmd 文件用于启动宿主模式(Hosted Mode)，方便测试GWT 应用。3、 在宿主模式下启动“Hello World！“例子我们可以直接在命令行中执行 He
19、lloWorld-shell.cmd 来启动宿主模式(Hosted Mode)，运行新创建的“Hello World！“例子。C:HelloWorldHelloWorld-shell.cmd这个命令将启动两个可视化界面：Google Web Toolkit Development Shell（见图 2）和 GWT 内置的 GWT 应用浏览器（见图 3），GWT 应用浏览器中将显示“Hello World！“例子的初始界面，如果我们点击界面上的“Click Me“按钮，按钮后面将会显示“Hello World!“字符串（见图 4），如果再次单击页面上的“Click Me“按钮，按钮后面的“Hel
20、lo World！“字符串会消失。图 2 Google Web Toolkit Development Shell 运行界面图 3 “Hello World！“ 例子初始运行界面图 4 “Hello World！“ 例子- 单击“Clieck Me“按钮后的界面4、 编译 “Hello World！“例子要将 GWT 应用编译成 Ajax 应用，我们可以执行 HelloWorld-compile.cmd。C:HelloWorldHelloWorld-compile.cmd命令运行时，界面上将会显示下面的内容。Output will be written into C:HelloWorldwww
21、org.vivianj.gwt.HelloWorldCopying all files found on public pathCompilation succeeded其中的第一行显示生成的 Ajax 应用位于 C:HelloWorldwwworg.vivianj.gwt.HelloWorld 目录下。图 5 “Hello World！“ 例子编译后的目录结构从上面的图中我们可以看到，新生成的 www 目录下有一个名为 org.vivianj.gwt.HelloWorld 的目录，它的命名规则是 GWT 主类全名(org.vivianj.gwt.client.HelloWorld)去掉其中的
22、“client.“ 。org.vivianj.gwt.HelloWorld 目录下的 HelloWorld.html 文件就是“Hello World！“例子对应的页面，以.cache.html 后缀结尾的文件就是“Hello World！“ 例子中对应的 Ajax 代码部分，而 gwt.js 文件则是 GWT 提供的、Ajax 代码中需要用到的 JavaScript 公共函数。其他还有些辅助文件。5、 Web 模式下测试 “Hello World！“ 例子运行 HelloWorld-compile.cmd 后， GWT 应用就已经被编译成 Ajax 应用了，不再依赖于 JDK 和 GWT 环
23、境，而仅仅依赖于浏览器。我们打开 IE 浏览器，打开 C:HelloWorldwwworg.vivianj.gwt.HelloWorldHelloWorld.html 文件，就可以看到“Hello World！“例子在 Web 模式下的运行效果（见图 6），单击页面上的 “Click Me“按钮，按钮后面会出现“Hello World！“ 字符串（见图 7），如果再次单击页面上的“Click Me“按钮，按钮后面的“Hello World！“字符串会消失。图 6 Web 模式下运行“HelloWorld ！“例子的默认效果图 7 Web 模式下运行“HelloWorld ！“例子-单击“Cli
24、ck Me“按钮后的效果实例详细分析上面的步骤中，我们已经完成第一个 GWT 应用的编译和测试，下面我们来详细的介绍一下 GWT 应用开发过程中涉及的几个文件：显示页面HelloWorld.html、主类 HelloWorld 和配置文件 HelloWorld.gwt.xml。1. 显示页面 HelloWorld.htmlGWT 应用中的 HTML 内容必须存放在 public 目录下，public 目录的全路径是“orgvivianjgwtublic“，是将主类 HelloWorld 的包名“org.vivianj.gwt.client“中的 client 替换为 “public“后形成的目
25、录结构。我们将主要介绍 HelloWorld.html 中和 GWT 相关的内容，HelloWorld.html 文件的全部内容见清单 1。24. 在 HelloWorld.html 文件的第 24 行，我们使用 meta 标签指定了本页面和 GWT 模块“ org.vivianj.gwt.HelloWorld“之间的联系，meta 标签的 name 属性是不变的，而 content 属性则是 GWT 主类全名(org.vivianj.gwt.client.HelloWorld)去掉其中的“client.“后的结果。40. 在 HelloWorld.html 文件的第 40 行，我们使用 sc
26、ript 标记引入 GWT 工具提供的默认函数库。根据 HTML 语言的规定，我们可以选择在之间加入这行代码，也可以选择在之间加入这段代码。GWT 建议在 之间加入这行代码，以便获得稍微快一些的起动速度。56. 在 HelloWorld.html 文件的第 56 行，我们使用 td 标签定义了两个相邻的表格单元格，他们分别命名为“slot1“和“slot2“，根据“HelloWorld!“例子的要求，名为“slot1“的单元格中应该显示按钮，而名为“slot2“ 的单元格中则根据情况决定显示“HelloWorld!“字符串或者不显示任何内容。我们将在主类 HelloWorld.java 的源代
27、码中使用 RootPanel.get(“slot1“)来获得对该单元格的引用，请参考下面的“主类 HelloWorld“部分的说明。43. 在 HelloWorld.html 的第 43 行，我们使用 iframe 标签来设置当前页支持历史功能，iframe 的属性必须和上面的内容保持一致，否则将不会起到任何效果。清单 1 srcorgvivianjgwtpublicpublicHelloWorld.html1. 2. 3.4. 5. 6. 7. Wrapper HTML for HelloWorld8.9. 10. 11. 12. 13. body,td,a,div,.pfont-famil
28、y:arial,sans-serif14. div,tdcolor:#00000015. a:link,.w,.w a:linkcolor:#0000cc16. a:visitedcolor:#551a8b17. a:activecolor:#ff000018. 19.20. 21. 22. 23. 24. 25.26. 27.28. 29. 30. 31. 32. 33. 34.35. 36. 37. 38. 39. 40. 41.42. 43. 44.45. HelloWorld46.47. 48. This is an example of a host page for the Hel
29、loWorld application. 49. You can attach a Web Toolkit module to any HTML page you like, 50. making it easy to add bits of AJAX functionality to existingpages 51. without starting from scratch.52. 53.54. 55. 56. 57. 58. 59. 60. 2. 主类 HelloWorld主类 HelloWorld 必须继承自 com.google.gwt.core.client.EntryPoint
30、 类，并且覆盖其 public void onModuleLoad()方法。在 onModuleLoad()方法中，我们使用 GWT 中提供的默认显示组件(比如 Button)和组装组件(比如 VerticalPanel)来设计需要显示的界面，所有这些组件都位于 com.google.gwt.user.client.ui 包下面。这些组件的命名规则和 Java AWT 的命名规则基本类似，使用方式也和 AWT 的基本一致，不过 GWT 中提供了不少的新组建可供选择，比如可以直接用 VerticalPanel 来实现垂直方向的布局管理。HelloWorld.java 中的 19 和 20 行，就声明了 Button 和 Label 两个显示组件。19. final Button button = new Button(“Click me“);20. final Label label = new Label();
