用GWT简化AJAX开发(1)
Google Web工具包(GWT)是一种Java开发框架，它力求简化AJAX应用程序的开发。GWT让开发人员可以使用常用的Java开发工具，开发及调试用Java开发的AJAX应用程序，并且把同一应用程序作为客户端HTML和JavaScript以及服务器端Java来部署。
Google Web工具包是一种应用开发平台，它包括Java类库、名为窗口组件(widget)的AJAX风格的用户界面组件、基于RPC的请求/响应通信框架以及集成调试环境。GWT提供了java.lang和java.util程序包的子集，还提供了方便基于组件的GUI开发的Java API。开发后的程序经编译成HTML和JavaScript，可部署到浏览器上。
GWT应用程序有两种执行模式。一是宿主模式，这种模式把GWT应用程序作为普通的Java应用程序来执行，允许进行标准的Java调试。为了支持宿主模式，GWT提供了专有的Web浏览器，可与Java虚拟机(JVM)进行交互。还有一种是Web模式，这种模式让GWT应用程序可以作为原生JavaScript和HTML来部署及执行，由GWT Java到JavaScript编译器利用Java源代码生成。
GWT有四大组件/库，分别如下。 GWT Java到JavaScript编译器：该组件可把Java源代码转换成原生JavaScript和HTML;GWT宿主Web浏览器： 该组件让GWT应用程序可以作为Java代码在支持JVM的Web浏览器里面执行;JRE仿真库:该库提供了java.lang和java.util程序包的子集;GWT Web UI类库：该库是一组专有的接口和类，名为窗口组件，可用于构建基于浏览器的GUI组件。
GWT应用程序需要提供一个“入口点”类以及独立的配置数据单元，它们捆绑起来即可形成一个应用“模块”。每个模块包括:根据模式module-name.gwt.xml命名的一个配置文件以及实现com.google.gwt.core.client.EntryPoint接口的一个类――该接口充当了应用程序的主入口点。GWT的JavaScript运行库依赖这种基于模块的结构。以下代码显示了一个典型的模块配置文件。
| < module> < !-- Inherit the core Web Toolkit stuff. --> < inherits name='com.google.gwt.user.User'/> < !-- Specify the app entry point class. --> < entry-point class='com.example.client.MyApp'/> < /module> |
模块的入口点类必须实现com.google.gwt.core.client.EntryPoint接口，并且提供no-arg构造函数。模块装入后，为其入口点类创建实例，GWT框架调用其onModuleLoad()方法。
GWT入门
为了开始使用GWT，先要从Google(http://code.google.com/webtoolkit/download.html)下载及提取针对你所用特定操作系统的GWT SDK。GWT的库包括类和接口，即窗口组件，可用来为AJAX应用程序构建用户界面组件。窗口组件的布局由名为窗格的容器窗口组件来管理，容器窗口组件可以嵌套在其他窗格组件里面。
下列代码显示了如何为一个按钮窗口组件创建实例，并且嵌入在名为MyContanerPanel的容器窗格里面：
| Finalcom.google.gwt.user.client.ui.Buttonbutton=newcom.google.gwt.user.client.ui.Button("Clickme"); button.addClickListener(newcom.google.gwt.user.client.ui.ClickListener() { publicvoidonClick(com.google.gwt.user.client.ui.Widgetsender) {System.out.println("The'Clickme'buttonwasclicked");}} com.google.gwt.user.client.ui.RootPanel.get("MyContainerPanel").add(button); |
GWT应用程序的GUI由类似前一个例子的Java代码组成，代码可以用标准的Java调试工具在宿主模式下进行调试。宿主模式下执行的应用程序在由com.google.gwt.dev.GWTShell类所体现的一个专有外壳里面运行。这个类可以独立执行，也可以在IDE里面执行。在宿主模式下运行时，GWT在专有浏览器的窗口里面执行Java字节码。
一旦应用程序准备好了，GWT编译器就可以用来把Java源代码转换成JavaScript，因而可以把Java应用程序转换成类似的JavaScript应用程序。com.google.gwt.dev.GWTCompiler类用于从命令行把GWT应用程序编译成JavaScript。
就GWT而言，通常在Web浏览器里面进行的所有活动都被称为客户端处理。如果客户端代码准备在Web浏览器里面运行，那么它最终会成为JavaScript。因而，只使用那些由上述GWT编译器来转换的库和Java语言构件很重要。
同样，通常在服务器主机上进行的所有活动都被称为服务器端处理。应用程序与服务器进行交互时，它会使用GWT的远程过程调用(RPC)框架，通过浏览器(客户端)对服务器端代码提出请求。
构建GWT应用程序
GWT随带一个命令行实用程序applicationCreator，它可以自动生成运行最基本的GWT应用程序所需的所有文件。这些文件构成一个项目的基本框架，可以在此基础上构建应用程序。本文演示的这个应用程序可从远程站点检索图书，并将结果显示在Web浏览器中基于AJAX的GUI。为了给这个名为BookSearch的应用程序构建一个框架，用下列命令启动applicationCreator实用程序：
| applicationCreator-out./BookSearchcom.example.client.BookSearch |
一定要用安装的GWT的目录名取代。applicationCreator实用程序可在BookSearch目录下生成众多文件，包括类com/example/client/BookSearch.java中的一些基本的客户端功能。该实用程序还能生成名为BookSearch-shell的宿机模式启动脚本和名为BookSearch-compile的编译脚本。要在宿主模式下运行BookSearch框架应用程序，应执行BookSearch-shell脚本。
创建主页
最终的BookSearch应用程序使用有两个td元素的一个表。一个含有处理搜索词语的窗口组件，另一个含有显示图书相关数据列表的窗口组件。该表添加到com/example/public目录中的BookSearch.html，如下所示：
现在，UI布局可进行初始化，以便可以添加UI窗口组件。以下代码显示了对BookSearch应用程序的UI布局进行初始化所需的代码：
| publicvoidonModuleLoad() { privatestaticfinalintVISIBLE_ROWS=5; publicvoidonModuleLoad() { RootPanelbooklistPanel=RootPanel.get("booklist"); if(booklistPanel!=null) {BookListWidgetbooklistWidget=newBookListWidget(VISIBLE_ROWS); booklistPanel.add(booklistWidget); RootPanelsearchtermPanel=RootPanel.get("searchterm"); if(searchtermPanel!=null) { SearchTermWidgetsearchTermWidget=newSearchTermWidget(booklistWidget); searchtermPanel.add(searchTermWidget); }}}} |
所有初始化代码都在BookSearch类的onModuleLoad()方法里面。onModuleLoad()方法是由com.google.gwt.core.client.EntryPoint接口定义的惟一一个方法。模块装入后，该方法被调用。请注意com.google.gwt.user.client.ui.RootPanel类是如何用来通过ID来检索BookSearch.html元素引用的。GWT依靠命名约定来查找映射到HTML元素ID的窗口组件类。
创建客户端行为
我们这个应用程序的客户端行为封装在三个主要的UI窗口组件实例里面：负责搜索词语处理的窗口组件实例、拥有搜索服务提供程序和分页列表的容器窗口组件实例、将集成一组窗口组件实例形成导航条和图书分页列表的分页列表窗口组件实例。以下代码显示了处理图书列表检索、含有分页列表的窗口组件：
| publicclassBookListWidgetextendscom.google.gwt.user.client.ui.Composite { privatefinalPageableListWidgetpageableListWidget; privateStringsearchTerm=""; publicBookListWidget(intvisibleRows) { String[]columns=newString[]{"Title","ISBN","Edition","MSRP"}; String[]styles=newString[]{"title","isbn","edition","msrp"}; pageableListWidget=newPageableListWidget(bookSearchProvider,columns,styles,visibleRows); initWidget(pageableListWidget); } protectedvoidonLoad() {pageableListWidget.refresh();} protectedvoidsetSearchTerm(StringsearchTerm) { if(this.searchTerm.equals(searchTerm)) {return;} this.searchTerm=searchTerm; pageableListWidget.refresh(); }} |
BookListWidget类扩展了com.google.gwt.user.client.ui.Composite类，可为集成了一个或若干个相关窗口组件的组合UI组件提供方便。这里只用了一个组合式的嵌套窗口组件： PageableListWidget。PageableListWidget类也扩展了com.google.gwt.user.client.ui.Composite类，并含有多个子窗口组件，包括一个定制的导航条窗口组件和一个处理图书相关数据列表的com.google.gwt.user.client.ui.Grid窗口组件。导航条窗口组件包括com.google.gwt.user.client.ui.DockPanel窗口组件的实例以及com.google.gwt.user.client.ui.Button类的几个实例
SearchTermWidget扩展了com.google.gwt.user.client.ui.Composite类，总共含有一个标签、一个文本框和一个按钮。文本框含有搜索词语，按钮启动每次搜索。
