初次接触GWT，知识点概括

前言

本人最近开始研究 GWT(Google Web Toolkit) ，现将个人的一点心得贴出来，希望对刚开始接触 GWT 的程序员们有所帮助，也欢迎讨论，共同进步。

先说说本人的硬件环境，机器是 dell inspiron 1464 ， i5 的处理器， 6G 内存。软件环境， Win7 32 位操作系统， MyEclipse9.0 ， JDK1.7 ， GWT2.3.0 。

所有资料全部来源于网络，主要是 Google 的官方手册。另外有一本中文的 GWT 教程，叫做《 GWT 揭秘》，评价很高，但是我没有找到电子版，书可以从网上买到，但是我不愿意花钱，所以一直没能拜读。

1 、介绍

先来说一下概念性的知识， GWT 的介绍很多，大家可以自己查，我只说注意事项，有说错的地方，还请大家指出。 GWT 是 Google 的东西，出来四五年了，免费，开源（ JAR 包自带源代码，这应该算开源吧）。主要功能是把 java 语言写的程序编译成 Javascript ，以此来解放广大熟悉 Java 编程但是对 Javascript 头疼的程序员。

GWT 编译的 JS 文件跨浏览器（也可以指定）， GWT 以 Module 为单位，每个 Module 都是一个 Java 类，通过 GWT 编译后会生成一组 js\html\gif 文件，使用时只需要在网页上引用一个以 Module 名命名的 js 文件即可。 GWT 的 UI 部分使用的是 EXT2.0 （目前 EXT 的版本是 4.0 ），因为 EXT2.1 （也有说是 2.2 ）后开始收费，想用的话要么交钱，要么要求使用 EXT 的项目开源（无法忍受）！！所以 GWT 只内置了 EXT2.0 ，想用 EXT4.0 怎么办？有个 GXT 的框架，目前的版本是 2.2.4 ，他其实是 EXT 的东西，不是 Google 的， GXT=EXT+ GWT ，内置最新版本的 EXT ，所以开发 GWT 的系统时，顺便把 GXT 的 JAR 也引入，增强页面的友好度。当然了， EXT 都收费了， GXT 当然也收费！

还有一个 GAE(Google App Engine) ，看名字就知道也是 Google 的产品，主要功能是为用户提供一个云端的平台，让用户发布自己的服务。说白了就是免费的个人网站。我试着发布自己的服务，但是网络一直显示连不上，我怀疑是国内的网络运营商搞的鬼！

所有相关并且可能用到的插件地址如下，大家可以边下边继续往下看。

GWT 的 Eclipse 插件 (GPE) 下载地址： http://code.google.com/eclipse/docs/install-from-zip.html

GWT 的 SDK 下载地址： http://code.google.com/webtoolkit/download.html

GXT 的 SDK 下载地址： http://www.sencha.com/products/extgwt/download/

GAE 的下载地址： http://code.google.com/appengine/downloads.html

2 、搭建环境

部署 GWT 环境，网络上有很多的教程，但是大多都是很久以前的，不太适合现在来看。想要最新的详细的资料，最好还是看 Google 官方的英文文档。我用的是 MyEclipse9.0 ，所以要安装 IDE 插件。

Google 的 IDE 插件有两种安装方式，一种是在线下载，另一种是下载离线安装包后再安装。本人强烈推荐后者，因为直接在线下载的话，速度是龟速，毕竟连的是境外服务器，不过在线安装似乎能省去一些配置的工作。

这里介绍一下第一种在线安装的方法。

如上图，进入 MyEclipse Configuration Center 。多句嘴，不知道 MyEclipse 从哪个版本开始 ( 我之前用 6.5) ，所有插件的维护都跑到这里来了，而且还有一些配置也在这里，用起来很方便。提醒一下，离开按钮在右上角，有个颜色很浅的箭头，叫 Return to Workbench ，第一次用的时候害我找了半天。

进入之后，单击 Software ，中央的面板会出现 4 个区域，在左上角的 Browse Software 里会显示当前能够安装的插件，里面已经帮我们列出了 GPE 插件 ( 难道 GPE 在国外有这么出名，让它出现在常用插件里 ) ，右击选择 add to profile ，就会发现 GPE 已经出现在了右上方的 My Software 里，同时在 Software Update Available 里面也会有响应的提示，说有新的插件添加，最后点 Pending Change 里面出现的 Apple 1change 就可以了，剩下的都是傻瓜化操作，这里不再赘述。

现在主要讲一下第二种的离线安装插件的方法。首先要下载安装包 ( 地址在上面 ) ，接近 160MB 的 zip 文件。安装的时候还是要进入 MyEclipse Configuration Center ：

这时候在 Software 的插件搜索框的右边有个 add site 的链接，点进去会出现一个 Add Update Site 的对话框，在这里有两个需要填写的内容，一个是名称，可以随便填，另一个是插件在硬盘上的位置。这个插件的位置其实是有 3 种写法，一种是填写 Eclipse 传统的 link 链接，是个 URL 地址；一种是填写本地的插件目录，点 Add from local Folder ；还有一种就是填写本地插件的 zip 文件的位置。后两种的区别一个是解压的文件夹，一个是没解压的 zip 文件，效果其实一样。

点 OK 之后，我们的 Browse Software 里就会新增一个插件，不过这不算玩，这顶多只表示 Myeclipse 多了一个升级插件的选择，想安装，要像上图那样。上图只显示了一个插件，相同的办法，可以安装其他的插件。之后右侧的 My Software 截图如下，现在可以点执行按钮了。

 

在经过几步确认和一小会的等待后， MyEclipse 要求重启。我的 MyEclipse 不知道是怎么的，点重启就会死机，所以每次都是手工重启 MyEclipse 。重启之后，就会发现在工具条上多了四个按钮：

第一个按钮用来新建 GWT 的工程，他有 3 个下拉选项，我目前只知道最上面的那个是新建本地的工程，剩下的两个功能是 GPE 刚刚加上去 的，还没试验过。第二个按钮用来编译已经存在的 GWT 项目。第三个按钮是 Speed Tracer ，它是 GWT2.0 后新加的，主要是用来做性能分析，虽然没用过，但我个人老感觉跟 Firebug 差不多。最后一个按钮是将 GWT 项目发布到 Google 的云端，就是我上面提到的 GAE 啦！

3 、创建工程

现在开始正式建立一个真正的 GWT 项目。单击 ，弹出下面的对话框：

Package 很重要， GWT 的 Module 就放在这个目录下。选上 ”Use Google Web Toolkit” ，这是引用 GWT 要用到的 JAR 包。去掉 ”Use Google App Engine” ，因为我们还不需要将项目发布到 Google 的云端。 ”Sample Code” 一定选上，这样生成的项目会自动为我们建立好实例代码。生成的项目结构如下：

虽然 GWT 应用在 Web 项目上，但是目前新建的这个工程并不是 web 项目 MyEclipse 只当他是个普通的 java 项目，可以通过右击项目→ MyEclipse → Add Web Project Capabilities… 来追加 Web 工程。不过要注意，这样追加之后，项目的目录和文件会发生变化，所以要小心些。

现在一个可以直接运行的项目就算建好了，很简单吧。下面来试着运行它，看看效果。要运行该实例，根本不需要去部署项目， MyEclipse 自带了 jetty-6 服务器，右击项目→ Run As → Web Application ，这时 jetty 服务就会启动，并加载当前的项目。

如上图所示，这里会提供一个地址，表示服务已经启动，大家是不是已经明白下面要做什么了！先别急，这时去访问的话，浏览器会提示你安装一个叫 Google Web Toolkit Developer Plugin 的浏览器插件，否则不能浏览。要是把地址上的那段诡异的参数去掉，页面会提示 ”GWT module 'mygwttest' may need to be (re)compiled” ，为什么呢？

现在想想，在 Eclipse 里，我们可以很方便的调试 java 代码，而 GWT 的功能是把 java 代码编译成 JS ，那我们是不是也可以像调试 JAVA 代码那样，去调试 GWT 编译的 JS 代码呢？ Google 不会想不到这点，所以给 GWT 提供了两种运行模式。一种是宿主模式 (Hosted Mode) ，现在改名叫做开发模式 (development mode) ；另一种是 WEB 模式，现在叫生产模式 (production mode) 。两种模式的区别网上有一大堆的解释，本质区别就是，开发模式下可以通过 IDE 工具调试，生产模式直接发布到正式服务器，不能调试！

GWT 区分两种模式的方法是通过一个本地的服务完成的，注意到访问地中那段诡异的参数了吗 gwt.codesvr=127.0.0.1:9997 ？没错，这个 9997 端口的服务就是用来调试的。除了服务器端需要开启服务外，浏览器端也需要有所配合，这就是第一次访问时需要安装的 Google Web Toolkit Developer Plugin 。

安装好浏览器插件后，页面终于显示了出来！很简单的页面，在文本框中输入姓名后，点 send ，会显示出当前使用的后台服务器和当前浏览器的信息。注意，如果调试后台的 GWT 代码的话，运行方式选择 Debug As ，不是 Run As ，Run As下只能实现实时编译。

这里要注意一点， GWT 的两种运行模式编译的 JS 文件是不一样的，开发模式的 JS 会包含调试信息 ( 千万不要把开发模式的 JS 发布到正式服务器上 ) ，访问地址没有参数的时候会出现 ”GWT module 'xxx' may need to be (re)compiled” 的提示，并且在服务关闭之后，还会提示链接断开。要想使用生产模式的 JS 文件，要通过 来实现，它会将指定的文件编译成可以发布到正式服务器的 JS 文件。

4 、代码解释

现在来说说这个实例的代码。

