随笔-5  评论-5  文章-0  trackbacks-0
原文出处:XML.comhttp://www.xml.com/pub/a/2006/07/12/google-web-toolkit-ajax-java-ant-xml.html
翻译:刘嘉晗 http://www.blogjava.net/johnlau

Google 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(52);
    
//其它用户界面对象
    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构建文件的重点;它:
  1. 编译Java文件,结果写入项目目录中的./classes目录。
  2. 执行GWT编译脚本(本例中名为MyForm-compile)。
  3. 将./www目录中生成的结果代码移到一个已部署到Tomcat上的更大的web应用。
  4. 复制编译后的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.

posted on 2006-07-18 16:45 努力!奋斗! 阅读(2267) 评论(3)  编辑  收藏 所属分类: 翻译文章

评论:
# re: Google Web Toolkit(翻译) 2006-07-18 17:04 | 吴某人-不断地学习
good!

  回复  更多评论
  
# re: Google Web Toolkit(翻译) 2006-07-19 15:11 | Cody Stone
good!
另外,请教一个问题,怎样在文章中发布
<?xml version="1.0" encoding="UTF-8"?>
这样的语句,我写的这样的语句引号全被替换成中文引号了  回复  更多评论
  
# re: Google Web Toolkit(翻译) 2006-07-19 15:40 | 努力!奋斗!
@Cody Stone
如果直接编写HTML应使用转义符,另外引号不需要转义的,如果出现问题请检查编辑器设置  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: