GWT开发：模块构建、部署与异步编程详解

### GWT开发：模块构建、部署与异步编程详解 #### 1. GWT模块的构建与使用 GWT模块不一定是完整的应用程序，它可以作为可重用的库供其他应用程序使用。GWT模块结构为打包和共享模块提供了必要的工具。实际上，GWT本身就被划分为多个模块，如用户界面、XML、JSON、HTTP和RPC模块等。 ##### 1.1 使用模块 GWT模块以jar文件的形式分发。要在应用程序中包含这些模块，需要将其添加到项目的类路径中，并在应用程序的模块文件中继承其项目名称。例如，使用GWT的`createProject`脚本生成项目时，GWT会自动将`gwt-user.jar`添加到项目的类路径中。`createApplication`脚本会为应用程序生成一个模块XML文件，并自动添加`com.google.gwt.user.User`模块。示例XML如下： ```xml <module> <inherits name='com.google.gwt.user.User'/> <entry-point class='com.gwtapps.desktop.client.Desktop'/> </module> ``` 该模块文件告诉GWT编译器如何将应用程序编译为JavaScript。`inherits`元素告知编译器使用指定模块中的类，这些类也需要被编译为JavaScript。对于其他jar文件中的新模块，需要先将jar文件添加到类路径中。在Eclipse中，可以通过项目的`Properties`对话框，选择`Java Build Path`的`Libraries`选项卡来完成此操作。 例如，为了在Gadget Desktop应用程序中使用Gears模块，需要先将`gwt-google-apis.jar`添加到类路径中，然后在应用程序的模块XML文件中继承Gears模块： ```xml <module> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.json.JSON'/> <inherits name='com.google.gwt.xml.XML'/> <inherits name='com.google.gwt.gears.Gears'/> <entry-point class='com.gwtapps.desktop.client.Desktop'/> </module> ``` 如果遗漏了在应用程序的模块文件中添加`inherits`标签这一步，GWT编译器会报错，提示找不到使用的模块。 ##### 1.2 创建可重用模块 如果已经构建了一个GWT应用程序，那么实际上已经构建了一个可重用模块。区别在于应用程序指定了入口点，可以在GWT托管模式浏览器或Web浏览器中单独加载。可以从另一个应用程序引用该应用程序的模块文件，以重用其组件。 创建模块的方式与创建应用程序相同，使用GWT的`applicationCreator`脚本。可以使用`ant`标志来构建一个Ant文件，该文件会自动将模块打包成jar文件以便分发。 GWT的模块结构是基于继承的层次结构。例如，如果编写一个继承GWT的User模块的模块，那么使用该模块的任何模块或应用程序也会自动继承GWT的User模块。这一特性允许模块的用户自动获取运行所需的所有依赖项。此外，GWT还允许向模块中注入资源，以确保CSS或其他JavaScript库被自动包含。 例如，创建一个需要包含默认CSS的小部件模块，可以在模块XML中引用CSS文件： ```xml <module> <inherits name='com.google.gwt.user.User'/> <stylesheet src="widgets.css"/> </module> ``` `widgets.css`文件需要包含在模块的公共文件中，当其他模块继承该模块时，会自动获取该CSS文件。同样，可以使用`script`标签在模块中包含JavaScript文件： ```xml <module> <inherits name='com.google.gwt.user.User'/> <!-- Include google maps --> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACeDba0As0X6mwbIbUYWv-RTb-vLQlFZmc2N8bgWI8YDPp5FEVBQUnvmfInJbOoyS2v-qkssc36Z5MA"></script> </module> ``` #### 2. 应用程序的部署 ##### 2.1 部署基础 从GWT 1.4开始，可以使用图像包将资源包含在可重用模块中。图像包允许将多个图像打包成一个单一图像进行部署。如果在模块中使用了图像包，使用该模块的应用程序会自动生成该单一图像。 有时候，需要共享已编译的JavaScript应用程序，供其他网站使用。从GWT 1.4开始，其他网站可以使用生成的跨域版本的JavaScript轻松加载应用程序。跨域版本的JavaScript文件名会在包名后追加`-xs`，编译应用程序后可以在`www`目录中找到。例如，要包含第1章开发的Hangman应用程序，可以使用以下脚本标签： ```html <script language='javascript' src='http://gwtapps.com/hangman/com.gwtapps.tutorial.Hangman-xs.nocache.js'></script> ``` 每个共享的应用程序可能在集成到其他网站时还有额外的要求。例如，Hangman应用程序会查找ID为`hangman`的HTML元素，因此在其他网站上包含该应用程序时，需要在希望显示应用程序的位置添加以下HTML代码： ```html <div id="hangman"></div> ``` ##### 2.2 部署到Web服务器 部署GWT应用程序可以像部署普通网页一样简单。一个简单的GWT客户端由HTML和JavaScript文件组成，可以将这些文件复制到Web服务器的目录中，并在浏览器中加载。例如，第6章的Gadget Desktop应用程序不使用任何服务器端代码，其部署文件仅包括JavaScript文件、几个图像文件和宿主HTML文件。只需复制这些文件，就可以将该应用程序安装到任何Web服务器上。 要部署应用程序，只需运行GWT编译脚本，或在GWT托管模式浏览器中点击`Compile`按钮，即可生成部署所需的文件。GWT会将这些文件放在项目的`www`目录下以应用程序命名的目录中。 ##### 2.3 部署Servlet到Servlet容器 如果使用GWT-RPC，需要将服务实现部署到Servlet容器中。虽然GWT托管模式浏览器运行的是嵌入式Tomcat，但部署到常规Tomcat实例有所不同。如果要部署到Tomcat，需要将应用程序添加到其`webapps`目录中。部署步骤如下： 1. 定位Tomcat的安装目录。 2. 在`webapps`目录下创建应用程序目录。 3. 在应用程序的`WEB-INF`目录中设置`web.xml`文件。以Instant Messenger应用程序为例，`web.xml`文件如下： ```xml <?xml version="1.0" encoding="UTF-8"?> <web-app> <servlet> <servlet-name>messenger</servlet-name> <servlet-class>com.gwtapps.messenger.server.MessengerServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>messenger</servlet-name> <url-pattern>/messenger</url-pattern> </servlet-mapping> </web-app> ``` 4. 将Servlet类复制到`WEB-INF`目录下的类目录中。 5. 将`gwt-servlet.jar`文件复制到`WEB-INF`目录下的`lib`目录中。`gwt-servlet.jar`包含支持服务器端RPC所需的GWT类，虽然也可以使用`gwt-user.jar`，但`gwt-servlet.jar`更小，因此更推荐使用。可以使用Ant等构建工具来自动化部署过程。 ##### 2.4 使用Ant自动化部署 部署到服务器容器通常涉及编译代码、复制文件和创建目录等多个步骤，使用Ant可以自动化这些繁琐的任务。Ant是一个命令行工具，接受XML构建文件。构建文件包含一系列构建目标和完成构建任务的步骤，支持多种类型的步骤，如复制文件、创建目录和编译代码等，并且具有可扩展性。 以下是一个使用Ant构建GWT应用程序的示例`build.xml`文件： ```xml <project default="deploy"> <property name="gwtpath" value="/Users/ryan/lib/gwt-mac-1.4.10"/> <property name="gwtapipath" value="/Users/ryan/lib/gwt-google-apis-1.0.0"/> <property name="targetdir" value="${basedir}/www/${app}"/> <property name="wwwdir" value="${basedir}/www"/> <property name="srcdir" value="${basedir}/src"/> <property name="bindir" value="${basedir}/bin"/> <path id="classpath"> ```