原文出处：
XML.comhttp://www.xml.com/pub/a/2006/07/12/google-web-toolkit-ajax-java-ant-xml.html翻译：刘嘉晗
http://www.blogjava.net/johnlauGoogle Web Toolkit
By Bruce Perry
2006年7月12日
如果你是一名Java软件或Ajax开发者，可能Google Web Toolkit(GWT)已经引起了你的注意。
2006年5月，Google发布了这一免费的工具箱，遵循Apache风格的许可证。GWT被设计用于以Java语言编写Ajax应用。Google已经提供了Windows和Linux下的beta版本，并承诺以后增加Mac OS X版本。
本文描述了在Max OS X上一个简单的Ajax应用的开发，使用GWT和常用的Java工具，如Apache Ant，Tomcat 5.0 Servlet容器，以及IntelliJ IDEA集成开发环境（后者是一款商业IDE）。本文假设读者具有Java和Ant的基本知识。
结合使用Ant与GWT
我下载了GWT Linux beta版本，用Java编写了我的应用程序，然后用一个Ant构建文件编译和在一个Tomcat 5.0实例上部署了此程序。Ant文件执行GWT Java-to-JavaScript编译器。此“编译器”是一个命令行脚本，它执行一个GWT Java类，而后者为应用程序输出JavaScript脚本。
使用GWT beta包括两种开发模式：宿主（host)模式和web模式。
宿主模式是一个开发中的中间步骤，它使用内嵌的GWT浏览器；在这种模式下，已编译代码继续在Java虚拟机(JVM)中运行。然而，宿主模式对于我们这些借用Linux版本的Mac OS X用户还不可用。Mac OS X下的宿主模式要等到Max OS X版本发布了。
一种不同的web开发方式
本文探讨了GWT开发者在为远程过程调用(RPC)创建服务时可能面对的一些典型的web开发相关的任务。RPC是用于使用面向服务架构(SOA)的应用的软件模型的一部分。这些开发任务包括：
- 使用构建文件自动化开发和开发步骤（构建过程运行GWT编译器，然后将编译器的输出和服务器端Java类文件部署到一个servlet容器，如Tomcat，Jetty或Resin）。
- 使用Firefox的DOM Inspector查看GWT应用程序生成的HTML。
- 重新设计页面控件而不需改动底层HTML（因为你在使用GWT的Java API）。
- 确定HTML已合法地标记，例如，基于你的组织所要求的特定格式的XHTML文档。
为您服务
首先，我会简要描述该应用程序创建的服务。它被设计用来展示GWT采用的模式。
该应用程序在浏览器中显示一个表单，要求用户输入名字，年龄，以及国家。当用户通过点击按钮提交表单时，程序在一个文本区内显示一条服务器回应而不需刷新页面。图1是程序在Safari浏览器中的显示。
图1: GWT生成的一个简单视图
例如，当用户在一个文本框为空时点击OK,Submit按钮时，结果如图2所示。
图2: 应用程序以红色显示一条错误信息
巧妙的服务机制
在Ajax应用中使用RPC消除了显式地处理XMLHttpRequest和相关联的服务器返回值的需要，因为GWT对象会为你处理这些通讯工作。
程序定义的每个服务需要两个Java接口和一个Java类。为了编译这些类，需要确定gwt-user.jar库在classpath中（Ant文件中增加一个条目就可以解决）。以下代码示范了定义我们的服务的Java接口。
package com.parkerriver.gwt.testapp.client;
import com.google.gwt.user.client.rpc.RemoteService;
public interface ShowRespService extends RemoteService{
String displayResponse(String req);
}
服务接口必须扩展GWT接口RemoteService。它只定义了一个方法 displayResponse()。
你还需要定义一个接口，客户端或最终被下载的JavaScript代码将会用它调用服务方法。GWT使用了一种回调设计模式，当我给出客户端代码的时候会再来描述它（请看MyForm.java）。
package com.parkerriver.gwt.testapp.client;
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface ShowRespServiceAsync {
public void displayResponse(String s,
AsyncCallback callback);
}
要使一个服务在GWT中可用必须遵守命名约定；在服务接口名(ShowRespService)后增加Async后缀。AsyncCallback对象是GWT API的一部分，它的目的是为客户端处理服务响应。不管怎样，等你看了这段代码应用的地方后会对这一行为有更清晰的了解。这些对象定义都位于用于生成客户端JavaScript的Java代码中。
一个改头换面的servlet
最后，你需要定义一个Java类来实现远程服务接口。这个类将会存在于你的Ajax应用程序的服务器端。
package com.parkerriver.gwt.testapp.server;
import com.parkerriver.gwt.testapp.client.ShowRespService;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import java.util.Date;
public class ShowRespServiceImpl extends RemoteServiceServlet
implements ShowRespService {
public String displayResponse(String req) {
if(req.length() < 1) {
throw new IllegalArgumentException(
"Blank submissions from the client are invalid.");
}
StringBuffer buf = new StringBuffer("Your submission: ");
Date date = new Date();
String serverInfo = this.getServletContext().getServerInfo();
buf.append(req);
buf.append("\n");
buf.append("Server response: ");
buf.append(date.toString());
buf.append("\n");
buf.append(serverInfo);
return buf.toString();
}
}
该类必须扩展RemoteServiceServlet，这是一个GWT API对象，它本身扩展了javax.servlet.http.HttpServlet。也就是说，该类和它实现的接口需要被部署到你的servlet容器。
步骤
现在我们已经定义了服务，让我们退回几分钟来看一看程序的目录结构。Google Web Toolkit包括了一个名为applicationCreator的命令行脚本，它将会为你生成项目目录结构。解压缩GWT下载包后，你可以在顶层目录中找到applicationCreator。我使用下面的命令行来开始：
applicationCreator -out /Users/bruceperry/1gwt/secondapp/ com.parkerriver.gwt.testapp.client.MyForm
图3显示了目录结构
图3: 一个GWT和IntelliJ项目目录
applicationCreator生成./src目录和MyForm-compile以及MyForm-shell脚本。我的Ant文件执行MyForm-compile；另一个脚本运行宿主模式。./src目录包括与最初的包命名相符的嵌套目录结构，如图4所示。
图4:一个GWT应用程序的包和模块
文件MyForm.gwt.xml是生成的配置文件，GWT称之为“模块(module)”。它为你的程序定义了表示“入口点(entry point)”的Java类，类似于包含main()方法的Java类。
<module>
<!--Inherit the core Web Toolkit stuff. -->
<inherits name="com.google.gwt.user.User"/>
<!--Specify the app entry point class. -->
<entry-point class="com.parkerriver.gwt.testapp.client.MyForm"/>
</module>
其它的文件或目录是IntelliJ Web application project的产物，包括./classes,./WEB-INF,和./gwtproj.ipr,所以不需要特别留意它们。
另外，./www目录之前并不会出现（除非你自己创建它），直到运行GWT编译器生成程序代码。我的项目使用Ant文件getproj.xml，而项目属性在gwtproj.properties中定义。在我展示Ant构建文件之前，我们先看一下代表程序入口点的MyForm.java类。
入口点
MyForm.jaca类实现了GWT API接口EntryPoint。所以，该类必须实现onModuleLoad()方法，当浏览器载入你的Ajax程序时，浏览器的JavaScript引擎将会调用它。
换句话说，GWT编译器将这个类编译为JavaScript代码。MyForm.java类为浏览器视图建立表单控件。该类同时决定了用户点击OK,Submit按钮时的响应。代码中的注释详细描述了到底发生了什么，所以我在正文中不再赘述。
package com.parkerriver.gwt.testapp.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.*;
import java.util.Iterator;
public class MyForm implements EntryPoint {
//提供状态信息的HTML div元素的id
private String statusId = "status";
//一个Grid对象;实际上，是一个HTML table
private Grid grid = new Grid(5, 2);
//其它用户界面对象
private Label nmLab = new Label();
private Label ageLab = new Label();
private Label homeLab = new Label();
private TextBox nmTxt = new TextBox();
private TextBox ageTxt = new TextBox();
private TextBox homeTxt = new TextBox();
private Button okBut = new Button();
private TextArea tarea = new TextArea();
/* 当浏览器载入应用程序时本方法被调用。
本方法设置3个标签和文本框，以及一个
按钮和用来显示服务器相应的文本区*/
public void onModuleLoad() {
//设置标签和文本域
nmLab.setText("Full Name:");
nmTxt.setMaxLength(25);
ageLab.setText("Age:");
ageTxt.setVisibleLength(3);
ageTxt.setMaxLength(3);
homeLab.setText("Home country:");
homeTxt.setMaxLength(25);
//将这些控件放入Grid中
grid.setWidget(0,0,nmLab);
grid.setWidget(0,1,nmTxt);
grid.setWidget(1,0,ageLab);
grid.setWidget(1,1,ageTxt);
grid.setWidget(2,0,homeLab);
grid.setWidget(2,1,homeTxt);
//设置按钮和文本区
tarea.setCharacterWidth(40);
tarea.setVisibleLines(25);
okBut.setText("OK, Submit");
//通过增加一个listener对象为按钮设置行为
//详细地讲，一个带有onClick()事件处理器的
//ClickListener对象。
okBut.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
//提示用户远程过程调用的状态；
//见下面的方法
showRpcStatus(true);
//为服务器端服务创建一个客户端存根的实例
ShowRespServiceAsync respService =
(ShowRespServiceAsync) GWT
.create(ShowRespService.class);
ServiceDefTarget endpoint = (ServiceDefTarget) respService;
//我们的服务的实现是一个RemoteServiceServlet的实例，
//所以提供到该servlet的服务器路径
//该路径为web.xml中设置的值
endpoint.setServiceEntryPoint("/parkerriver/s/showresp");
//该接口处理服务器响应。
//它会在一个文本区中显示服务器的响应。
//如果回复消息表示一个错误
//则将用红色字体显示
AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
//如有，则移除与错误消息外观相关的‘warning’CSS样式
//
if(tarea.getStyleName().
equalsIgnoreCase("warning")){
tarea.removeStyleName("warning");
}
//文本区显示服务器的返回值
tarea.setText((String)result);
}
public void onFailure(Throwable caught) {
//文本区显示任何异常消息
tarea.setStyleName("warning");
tarea.setText(
"Server request raised an error; Java exception : "+
caught == null ? "An unknown exception" :
caught.getMessage());
}
};
//调用服务方法。
//首先验证表单值。
try{
respService.displayResponse(
getPanelTextContent(grid,true),
callback);
} catch (Exception e) {
tarea.setStyleName("warning");
tarea.setText("Server request raised an error: "+
e.getMessage());
} finally {
//当我们完成RPC调用时
//移除状态信息
showRpcStatus(false);
}
}
});
//现在将这些控件加到Grid上
grid.setWidget(3,0,okBut);
grid.setWidget(3,1,tarea);
//为OK按钮的单元设定垂直对齐属性
grid.getCellFormatter().setVerticalAlignment(3,0,
HasVerticalAlignment.ALIGN_TOP);
//为文本框设置垂直对齐属性，
//以使它们合适地排列
grid.getCellFormatter().setVerticalAlignment(0,1,
HasVerticalAlignment.ALIGN_BOTTOM);
grid.getCellFormatter().setVerticalAlignment(1,1,
HasVerticalAlignment.ALIGN_BOTTOM);
grid.getCellFormatter().setVerticalAlignment(2,1,
HasVerticalAlignment.ALIGN_BOTTOM);
//将grid，实际上是一个HTML table，加到
//浏览器HTML中id值为"gridholder"的div元素中。
RootPanel.get("gridholder").add(grid);
}
/*简单地测试是否有为空的域，然后以单一字符串返回
提交的值。
HasWidgets是Grid和其它panel类型的对象实现的一个接口。
因此，我们可以将grid传入该方法；遍历它包含的文本框，
并且验证文本框的内容。
*/
private String getPanelTextContent(HasWidgets panelType,
boolean validateContent) {
StringBuffer buf = new StringBuffer("");
String tmp = null;
if(panelType != null) {
//为了简介，省略
}
//返回以空格分隔的文本框的内容
return buf.toString();
}
/* 过于简化的验证! */
private boolean validateText(String _content){
return _content.length() > 0;
}
private int getTextboxCount(HasWidgets pType){
//未显示: 返回panel中TextBox控件的数量
}
/* 如果响应很长时间才到达
则显示给用户一个状态信息。*/
private void showRpcStatus(boolean _on){
//利用GWT DOM API进行JavaScript DOM编程
Element el = DOM.getElementById(statusId);
if(el != null) {
if(_on) {
DOM.setStyleAttribute(el,"font-size","1.2em");
DOM.setStyleAttribute(el,"color","green");
DOM.setInnerHTML(el, "Fetching server info");
} else{
DOM.setInnerHTML(el, "");
}
}
}
} 代码中大多部分处理GWT API。值得一提的是如果你需要实现JavaScript DOM编程，如showRpcStatus()方法中那样，你可以通过使用com.google.gwt.user.client.DOM类实现这个任务。
构建文件
以下是Ant构建文件的重点；它：
- 编译Java文件，结果写入项目目录中的./classes目录。
- 执行GWT编译脚本（本例中名为MyForm-compile）。
- 将./www目录中生成的结果代码移到一个已部署到Tomcat上的更大的web应用。
- 复制编译后的Java servlet和相关接口(ShowRespService)到同一个web应用。
负责编译Java类和执行到JavaScript的转换的两个Ant任务定义为如果产生任何错误，则使整个构建失败。
Ant XML
这里是gwtproj.properties文件包含的部分内容：
web.deploy.location=/users/bruceperry/parkerriver/gwt
web.classes.location=/users/bruceperry/parkerriver/WEB-INF/classes
下面的XML表示了上述Ant文件的主要内容；完整文件的链接在本文的资源一节中。
<?xml version="1.0" encoding="UTF-8"?>
<project name="gwtproj" default="all">
<property file="gwtproj.properties"/>
<!-- The top-level directory for the project and
where the ant file resides -->
<dirname property="module.gwtproj.basedir" file="${ant.file}"/>
<!-- The ./classes directory inside the top-level directory -->
<property name="gwtproj.output.dir" value=
"${module.gwtproj.basedir}/classes"/>
<!-- This target calls MyForm-compile to create
all the content in the ./www directory -->
<target name="gwt-compile" depends=
"compile.production.classes"
description="use gwt's compiler">
<delete>
<fileset dir="${web.deploy.location}" includes="**/*"/>
</delete>
<exec executable=
"${module.gwtproj.basedir}/MyForm-compile"
failonerror="true"/>
<copy todir="${web.deploy.location}">
<fileset dir=
"${module.gwtproj.basedir}/www">
</fileset>
</copy>
</target>
<target name="compile.production.classes" description=
"Compile the gwtproj production classes">
<mkdir dir="${gwtproj.output.dir}"/>
<javac destdir="${gwtproj.output.dir}" debug=
"on" failonerror="true" nowarn=
"off" memoryMaximumSize="128m" fork=
"true" executable="${module.jdk.home.gwtproj}/bin/javac">
<classpath refid="gwtproj.module.classpath"/>
<src refid="gwtproj.module.sourcepath"/>
</javac>
</target>
<!-- copy the Java servlet classes to the web application -->
<target name="deploy.classes" depends="gwt-compile"
description="copy classes to web directory">
<copy todir="${web.classes.location}">
<fileset dir="${gwtproj.output.dir}">
</fileset>
</copy>
</target>
<target name="all" depends="deploy.classes"
description="build all"/>
</project>
你可以在IDE中运行该Ant文件（比如在IntelliJ中）或者在包含构建文件的目录中运行下面的命令行：
ant -buildfile gwtproj.xml
大多数情况下，在更改应用程序并运行Ant后，你可以通过在浏览器中刷新页面看到所作的改变。
最后设置
在最后的设置上，你可能需要了解的是添加gwt-user.jar库到你的web应用的/WEB-INF/lib目录。
我创建了我自己的JAR文件，去掉了其中的javax包，命名为gwt-user-deploy.jar,并添加到/WEB-INF/lib。这是因为Tomcat将不会载入web应用程序中包含servlet API类的库。
web开发者的吹毛求疵
applicationCreator同时创建了你的Ajax应用程序的HTML前端，本例中名为MyForm.html。
如果你的应用程序的HTML需要遵从如XHTML transitional或Strict时怎么办呢？对于XHTML transitional的情况，我首先在MyForm.html顶端增加了所需的DOCTYPE,以及html标签的相关属性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
然后我上传MyForm.html到http://validator.w3.org/的World Wide Web协会的HTML验证器。
运行验证器后，我对HTML做了一些简单的修改，如合适地关闭元标签以及增加type="text/javascript"到script标签。
Strict：啧啧
然而，如果你要遵从XHTML Strict标准，则可能需要做一些更复杂的更改。例如，W3C的验证器将iframe标签标为“undefined element”，iframe是GWT的历史支持所需要的（提供如浏览器的后退按钮同样的功能）。XHTML已经移除了iframe元素。
这对你可能不是一个问题（可能会同其它明显问题一起在GWT的未来版本中解决）；但是，你可以自己实现替代策略，如扩展GWT的类和创建你自己的兼容的控件。
使控件各就各位
视觉外观设计是web开发中总是出现的问题。项目设计者希望页面看起来和他们在Adobe Illustrator中创建的一摸一样，是吗？
尽管在复杂的Ajax项目中你可能无法实现这一使程序养眼的理想，至少你可以使用Firefox的DOM Inspector来检视你的Java类最终生成的HTML。那么从这里开始。
打开Firefox的Tools=>DOM Inspector菜单项（如图5）
图5: 用DOM Inspector查看HTML
可见Java代码中的com.google.gwt.user.client.ui.Grid对象实现为一个HTML table标签。table中包含OK,Submit按钮的TD标签与一个样式属性“verticle-align:top”关联。
这使按钮与文本区顶端对齐。下面是MyForm.java类中设置对齐方式的代码：
//set the vertical alignment for the OK button's cell
grid.getCellFormatter().setVerticalAlignment(3,0,
HasVerticalAlignment.ALIGN_TOP);
如果代码中没有此调用，按钮就会很业余地挂在文本区的中间区域。
现在要做的只是使按钮与它上面的文本标签左对齐。
资源
Google Web Toolkit:
http://code.google.com/webtoolkit/ 本文代码:
gwtarticle_jul06.zip
XML.com Copyright 1998-2006 O'Reilly Media, Inc.