AJAX开发框架GWT.doc

面向 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、JavaScript、XMLHttpRequest、XML等技术组合而成，是当前Web应用开发领域的热门技术，用于创建更加动态和交互性更好的Web应用程序，提升用户的浏览体验。Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest处理所有服务器通信的对象，是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。Ajax并不是本文的中心关注点，因此这里不再赘述，请大家访问参考资源区的相关链接，了解更多关于Ajax技术和应用方面的知识。为什么选择GWT？众所周知，即使对于Ajax技术非常熟悉的开发者而言，Ajax应用的开发和调试过程也不是一件容易的事情，更困难的是，到目前为止，一直没有出现合适的开发工具能够支持Ajax应用的开发和调试。与此相反的是，Java语言-企业应用开发的主流语言-的开发和调试过程却因为有各种各样开发工具的支持而简单的多，而且这样的开发工具我们可以免费获得，比如Eclipse、NetBeans。如果能够应用Java语言开发Ajax，Ajax应用开发的最大难题-开发工具的缺失-就将迎刃而解。这种情况下，我们就可以既充分利用Java语言的开发优势降低Ajax应用开发的难度，加快Ajax应用的开发速度，为Ajax的大规模应用创造可能，又可以充分发挥Ajax技术的优势，创建更加动态和交互性更好的Web应用程序，提升用户的浏览体验。Google Web Toolkit(简称GWT)的出现为我们提供了这种可能。GWT是Google推出的Ajax应用开发包，支持开发者使用Java语言开发Ajax应用。GWT框架本身是开源的，但是GWT中的开发工具仅仅提供开发用License，不允许分发。GWT提供了一组基于Java语言的开发包，这个开发包的设计参考Java AWT包设计，类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包，将更多地时间投入到GWT应用的开发过程中。开发出来的Java应用将由GWT开发包提供的编译工具编译后声生成对应的、应用了Ajax技术的Web应用，Java应用中出现的、和服务器之间的交互动作被自动生成的异步调用代码所代替。GWT特性GWT除了支持将应用Java语言开发的应用转化为Ajax应用，同时提供了更多的高级特性，下面是这些特性的简单描述。1. GWT编译器GWT编译器是GWT的核心，负责完成将Java代码翻译很Ajax内容的工作。GWT编译器能够翻译Java语言的大部分特性。包括支持Java语言中的基本类型、违例处理等，支持java.lang包和java.util包中的绝大部分类和接口，支持正则表达式和序列化。2. 跨平台支持如果你使用GWT中提供的显示组件(比如Button)和组装组件(比如VerticalPanel)，GWT编译生成的Ajax应用能够支持大部分的浏览器和操作系统，比如Internet Explorer、Firefox等，也能够支持Linux、Windows等不同操作系统。这是因为GWT最大限度的将这些控件翻译成浏览器内置的类型。比如Button类编译后生成的是标准HTML：。GWT建议使用CSS修饰页面元素的显示效果。GWT的类中很少提供访问页面元素样式属性的方法，我们可以直接在CSS文件中通过对应的样式名称来设置页面元素的默认显示效果。比如使用 .gwt-Button font-size: 150%; 使用Button元素的默认显示效果。3. 宿主模式(Hosted Mode)宿主模式是指我们和没有转换为Ajax应用的GWT应用交互的状态。当我们开发和调试时，我们就一直处在宿主模式下。在这种情况下，Java虚拟机使用GWT内置的浏览器运行GWT应用编译后的class内容，因此能够提供编码、测试、调试过程的最佳速度。我们可以运行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应用所需要的项目基本文件和可选的Ant buildfile文件。 applicationCreator applicationCreator命令用于创建基本的HelloWorld！应用和GWT应用开发环境。 junitCreator 生成junti测试代码。 通过上面的内容，我们已经了解了GWT工具集工作的基本原理和主要特性。有些迫不及待了吧，那么就请随我一起进入GWT应用开发的过程吧，享受应用Java语言开发Ajax应用带来的简单和便利。本文中所有的环境准备、实例开发和说明均针对Windows操作平台，如果使用其他的操作系统，请根据实际情况进行适当的调整。环境准备1、 下载和安装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请访问/webtoolkit/下载GWT的最新版本，将下载的压缩文件解压缩到C:/GWT目录下。本书中的后续内容中将使用%GWT_HOME%变量来引用这个目录。GWT工具包支持不同的操作系统，请根据自己的操作系统选择合适的安装包。您可以根据实际情况将GWT安装到任意目录下。但是在运行本文中例子的时候，请记住将对应的%GWT_HOME%变量替换为您的实际安装目录。第一个例子-Hello World！下面的内容中我们将介绍如何使用GWT工具集来完成第一个GWT的例子-Hello World！，并且将使用GWT编译及将他转化为Ajax应用，在浏览器中完成测试。我们要完成的例子要实现的功能包括：1、 在页面上显示一个按钮2、 点击该按钮，默认情况下，我们将在按钮后面紧跟着显示字符串Hello World!。3、 如果点击按钮时，Hello World!字符串已经显示在浏览器中，我们要将他隐藏起来。我们现在开始使用GWT工具集完成Hello World！例子的开发，下面的步骤是完成Hello World！例子开发环境配置、应用开发、编译的基本步骤，同样适用于其他GWT应用的开发，只是根据实际情况可能有增减。1、 创建GWT应用开发环境从上面的GWT特性部分我们知道，GWT工具包中提供的applicationCreator命令行工具可以帮助我们创建GWT应用开发所需要的环境，因此我们可以直接使用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目录，然后运行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.HelloWorld根据GWT工具包的默认规则，GWT应用中的主Java类报名的最后一段必须是client。也就是说，只有xxx.client.Xxxx这样命名的Java类才能被识别为正确的GWT应用主类。ApplicationCreator工具运行的时候，屏幕上会打印如下内容。Created directory C:HelloWorldsrcCreated directory C:HelloWorldsrcorgvivianjgwtCreated directory C:HelloWorldsrcorgvivianjgwtclientCreated directory C:HelloWorldsrcorgvivianjgwtpublicCreated file C:HelloWorldsrcorgvivianjgwtHelloWorld.gwt.xmlCreated file C:HelloWorldsrcorgvivianjgwtpublicHelloWorld.htmlCreated file C:HelloWorldsrcorgvivianjgwtclientHelloWorld.javaCreated file C:HelloWorldHelloWorld-shell.cmdCreated file C:HelloWorldHelloWorld-compile.cmd2、 开发Hello World！例子使用ApplicationCreator工具的时候，ApplicationCreator工具其实已经帮我们生成了符合Hello World!例子要求的全部内容。为了不打断第一个例子的演示过程，我们先简单的了解一下ApplicationCreator工具的生成内容。我们将在将在测试过程后面做出更加详细的分析。图1中显示了ApplicationCreator工具执行后生成的目录结构。图1 GWT应用开发环境图1中的srcorgvivianjgwtclient目录中的HelloWorld.java是GWT应用的主类；srcorgvivianjgwtpublic目录中的HelloWorld.html文件是例子的默认页面；srcorgvivianjgwt目录下的HelloWorld.gwt.xml是GWT应用的配置文件，提供GWT应用中页面和主类的配置信息；根目录下的HelloWorld-compile.cmd文件用于提供将该GWT应用编译成Ajax的命令；根目录下的HelloWorld-shell.cmd文件用于启动宿主模式(Hosted Mode)，方便测试GWT应用。3、 在宿主模式下启动Hello World！例子我们可以直接在命令行中执行HelloWorld-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按钮，按钮后面的Hello 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:HelloWorldwwworg.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)去掉其中的.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环境，而仅仅依赖于浏览器。我们打开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！例子-单击Click Me按钮后的效果实例详细分析上面的步骤中，我们已经完成第一个GWT应用的编译和测试，下面我们来详细的介绍一下GWT应用开发过程中涉及的几个文件：显示页面HelloWorld.html、主类HelloWorld和配置文件HelloWorld.gwt.xml。1. 显示页面HelloWorld.htmlGWT应用中的HTML内容必须存放在public目录下，public目录的全路径是orgvivianjgwtublic，是将主类HelloWorld的包名org.vivianj.gwt.client中的client替换为public后形成的目录结构。我们将主要介绍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行，我们使用script标记引入GWT工具提供的默认函数库。根据HTML语言的规定，我们可以选择在之间加入这行代码，也可以选择在之间加入这段代码。GWT建议在之间加入这行代码，以便获得稍微快一些的起动速度。56.在HelloWorld.html文件的第56行，我们使用td标签定义了两个相邻的表格单元格，他们分别命名为slot1和slot2，根据HelloWorld!例子的要求，名为slot1的单元格中应该显示按钮，而名为slot2的单元格中则根据情况决定显示HelloWorld!字符串或者不显示任何内容。我们将在主类HelloWorld.java的源代码中使用RootPanel.get(slot1)来获得对该单元格的引用，请参考下面的主类HelloWorld部分的说明。43.在HelloWorld.html的第43行，我们使用iframe标签来设置当前页支持历史功能，iframe的属性必须和上面的内容保持一致，否则将不会起到任何效果。清单1 srcorgvivianjgwtpublicpublicHelloWorld.html.5.6.7.Wrapper HTML for HelloWorld1.12.13.body,td,a,div,.pfont-family:arial,sans-serif14.div,tdcolor:#00000015.a:link,.w,.w a:linkcolor:#0000cc16.a:visitedcolor:#551a8b17.a:activecolor:#ff00005.HelloWorld46.47.48.This is an example of a host page for the HelloWorld 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.. 主类HelloWorld主类HelloWorld必须继承自com.google.gwt.core.client.EntryPoint类，并且覆盖其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();onModuleLoad()方法中，我们需要把生成的显示组件或者组装组建加入到显示页面的对应显示区域。首先，我们需要在页面上使用id属性为显示区域指定唯一的名称(参见清单1中的56行)。com.google.gwt.user.client.ui.RootPanel的静态方法get可以根据传入的字符串参数（参数值就是显示区域的id属性）获取页面上对应的显示区域。HelloWorld.java的36、37行，就使用了RootPanel的get方法分别获得页面上id为slot1、slot2的显示区域，然后调用add方法将生成的Button和Label对象加入到显示区域中。36. RootPanel.get(slot1).add(button);37. RootPanel.get(slot2).add(label);Ajax最重要的功能就是为用户提供更好的交互体验，GWT中使用和AWT中相同的事件监听机制完成客户端事件监听，GWT中支持的Listener接口包括ChangeListener、ClickListener等。我们可以通过各种各样的Listener接口获得用户界面上所发生的动作，通过处理这些动作来完成对应业务逻辑。HelloWorld.java中的第22行29行的内容就实现了一个ClickListender接口，并且提供了对应的onClick方法实现，用于处理按钮点击后的业务逻辑（判断是否需要显示Hello World!字符串），然后调用Button对象的addClickListener方法增加监听器。22. button.addClickListener(new ClickListener() 23. public void onClick(Widget sender) 24. if (label.getText().equals()25. label.setText(Hello World!);26. else27. label.setText();28. 29. );HelloWorld类的全部源代码内容见清单2。清单2 srcorgvivianjgwtclientHelloWorld.java1.package org.vivianj.gwt.client;2.3.import com.google.gwt.core.client.EntryPoint;4.import com.google.gwt.user.client.ui.Button;5.import com.google.gwt.user.client.ui.ClickListener;6.import com.google.gwt.user.client.ui.Label;7.import com.google.gwt.user.client.ui.RootPanel;8.import com.google.gwt.user.client.ui.Widget;9.10./*11. * Entry point classes define onModuleLoad().12. */13.public class HelloWorld implements EntryPoint 14.15. /*16. * This is the entry point method.17. */18. public void onModuleLoad() 19. final Button button = new Button(Click me);20. final Label label = new Label();21.22. button.addClickListener(new ClickListener() 23. public void onClick(Widget sender) 24. if (label.getText().equals()25. label.setText(Hello World!);26. else27. label.setText();28. 29. );30.31. / Assume that the host HTML has elements defined whose32. / IDs are slot1, slot2. In a real app, you probably would not want33. / to hard-code IDs. Instead, you could, for example, search for all 34. / elements with a particular CSS class and replace them with widgets.35. /36. RootPanel.get(slot1).add(button);37. RootPanel.get(slot2).add(label);38. 39.3. 配置文件HelloWorld.gwt.xml配置文件中包括两个元素。Inherits元素地设置GWT应用的继承信息，而entry-point元素的class属性则用于设置设置GWT应用的主类。清单3 srcorgvivianjgwtHelloWorld.gwt.xml.. 9.结束语Ajax是当前热门的Web应用开发技术，Java是企业应用开发中的主流技术，GWT框架将这两种技术合二为一，是我们能够应用Java语言来开发Ajax，在保留Ajax技术的优点基础上，解决了Ajax应用开发、调试困难的缺点。本文中介绍了GWT的基本知识、主要特性，提供了HelloWorld！例子说明使用Java和GWT框架开发Ajax应用的开发、编译、测试过程，并且通过对HelloWorld！例子中涉及文件的分析，讲解了使用GWT框架开发Ajax应用的技术细节和约束条件。面向 Java 开发人员的 Ajax: 探索 Google Web Toolkit从单一 Java 代码库开发 Ajax 应用程序文档选项窗体顶端将此页作为电子邮件发送未显示需要 JavaScript 的文档选项窗体底端样例代码级别： 高级Philip McCarthy (), 软件开发顾问, Independent2006 年 7 月 17 日最近发布的 Google Web Toolkit (GWT) 是一组全面的 API 和工具，它支持用户几乎完全使用 Java 代码来创建动态 Web 应用程序。Philip McCarthy 回到了他广受欢迎的面向 Java 开发人员的 Ajax 系列，向您展示 GWT 能做什么，并帮助您确定它是否适合您。GWT（请参阅 参考资料）采用了一种不寻常的方式进行 Web 应用程序开发。它没有采用客户端和服务器端代码库的普通隔离，而是提供了一个 Java API，该 API 允许创建基于组件的 GUI，然后编译它们，从而在用户的 Web 浏览器上显示它们。与一般的 Web 应用程序开发体验相比，使用 GWT 更接近于使用 Swing 或 SWT 进行开发，它还试图将 HTTP 协议和 HTML DOM 模型抽象出去。实际上，应用程序最终几乎总是会呈现在 Web 浏览器中。GWT 是通过代码生成来实现这些功能的，它利用其编译器从客户端 Java 代码生成 JavaScript。GWT 支持 java.lang 和 java.util 包的子集，还支持 GWT 自身提供的 API。编译后的 GWT 应用程序由 HTML、XML 和 JavaScript 片段组成。但是，这些片段很难区分，所以最好把编译后的应用程序当成是黑盒子 Java 字节码的 GWT 等价物。在这篇文章中，我将创建一个简单的 GWT 应用程序，用该程序从远程 Web API 获得天气报告，并在浏览器中显示它。在整个过程中，我将简要介绍尽可能多的 GWT 功能，还将提到一些可能遇到的潜在问题。从简单的开始清单 1 显示了可以用 GWT 制作的最简单的应用程序的 Java 源代码：清单 1. 最简单的 GWT 示例public class Simple implements EntryPoint public void onModuleLoad() final Button button = new Button(Say Hello); button.addClickListener(new ClickListener() public void onClick(Widget sender) Window.alert(Hello World!); ); RootPanel.get().add(button); 这个代码看起来非常像使用 Swing、AWT 或 SWT 编写的 GUI 代码。不出所料，清单 1 创建了一个按钮，在单击此按钮时会显示消息 “Hello World!”。该按钮被添加到 RootPanel，这是一个环绕 HTML 页面主体的 GWT 包装对象。图 1 显示了应用程序在 GWT Shell 中运行时的情况。GWT Shell 是一个包含在 GWT SDK 中的调试宿主环境（debugging hosting environment），与一个简单的浏览器组合在一起。图 1. 运行最简单的 GWT 示例回页首构建 Weather Reporter 应用程序我将用 GWT 创建一个简单的 Weather Reporter 应用程序。该应用程序的 GUI 向用户显示了一个用于输入 ZIP 代码的输入框，还显示了一个使用摄氏温度还是华氏温度来表示温度的选项。当用户单击 Submit 按钮时，该应用程序用 Yahoo! 的免费天气 API 获得所选定地区的 RSS 格式的报告。然后提取这个文档的 HTML 部分，并将它显示给用户。GWT 应用程序被打包成模块，并且必须符合特定的结构。名为 module-name.gwt.xml 的配置文件定义了充当应用程序入口点的类，并指明是否要从其他 GWT 模块继承资源。在应用程序的源包结构中，必须将配置文件放在与 client 包和 public 目录相同的级别上，所有客户端 Java 代码都在 client 包中，而 public 目录包含项目的 Web 资源，比如图片、CSS 和 HTML。最后，public 目录中必须包含一个 HTML 文件，该文件中必须有一个包含模块的限定名称的 meta 标记。GWT 的运行时 JavaScript 库使用这个文件来初始化应用程序。在指定了入口点类的情况下，GWT 的 applicationCreator 会替您生成这个基本结构。所以可以将调用 applicationCreator developerworks.gwt.weather.client.Weather 生成一个项目框架作为创建 Weather Reporter 应用程序的起点。在该应用程序的源代码下载中包含的 Ant 构建文件中，有一些有用的目标（target），可使用它们让 GWT 项目符合这个结构。（请参阅 下载）。开发基本的 GUI首先，我将开发应用程序的用户界面小部件（widget）的基本布局，且不添加其他任何行为。Widget 类是可以呈现在 GWT UI 中的几乎所有类的超类。Widget 总是包含在 Panel中，Panel 本身也是 Widget，所以可以被嵌套。不同类型的面板提供了不同的布局行为。所以，GWT Panel 扮演的角色与 AWT/Swing 中的 Layout 或 XUL 中的 Box 类似。所有小部件和面板最终都要附加到包含它们的 Web 页面上。如 清单 1 所示，可以直接把它们附加到 RootPanel 上。或者，可以用 RootPanel 获得对使用 ID 或类名标识的 HTML 元素的引用。在这个示例中，我将使用两个独立的 HTML DIV 元素，它们的名称分别是 input-container 和 output-container。第一个元素包含 Weather Reporter 应用程序的 UI 控件，第二个元素显示天气报告本身。清单 2 显示了设置基本布局所需的代码；它应当是自解释的。HTML 小部件只是 HTML 标记的容器，来自 Yahoo! 天气种子（weather feed）的 HTML 输出将显示在这里。这些代码都位于 Weather 类的 onModuleLoad() 方法中，这个方法由 EntryPoint 接口提供。在将包含天气模块的 Web 页面装入客户机的 Web 浏览器时，将调用这个方法。清单 2. Weather Reporter 应用程序的布局代码public void onModuleLoad() HorizontalPanel inputPanel = new HorizontalPanel(); / Align child widgets along middle of panel inputPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE); Label lbl = new Label(5-digit zipcode: ); inputPanel.add(lbl); TextBox txBox = new TextBox(); txBox.setVisibleLength(20); inputPanel.add(txBox); / Create radio button group to select units in C or F Panel radioPanel = new VerticalPanel(); RadioButton ucRadio = new RadioButton(units, Celsius); RadioButton ufRadio = new RadioButton(units, Fahrenheit); / Default to Celsius ucRadio.setChecked(true); radioPanel.add(ucRadio); radioPanel.add(ufRadio); / Add radio buttons panel to inputs inputPanel.add(radioPanel); / Create Submit butto