基于GWT轻松掌握AJAX开发(1)

一、引言

开发AJAX应用程序的确存在很大的难度，因为极少有开发者能够完全精通JavaScript―可谓之为AJAX(异步JavaScript＋XML)的语言。使事情更糟糕的是，每一种浏览器在JavaScript实现方面都存在自己的特殊性，这显然给开发者带来极大的麻烦。如今，大名鼎鼎的Google（曾以其著名的Gmail和Google Maps使AJAX风行Web开发界）又推出了Google Web Toolkit(GWT)开发框架，从而给AJAX开发者带来了巨大的福音。

【注意】为全面理解本文内容，你需要准备如下工具：

Google Web Toolkit

Apache Ant 1.6

Apache Tomcat

Java 1.4标准版或更高版本

Eclipse

二、Google用Web Toolkit进一步推动了AJAX开发

Google在它的Gmail和Google Maps应用程序中广泛使用了AJAX技术。你完全能够确信，Google的开发人员绝对不会对使用JavaScript感到陌生，但是这根本没有阻碍搜索巨擘继续进行技术的探索。如今，Google运用了一种自从出现计算机以来相当流行的技术―编译器。编译器支持开发者以更容易理解的高级语言进行开发/编码，因为编译器能够把它们转换成一种计算机能够理解的低级语言。

Google的一个开发小组创建了一种Java-to-JavaScript编译器，这种编译器能够把Java代码转换成JavaScript，从而支持Google开发者以Java语言设计、开发、调试和测试，而把琐碎的JavaScript处理交给了编译器来完成。遵循Google提出的“Do No Evil”的箴言，该开发小组决定与开发社区共享他们的技术成果―Google Web Toolkit(GWT)。

除了一个编译器之外，GWT发行中还带有下列新型的加快AJAX开发的API和工具：

创建应用程序初始化文件的脚本；

你可以使用Java进行开发的用户接口控件和布局管理器；然后，这些内容经由GWT被编译成JavaScript；

支持在JavaScript客户端和服务器端进行RPC通信的Java组件；

特定的响应于浏览器端历史堆栈的历史事件和函数；

一个支持在Eclipse IDE中进行调试的GWT宿主环境；

一个GWT编译器，它负责把用户接口和RPC Java代码转换成与浏览器（包括IE，Firefox，Mozilla，Safari和Opera）兼容的JavaScript。

本文提供了一个示例程序来全面展示上面所及的各种特征。在本例程中，你将会看到如何与Apache Ant和Tomcat一起共同使用GWT。

三、“AJAX With Ease”示例

首先，你需要下载Google Web Toolkit。在本文中，我使用的是gwt-windows-1.0.21.zip（下载时间是2006年7月10日）。解压这个文件将把所有的GWT文件创建到gwt-windows-1.0.21文件夹下。

现在，请下载并解压本文源码文件。该文件中包含源代码，工程及应用程序创建脚本，以及称为“AJAX With Ease”的示例程序的Apache Ant构建文件。

【注】为了简化问题，这个示例应用程序提供了相应于每一种主要的GWT特征的自包含示例。

你可以用以下步骤把应用程序导入到Eclipse中：打开菜单“File”－>“Import”－>“Existing Projects Into Workspace”－>选择“ajaxwithease”文件夹－>选择“ajaxwithease”工程->点击“Finish”。一旦导入完成，你将看到如图1所示的文件夹和文件出现在Eclipse中。

 图1.示例应用程序导入到Eclipse中的文件及文件夹布局情况

现在，请以调试方式运行应用程序，这将启动GWT宿主浏览器，如图2所示。注意，你的整个Web应用程序都可用于这个宿主浏览器中―这个浏览器经由JVM钩子技术集成到Eclipse中。现在，你可以把断点插入到Eclipse中在宿主浏览器中运行并调试应用程序。

图2.在调试方式下激活的GWT宿主浏览器

该示例应用程序的使用是非常简单的。其中，“Styles”选项卡展示如何在运行时刻把一种风格应用于一个按钮来改变其外观；“RPC”选项卡用于展示在文本框内输入的标题和名称是如何接收和通过一个简单的“hello”语句进行响应的；而“History”选项卡展示当用户在一个文本框内输入任何值并按下“Add to History”按钮时如何把符号添加到一个URL中的―而且这些信息仅当用户点击浏览器的“Forward”和“back”按钮时才被检索。

