opment Shell(见图2)和GWT内置的GWT应用浏览器(见图3)，GWT应用浏览器中将显示"Hello World!"例子的初始界面，如果我们点击界面上的"Click Me"按钮，按钮后面将会显示"Hello World!"字符串(见图4)，如果再次单击页面上的"Click Me"按钮，按钮后面的"Hello World!"字符串会消失。
4、 编译"Hello World!"例子
要将GWT应用编译成Ajax应用，我们可以执行HelloWorld-compile.cmd。
C:\HelloWorld>HelloWorld-compile.cmd
命令运行时，界面上将会显示下面的内容。
Output will be written into C:\HelloWorld\www\org.vivianj.gwt.HelloWorld
Copying all files found on public path
Compilation succeeded
其中的第一行显示生成的Ajax应用位于C:\HelloWorld\www\org.vivianj.gwt.HelloWorld目录下。
从上面的图中我们可以看到，新生成的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!"字符串会消失。
实例详细分析
上面的步骤中，我们已经完成第一个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。
24. <meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>
在HelloWorld.html文件的第24行，我们使用meta标签指定了本页面和GWT模块" org.vivianj.gwt.HelloWorld"之间的联系，meta标签的name属性是不变的，而content属性则是GWT主类全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."后的结果。
40. <script language="javascript" src="gwt.js"></script>
在HelloWorld.html文件的第40行，我们使用script标记引入GWT工具提供的默认函数库。根据HTML语言的规定，我们可以选择在之间加入这行代码，也可以选择在之间加入这段代码。GWT建议在之间加入这行代码，以便获得稍微快一些的起动速度。
56. <td id="slot1"></td><td id="slot2"></td>
在HelloWorld.html文件的第56行，我们使用td标签定义了两个相邻的表格单元格，他们分别命名为"slot1"和"slot2"，根据"HelloWorld!"例子的要求，名为"slot1"的单元格中应该显示按钮，而名为"slot2"的单元格中则根据情况决定显示"HelloWorld!"字符串或者不显示任何内容。
我们将在主类HelloWorld.java的源代码中使用RootPanel.get("slot1")来获得对该单元格的引用，请参考下面的"主类HelloWorld"部分的说明。
43. <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
在HelloWorld.html的第43行，我们使用iframe标签来设置当前页支持历史功能，iframe的属性必须和上面的内容保持一致，否则将不会起到任何效果。
清单1 src\org\vivianj\gwt\public\public\HelloWorld.html
1. <html>
2. <head>
3.
4. <!-- -->
5. <!-- Any title is fine -->
6. <!-- -->
7. <title>Wrapper HTML for HelloWorld</title>
9. <!-- -->
10. <!-- Use normal html, such as style -->
11. <!-- -->
12. <style>
13. body,td,a,div,.p{font-family:arial,sans-serif}
14. div,td{color:#000000}
15. a:link,.w,.w a:link{color:#0000cc}
16. a:visited{color:#551a8b}
17. a:active{color:#ff0000}
18. </style>
20. <!-- -->
21. <!-- The module reference below is the link -->
22. <!-- between html and your Web Toolkit module -->
23. <!-- -->
24. <meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>
25.
26. </head>
28. <!-- -->
29. <!-- The body can have arbitrary html, or -->
30. <!-- you can leave the body empty if you want -->
31. <!-- to create a completely dynamic ui -->
32. <!-- -->
33. <body>
34.
35. <!-- -->
36. <!-- This script is required bootstrap stuff. -->
37. <!-- You can put it in the HEAD, but startup -->
38. <!-- is slightly faster if you include it here. -->
39. <!-- -->
40. <script language="javascript" src="gwt.js"></script>
41.
42. <!-- OPTIONAL: include this if you want history support -->
43. <iframe id="__gwt_historyFrame"
style="width:0;height:0;border:0"></iframe>
44.
45. <h1>HelloWorld</h1>
46.
47. <p>
48. This is an example of a host page for the HelloWorld application.
49. You can attach a Web Toolkit module to any HTML page you like,
50. making it easy to add bits of AJAX functionality to existing
pages
51. without starting from scratch.
52. </p>
53.
54. <table align=center>
55.
