| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7616555
建立时间:2006年5月29日 |
| |
|
 [Java Open Source]Google Web Toolkit(翻译) 
软件技术
lhwork 发表于 2006/7/19 10:01:28 |
| Google Web ToolkitBy Bruce Perry2006年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浏览器中的显示。500)this.width=500'>图1: GWT生成的一个简单视图例如，当用户在一个文本框为空时点击OK,Submit按钮时，结果如图2所示。500)this.width=500'>图2: 应用程序以红色显示一条错误信息巧妙的服务机制在Ajax应用中使用RPC消除了显式地处理XMLHttpRequest和相关联的服务器返回值的需要，因为GWT对象会为你处理这些通讯工作。程序定义的每个服务需要两个Java接口和一个Java类。为了编译这些类，需要确定gwt-user.jar库在classpath中（Ant文件中增加一个条目就可以解决）。以下代码示范了定义我们的服务的Java接口。Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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）。Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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应用程序的服务器端。Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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。我使用下面的命令行来开始：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->applicationCreator -out /Users/bruceperry/1gwt/secondapp/ com.parkerriver.gwt.testapp.client.MyForm图3显示了目录结构500)this.width=500'>图3: 一个GWT和IntelliJ项目目录applicationCreator生成./src目录和MyForm-compile以及MyForm-shell脚本。我的Ant文件执行MyForm-compile；另一个脚本运行宿主模式。./src目录包括与最初的包命名相符的嵌套目录结构，如图4所示。500)this.width=500'>图4:一个GWT应用程序的包和模块文件MyForm.gwt.xml是生成的配置文件，GWT称之为“模块(module)”。它为你的程序定义了表示“入口点(entry point)”的Java类，类似于包含main()方法的Java类。Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><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按钮时的响应。代码中的注释详细描述了到底发生了什么，所以我在正文中不再赘述。Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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) { //为了简介，省略500)this.width=500'> } //返回以空格分隔的文本框的内容 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 info500)this.width=500'>"); } 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文件包含的部分内容：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->web.deploy.location=/users/bruceperry/parkerriver/gwtweb.classes.location=/users/bruceperry/parkerriver/WEB-INF/classes下面的XML表示了上述Ant文件的主要内容；完整文件的链接在本文的资源一节中。Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><?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中）或者在包含构建文件的目录中运行下面的命令行：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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标签的相关属性：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!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）500)this.width=500'>图5: 用DOM Inspector查看HTML可见Java代码中的com.google.gwt.user.client.ui.Grid对象实现为一个HTML table标签。table中包含OK,Submit按钮的TD标签与一个样式属性“verticle-align:top”关联。这使按钮与文本区顶端对齐。下面是MyForm.java类中设置对齐方式的代码：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->//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.zipXML.com Copyright 1998-2006 O'Reilly Media, Inc. |
|
|