当前，GWT并没有为基于Apache Ant和Tomcat的发布提供足够的支持。GWT的projectCreator.cmd脚本创建的Ant文件内容并不多。包含在示例应用程序中的构建文件包括了为实现Java-to-JavaScript编译、Java编译和WAR文件创建所需要的所有其它任务。

【注意】在此，你很可能需要修改build.properties文件以适合你自己的机器的实际需要。例如，你可以修改gwt.sdk.location以指向你的GWT根安装文件夹，而修改tomcat.webapps以指向build.properties文件中的Tomcat的webapps文件夹，具体请参考如下命令：

# gwt install folder
gwt.sdk.location=c:/java/gwt/gwt-windows-1.0.21
# tomcat webapps directory
tomcat.webapps=c:/java/tomcat/Tomcat 5.5/webapps

就这些内容！为了发布示例应用程序，你可以把ajaxwithease-0.1.war文件从下载的代码下复制到Tomcat的webapps文件夹下，或执行build.xml中的发布任务。整个任务发布过程是：经过init，prepare，gwt-compile，java-compile，javadoc以及dist任务等若干环节，最终通过把ajaxwithease-0.1.war文件复制到Tomcat和webapps文件夹完成发布。现在，打开你的浏览器并导航到http://localhost:8080/ajaxwithease-0.1/Hello来访问该应用程序（假定Tomcat在监听你的机器的8080端口)。

四、GWT组件剖析

现在，让我们“从幕后”来详细剖析GWT组件。

(一)HTML宿主页面―Hello.html

在GWT AJAX中，所有客户端的应用程序逻辑都是由单个称为宿主页面的HTML页面生成的。位于public文件夹下的Hello.html文件就是这样的一个宿主页面，它包含拥有用户交互逻辑并创建用户接口的JavaScript脚本。Hello.html经由“ ”标签调用这个JavaScript，而通过“ ”标签把它链接到GWT模块。

(二)模块―Hello.gwt.xml

一个模块（在Hello.gwt.xml文件中定义）相应于GWT应用程序中的一个逻辑单元。该Hello.gwt.xml文件位于com.techyatra.awe中，它描述了一个com.techyatra.awe.Hello GWT模块。包含Hello.gwt.xml的文件夹被认为是示例应用程序的根文件夹。GWT要求把Java源码和模块的HTML文件放于com.techyatra.awe根文件夹的client和public文件夹下。

示例应用程序中的Hello.gwt.xml文件包含了应用程序要继承的基模块(com.google.gwt.user.User)、Servlet路径以及RPC通信的实现类，而且还实现了一个类似于Java的“public static main(String[] args)”的函数―入口点的接口的启动类。下面的列表展示了Hello.gwt.xml模块文件：

(三)入口点

就象Java应用程序通过一个“public static main(String[] args)”函数请求一个类一样，GWT也要求使用一个实现了com.google.gwt.core.client.EntryPoint接口的类。这是一个只包含一个函数―public void onModuleLoad()的简单接口。

在本示例应用程序中，com.techyatra.awe.client.Hello类实现了EntryPoint接口。下面的列表展示了在一个Hello.java文件中的实现情况：

package com.techyatra.awe.client;
...
/**
*入口点类定义onModuleLoad()
*/
public class Hello implements EntryPoint{
private HelloRPC helloRPC = new HelloRPC();
private HelloCSS helloCSS = new HelloCSS();
private HelloHistory helloHistory = new HelloHistory();
... 
/**
*此处是入口点方法
*/
public void onModuleLoad(){
button.addClickListener(new ClickListener() 
{
...
});
tabs.add(helloCSS， "Styles");
...
RootPanel.get("slot1").add(label);
RootPanel.get("slot2").add(button);
RootPanel.get("slot3").add(tabs);
}
}

对于GWT，onModuleLoad()不仅用作应用程序的一个入口点，而且还作为一个事实上的构造器。它是在编译的JavaScript代码中执行的第一个函数。典型情况下，你应该把创建用户接口组件（GWT Widget，Panel以及Composite）的代码放到onModuleLoad()函数内。一旦创建结束，这些组件即被经由RootPanel添加到HTML页面。