《GWT揭秘》连载2/3

来源：互联网发布：什么时候递归算法编辑：程序博客网时间：2024/04/28 23:15

《GWT揭秘》

GWT揭秘（国内首部基于GWT 2.0的经典著作，4大专业社区一致鼎力推荐！)

书名：GWT揭秘
作者：徐彬
ISBN：9787111294016
丛书名：揭秘系列丛书
出版社：机械工业出版社
出版日期：2010 年1月
开本：16
页码：320
版次：1-1
定价：49元
豆瓣网讨论地址：http://www.douban.com/subject/4223579/
China-pub预订地址：http://www.china-pub.com/196306

国内第一本基于GWT 2.0的经典著作，4大专业社区联袂推荐，权威性毋庸置疑！

本书内容全面，不仅详细介绍了GWT的主要模块和控件、GWT与JavaScript对象的交互、在GWT中使用XML、开发自定义GWT控件、GWT-RPC和Ext GWT等必备的基础知识，而且还深入讲解了GWT与Flex整合、图片缓存、本地化、GWT动画、历史管理、延时/等待/分片执行等高级知识；本书注重实战，所有知识点都配有精心设计的范例，尤为值得一提的是，还以迭代的方式重现了经典的俄罗斯方块游戏和一个完整的报销审批系统的开发全过程，既可以以它们为范例进行实战演练，又可以将它们直接应用到实际开发中去。

第2章 Hello GWT

本章内容
* 在Eclipse中创建项目
* 运行调试项目
* JUnit测试
* 发布网站
* ANT发布

软件开发类图书通常会从Hello World开始，本书也不免俗。Hello World程序简单易懂，消除读者对技术的恐惧，而且能引领读者快速上手。那么，请卷起你的袖子，让我们立刻开始创建一个Hello GWT应用吧。Hello GWT的功能很简单，通过程序在一个空白页上动态添加一个按钮，单击按钮后弹出“Hello GWT!”对话框。

2.1 在Eclipse中创建项目
说明 GWT项目可以通过命令行和Eclipse插件两种方式创建。创建GWT项目的命令是webAppCreator。出于实用性考虑，本书不使用命令行相关工具，只在说明部分给出操作所对应的命令。具体使用方法及参数，可以查看GWT的说明文档。

Eclipse插件安装完成后，Eclipse工具条中会增加一个Google toolbar。如图2-1所示，三个按钮分别是“New Web Application Project”（新建Web应用项目）、“GWT Compile Project”（GWT编译项目）、“Deploy App Engine Project”（部署AppEngine项目），其中Deploy App Engine Project是Google AppEngine的工具。

图2-1 Eclipse中的Google toolbar

单击“New Web Application Project”按钮打开“New Web Application Project”对话框。输入项目名称HelloGWT，包名chapter2。这里不涉及Google AppEngine，所以取消“Use Google App Engine”前的勾选，其他保持默认值，如图2-2所示。

单击“Finish”按钮创建项目。GWT新项目向导创建的默认项目对于Hello GWT这样的示例来说有点复杂。删除文件GreetingService.java、GreetingServiceAsync.java和chapter2.server包以简化项目，如图2-3所示。



               图2-2 创建GWT项目对话框                       图2-3 简化后的GWT项目

删除不需要的文件后，web.xml也要做相应的修改，删除web.xml中的servlet和servlet-mapping元素，修改后的内容如代码清单2-1所示。

代码清单2-1 修改后的web.xml文件

1    <?xml version="1.0" encoding="utf-8"?>2    <!DOCTYPE web-app3        PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"4        "http://java.sun.com/dtd/web-app_2_3.dtd">5    <web-app>6      <welcome-file-list>7        <welcome-file>HelloGWT.html</welcome-file>8      </welcome-file-list>9    </web-app>

打开HelloGWT.html删除所有内容。先写一个标准的空白HTML，然后嵌入hellogwt/hellogwt.
nocache.js脚本，修改后的代码如代码清单2-2所示。

代码清单2-2 HelloGWT.html源代码

1    <html>2      <head>3        <meta http-equiv="content-type" content="text/html; charset=utf-8">4    <title>HelloGWT</title>5        <script type="text/javascript" src="hellogwt/hellogwt.nocache.js"></script>6      </head>7      <body>8      </body>9    </html>

接着打开HelloGWT.java，删除所有内容后输入代码清单2-3中的代码。

代码清单2-3 HelloGWT.java源代码

1    package chapter2.client;2    3    import com.google.gwt.core.client.EntryPoint;4    import com.google.gwt.event.dom.client.ClickEvent;5    import com.google.gwt.event.dom.client.ClickHandler;6    import com.google.gwt.user.client.Window;7    import com.google.gwt.user.client.ui.Button;8    import com.google.gwt.user.client.ui.RootPanel;910    public class HelloGWT implements EntryPoint {11     public void onModuleLoad() {12      Button welcomeButton = new Button("欢迎");13      welcomeButton.addClickHandler(new ClickHandler() {14       @Override15       public void onClick(ClickEvent event) {16        Window.alert("Hello GWT!");17       }18      });19      RootPanel.get().add(welcomeButton);20     }21    }

上面代码在第12行创建了一个标题为“欢迎”的按钮。第13～18行为按钮添加了Click事件的处理程序。当用户单击按钮后，会触发第16行代码，调用Window.alert函数在屏幕上弹出“Hello GWT!”对话框。第19行代码会将新创建的按钮添加到页面中。
Hello GWT就这样完成了，运行一下，看看效果如何。

2.2 运行调试项目
选中HelloGWT项目文件夹，单击运行按钮，如图2-4所示。
单击运行按钮（Run As...）后，打开“Run As”对话框。双击“Web Application”项运行项目，如图2-5所示。

图2-4 选中HelloGWT项目图2-5 “Run As”对话框

警告 GWT在项目运行时需要启动jetty web服务器。如果jetty的端口被占用，那么GWT项目将无法运行。如果程序无法正常运行，并且Eclipse控制台中错误信息为“Port 8080 is already is use; you probably still have another session active”，表示8080端口已被其他程序占用。单击运行按钮边上的向下箭头，选择“Run Configurations...”菜单项，打开“Run Configurations”对话框。选择“Web Application”下面的“HelloGWT.html”后，在右边面板“Embedded Server”下，把“Port”设置为一个未用的端口号。

项目运行后界面出现乱码，如图2-6所示。

右键单击HelloGWT项目文件夹选择“Properties”菜单项。打开“Properties for HelloGWT”对话框，在“Resource”配置项下将“Text file encoding”改为“Other:utf-8”，如图2-7所示。单击“OK”按钮关闭设置项目属性窗口。

图2-6 界面出现乱码图2-7 修改项目文件编码格式

技巧 GWT编译器使用utf-8编码格式读取源代码文件，将项目转变为utf-8编码格式可以避免乱码问题。

提示修改项目文件编码格式后，项目文件中已存汉字全部变成乱码，需要手工修复。打开HelloGWT.java文件，修复第12行的乱码。

修改后直接单击图2-6运行界面的“Refresh”按钮或按F5刷新界面，中文乱码问题即可解决。单击“欢迎”按钮，弹出“Hello GWT!”消息框，如图2-8所示。

图2-8 Hello GWT界面

技巧 GWT项目修改源代码后不需要重新运行项目，直接刷新页面就能看到效果。

你可能想知道启动的是什么浏览器，这是GWT托管运行环境（GWT Hosted Web Browser）。GWT程序有两种运行模式：普通模式和托管模式（Hosted）。很容易区分这两种运行模式，从Eclipse中启动的程序，运行于托管模式下；在浏览器中运行的程序以普通模式运行。GWT只能在托管模式下进行调试。

提示 GWT程序在托管模式下的运行速度明显慢于普通模式下的运行速度，因为GWT程序在受控环境下并不会真正生成JavaScript，而是模拟运行，以便于调试器介入。
接着试验如何在GWT中进行调试。GWT调试和普通Java程序调试完全一样。我们打开HelloGWT.java文件，在第16行设置断点（Ctrl+Shift+B），然后单击运行按钮左边的调试按钮。

注意先关闭刚才打开的Google Web Toolkit Hosted Mode窗口，否则GWT的Web服务器端口会发生冲突，无法启动程序。

Hello GWT程序启动后，单击“欢迎”按钮，调试断点被触发。接着可以进行单步调试、查看变量等常规调试操作，如图2-9所示。

图2-9 调试断点被触发