● GreetingService.java 和 GreetingServiceAsync.java 要放在一起，这是两个接口，其中 GreetingService 继承了 com.google.gwt.user.client.rpc.RemoteServic 接口。 GreetingServiceAsync 是作为代理出现的，它的名字不能改，只能叫这个名，为什么呢？因为这两个接口是用来实现 RPC 功能的，说白了就相当于是 Struts 的后台 Action 响应，只不过 RPC 传的的对象。现在来说说他们俩的命名规则，假如我们新建了一个叫 XXX 的接口，继承了 com.google.gwt.user.client.rpc.RemoteServic ，有几个方法 fn1(par…) 、 fn2(par…) ……。那么在这个 XXX 接口的同包下，必须有一个叫 XXXAsync 的接口，并且连方法都必须跟 XXX 一样，只不过每个方法要多加一个参数 com.google.gwt.user.client.rpc.AsyncCallback<String> callback ，于是有了 fn1(par…,callback) 、 fn2(par…,callback) … .. 。这所有的规则都是有校验的，不清楚 MyEclipse 的插件是怎么实现的，反正不满足就回报错，还能帮用户修改，很方便。

●光有两个接口而没有实现类是没有用的， GreetingServiceImpl.java 就是一个对 GreetingService 的实现类，注意不是那个代理接口。同时这个类还继承了 com.google.gwt.user.server.rpc.RemoteServiceServlet ，要是不继承他， GreetingService 也就没什么特别的了。这个类里面所有实现的方法，相当于是 Struts 的后台业务逻辑。

●以上的几个文件配额起来能够实现类似于 AJAX 的功能，而 MyGWTtest.java 则实现前台的业务逻辑，将来它会编译成 JS 文件，该文件还是一个入口文件，在页面上引用的 JS 文件就是它编译的，这有点类似 java 中的 main 方法。这里有个注意事项，因为要编译成 JS ，所以 import 的类只能有以下 3 种情况： java.lang 包和 java.util 包下的类； GWT 的类；符合上面 2 点而且也会编译成 JS 的类。

● FieldVerifier.java 里的代码是在没什么好说的，只有一个简单的不能再简单的方法。但是要注意，这个类也会编译成 JS 代码。

● MyGWTtest.gwt.xml 是个重头戏，它是 GWT 的配置文件，功能类似 Hibernate 的 *.hbm.xml 。这个文件所在的包加上这个文件的文件名 ( 不包括 gwt.xml) 就是 GWT 的一个 Module 名。哪个类是入口类，那个类会被编译，都在这里定义。同时文件中还会有多个继承， inherits 元素指定；有且只有一个入口， entry-point 元素指定；多个资源， source 元素指定。

●空着的 com.jsltool.client 包是 JUtil 测试用的，可以不用理睬。

● MyGWTtest.html 是用来测试用的页面， MyGWTtest.css 是它的样式。

●在运行过一次这个实例之后，会发现项目的 war 包下面会多一个 mygwttest 的文件夹，文件夹的名字也就是 Module 名。这个文件夹里的文件就是 GWT 编译好的 JS 文件。使用的时候，在页面上将该文件夹下 的 Module 名 .nocache.js 引入就可以了。

对每个文件的详细说明，我已经以注释的形式写入了代码里，大家可以将项目下下来在自己的机器上部署。把 GWT 发布到正式的服务器上，注意不要忘记把编译之后的 JS 文件夹拷过去， GWT 不会像 DWR 那样产生一个虚拟的 JS 文件。

评论

11 楼 jsltool 2012-02-19  

Kivewen 写道

问题是如果我在Grails项目中怎么集成GWT进去？

呵呵，这个还真不清楚，现在我还在使用基本的SSH框架做开发呢。

10 楼 Kivewen 2012-02-16  

问题是如果我在Grails项目中怎么集成GWT进去？

9 楼 ayaga 2011-12-20  

编译速度怎样？

8 楼 zhangyou1010 2011-11-18  

博主你好，我有< GWT 揭秘>的电子版，如果需要的话，可以联系我。

7 楼 liuweihong47java 2011-10-22  

good收藏起来了

6 楼 jsltool 2011-10-13  

longthen 写道

6G内存装32位系统不是浪费么

同时开两个MyEclipse，3个主流程的浏览器，Oracle服务……这样就不觉得浪费了。主要还是因为工作上需要的几个程序不支持64位

5 楼 饭特稀 2011-10-11  

GAE 年初的时候貌似很正常，不过后来就挂了

4 楼 longthen 2011-09-21  

6G内存装32位系统不是浪费么

3 楼 jiangzezhou1989 2011-09-12  

b3log团队在gae上有个博客项目你可以关注下。项目主页：http://www.b3log.org/

2 楼 jsltool 2011-06-30  

yx200404 写道

gxt收费吗?
GAE 看运气..运气好碰到墙有洞 就访问到了.

GXT是收费的……GAE我目前还没有成功连接过……

1 楼 yx200404 2011-06-16  

gxt收费吗?
GAE 看运气..运气好碰到墙有洞 就访问到了.