简析Google Web Toolkit(GWT)(4)

图5 "Hello World!"例子编译后的目录结构

从上面的图中我们可以看到，新生成的www目录下有一个名为org.vivianj.gwt.HelloWorld的目录，它的命名规则是GWT主类全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."。

org.vivianj.gwt.HelloWorld目录下的HelloWorld.html文件就是"Hello World!"例子对应的页面，以.cache.html后缀结尾的文件就是"Hello World!"例子中对应的Ajax代码部分，而gwt.js文件则是GWT提供的、Ajax代码中需要用到的javascript公共函数。其他还有些辅助文件。

5、 Web模式下测试"Hello World!"例子

运行HelloWorld-compile.cmd后，GWT应用就已经被编译成Ajax应用了，不再依赖于JDK和GWT环境，而仅仅依赖于浏览器。

我们打开IE浏览器，打开C:\HelloWorld\www\org.vivianj.gwt.HelloWorld\HelloWorld.html文件，就可以看到"Hello World!"例子在Web模式下的运行效果(见图6)，单击页面上的"Click Me"按钮，按钮后面会出现"Hello World!"字符串(见图7)，如果再次单击页面上的"Click Me"按钮，按钮后面的"Hello World!"字符串会消失。

图6 Web模式下运行"HelloWorld!"例子的默认效果

图7 Web模式下运行"HelloWorld!"例子-单击"Click Me"按钮后的效果

实例详细分析

上面的步骤中，我们已经完成第一个GWT应用的编译和测试，下面我们来详细的介绍一下GWT应用开发过程中涉及的几个文件:显示页面HelloWorld.html、主类HelloWorld和配置文件HelloWorld.gwt.xml。

1. 显示页面HelloWorld.html

GWT应用中的HTML内容必须存放在public目录下，public目录的全路径是"org\vivianj\gwt\ublic"，是将主类HelloWorld的包名"org.vivianj.gwt.client"中的client替换为"public"后形成的目录结构。

我们将主要介绍HelloWorld.html中和GWT相关的内容，HelloWorld.html文件的全部内容见清单1。

在HelloWorld.html文件的第24行，我们使用meta标签指定了本页面和GWT模块" org.vivianj.gwt.HelloWorld"之间的联系，meta标签的name属性是不变的，而content属性则是GWT主类全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."后的结果。

在HelloWorld.html文件的第40行，我们使用script标记引入GWT工具提供的默认函数库。根据HTML语言的规定，我们可以选择在之间加入这行代码，也可以选择在之间加入这段代码。GWT建议在之间加入这行代码，以便获得稍微快一些的起动速度。

在HelloWorld.html文件的第56行，我们使用td标签定义了两个相邻的表格单元格，他们分别命名为"slot1"和"slot2"，根据"HelloWorld!"例子的要求，名为"slot1"的单元格中应该显示按钮，而名为"slot2"的单元格中则根据情况决定显示"HelloWorld!"字符串或者不显示任何内容。

我