在GWT 2.0中调试的方式有所不同。首先术语上发生了变化，在1.x版本中的“托管模式（hosted mode）”被改为“开发模式（development mode）”，由于“托管模式”的意义让人感到含糊不清，所以GWT开发组选择了有更清晰含义的“开发模式”替代“托管模式”。与此对应，“网页模式（web mode）”也被改为“生产模式（production mode）”。

在GWT 1.x版本中，开发者在一个被称为“托管浏览器”中进行代码调试，参见图2-8。在大多数情况下，托管浏览器工作的很不错。不过还是存在着一些问题，例如你用Window.open弹出一个新的浏览器窗口，“托管浏览器”就无法很好地为你处理打开的式样参数。

另外一个重要的限制就是托管环境只支持某种浏览器，在Windows平台下，托管环境只支持IE浏览器；在Linux平台下，只支持Firefox浏览器；在Mac平台下，只支持Safari浏览器。也就是说如果在Windows环境中编写GWT程序，但是你会发现用户在Firefox浏览器中运行有问题，旧版本的GWT就无法针对这种情况进行调试。

旧版本的GWT的托管运行环境有比较严重的内存泄漏，调试环境运行一段时间后开发团队就不得不重启托管调试环境，这给开发工作带来了诸多不便。

GWT 2.0完全摒弃了托管浏览器的调试模式，而转由使用浏览器插件进行调试。下面我们来介绍一下这种新的调试模式。

在GWT 2.0的环境中直接单击调试按钮，与1.x版本的调试不同，GWT并没有弹出任何对话框。而是在控制台输出了一些信息，如图2-10所示。
这段文字的意思是GWT开发环境所用的Web服务已经启动，可以通过访问下面的地址进行调试。
http://localhost:8888/DemoGWT2.html?gwt.codesvr=192.168.1.130:3388

图2-10 控制台输出

我们将这个地址复制到GWT调试器支持的浏览器中，目前支持的浏览器有IE、Firefox、Chrome和Safari。

注意 Chrome只支持4.0以后的版本。

以IE8为例，用IE8打开该地址后，可以看到一条提示信息，如图2-11所示。

图2-11 提示安装开发插件

这段文字的意思是GWT开发插件尚未安装，开发模式运行需要安装GWT开发插件。单击那个大的蓝色按钮就可以下载IE版本开发插件，也可以通过单击下面的超链接选择其他平台和浏览器的开发插件。

点击按钮下载插件，如果是Windows XP或Vista操作系统，可以直接单击“运行”按钮进行安装。如果是Windows 7，则需要下载到本地，然后以管理员模式进行安装，如图2-12所示。

图2-12 以管理员身份运行安装

开发插件安装完成后再次刷新页面就可以看到运行的结果。在运行代码的第一行添加一个断点，再次刷新页面，可以看到Eclipse命中了我们设置的断点。

2.3 JUnit测试
敏捷开发用测试驱动开发（TDD）进行自动化回归测试和连续集成来保证项目质量。JUnit是Java社区著名的开源自动化测试软件。GWT可以用JUnit进行自动化测试。
说明命令行下使用junitCreator为项目增加JUnit支持。

先把JUnit库添加到HelloGWT项目中。右键单击HelloGWT项目文件夹，选择“Properties”菜单项，打开“Properties for HelloGWT”对话框。单击“Java Build Path”配置项，选择“Libraries”面板，如图2-13所示。

图2-13 Java Build Path配置

单击“Add Library...”按钮，打开“Add Library”对话框，双击“JUnit”后，选择“JUnit library version”为“JUnit 4”。单击“Finish”关闭“Add Library”对话框。添加JUnit库完成后，单击“OK”按钮关闭“Properties for HelloGWT”对话框。

在项目中添加名为test的源码文件夹，然后在这个文件夹下添加一个名称为chapter2.client. HelloGWTTestCase.java的文件，修改后的项目结构如图2-14所示。

图2-14 增加JUnit支持后的项目结构

注意 test文件夹中测试代码的包路径是chapter2.client，必须和被测试代码的包路径相同。
给HelloGWT.java添加一个可测试的方法：

1     int add(int a, int b) {2      return a + b;3     }

打开HelloGWTTestCase.java输入代码清单2-4中的内容，如下所示。

代码清单2-4 HelloGWTTestCase.java源代码

1    package chapter2.client;23    import com.google.gwt.junit.client.GWTTestCase;45    public class HelloGWTTestCase extends GWTTestCase {67     private HelloGWT helloGWT;8     9     @Override10     public String getModuleName() {11      return "chapter2.HelloGWT";12     }13 14     @Override15     protected void gwtSetUp() throws Exception {16      helloGWT = new HelloGWT();17     }18 19     public void testAdd() {20      assertEquals(5, helloGWT.add(2, 3));21     }22 23     public void testAddFail() {24      assertEquals(6, helloGWT.add(2, 3));25     }26    }

GWTTestCase派生于JUnit的TestCase。GWT使用适配器模式，从而可以使用JUnit套件对GWT的测试单元进行测试。HelloGWTTestCase派生于GWTTestCase，测试逻辑封装于其中。GWTTestCase的派生类需要实现抽象函数getModuleName，getModuleName返回被测试的GWT模块名。

剩下的工作与编写标准的JUnit测试用例代码一样。这个示例中定义了两种测试方法：testAdd和testAddFail，测试结果是一个成功，另外一个失败。右键单击“HelloGWTTestCase.java”，选择“Run As”→“GWT JUnit Test”菜单项执行GWT JUnit测试。测试结果和预期一致，如图2-15所示。

图2-15 JUnit测试结果

2.4 发布网站
在Eclipse中发布网站有以下两种方式：

* 单击Eclipse运行按钮，在受控运行环境的工具条上单击“Compile/Browse”按钮，如图2-8所示。等待片刻后GWT项目编译完成，IE窗口被自动打开，程序在IE浏览器中以普通模式运行。
* 单击Google toolbar中的“GWT Compile Project”按钮，打开“GWT Compile”对话框，全部采用默认设置，单击“Compile”按钮编译项目。
编译结果会输出到war输出目录文件夹中，将war改名后部署到j2ee服务器中，就能直接使用。我们将war目录改名为hellogwt，复制到jetty的webapps目录中，启动jetty服务器。用浏览器访问，如图2-16所示。

图2-16 部署在jetty服务器上

2.5 ANT发布
2.4节提到的发布网站是指在集成开发环境中发布。大型项目需要用ANT自动构建，GWT项目使用ANT进行构建分两个步骤：第一步，用javac编译项目中的服务器端代码，将编译结果复制到WEB-INF/classes目录中；第二步，用GWT编译器将GWT模块编译成JavaScript。

GWT用com.google.gwt.dev.Compiler进行编译，Compiler类存放在gwt-dev-windows.jar中。下面给出一个编译GWT项目的ANT模版文件，如代码清单2-5所示。

代码清单2-5 编译GWT项目所使用的ANT模板文件

1    <?xml version="1.0" encoding="utf-8" ?>2    <project name="Hellogwt" default="gwtc" basedir=".">3     <property file="build.properties" />4      5     <target name="gwtc">6      <java failonerror="true" fork="true" classname="com.google.gwt.dev.Compiler">7       <classpath>8        <pathelement location="src"/>9        <pathelement location="${gwt.sdk}/gwt-user.jar"/>10        <fileset dir="${gwt.sdk}" includes="gwt-dev*.jar"/>11       </classpath>12       <jvmarg value="-Xmx256M"/>13       <arg value="${gwt.module.name}"/>14      </java>15     </target>    </project>

这个ANT构建配置文件，需要两个变量参数：gwt.sdk变量值为GWT SDK的安装路径，gwt.module.name变量为被编译的GWT模块名称。

说明 GWT SDK既可以从http://code.google.com/intl/zh-CN/webtoolkit/download.html下载，也可以从Eclipse的plugins目录里面复制出来。

GWT需要有完整的源代码才能编译项目。引用第三方GWT库，或者自己编写的GWT扩展库时，一定要把含源代码加入到classpath中。ANT配置文件的第8行，将项目的src路径也加入到classpath中。如果忘记把源代码加入到classpath中，编译程序报告错误：“Unable to find 'chapter2/HelloGWT.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source? ”
有了这个ANT模板，就可以把它合并到项目完整的ANT配置中，或者用AntCall调用。

2.6 小结
很多人都觉得开发GWT应用很复杂，但是自从官方的Eclipse插件发布后，这一情况已明显改观。在本章中，通过简单的鼠标点击，就能创建出一个基本的GWT应用。在下面的章节中，将带领读者进一步了解GWT内部机制。