Test1-shell.cmd用于调试程序，就是该文件使GWT可以轻松的调试AJAX，当程序编写完后，双击该文件，系统就会将java编译成javascript并开启自带的浏览器使程序员可以实时的看到程序运行结果。如图：

Test1-compile.cmd用于部署程序，当程序已调试完毕就可以双击该文件，系统就会生成一个www文件夹，其目录结构如下：

如果你想要在那个网页中添加该程序只要将gwt.js包含到该网页中就行了，当然www文件夹也要放到网页的资源目录中。
打开src文件夹，其文件结构如下图：

可以看到主要有client，public和一个xml文件构成。Test1-compile.cmd和Test1-shell.cmd正是通过这个Xml文件识别主类并将其编译为javascript的。Client文件夹用于存放你所编写的java类，Client用于存放你要发布到网上的网页或者其他文件。让我们来看看Test1.java的源码：

onModuleLoad函数功能相当于main函数，第19至29行很好理解，跟java图形编程没有什么区别，其中的Button和label类分别对应html标签中的<input type=button>和<label>。RootPanel类对应着文档，RootPanel.get(“slot”) 与javascript中的document.getElementById(“slot”)功能相当。Id：Slot在Test1.html中定义如下：

<table align=center>
<tr>
<td id="slot1"></td><td id="slot2"></td>
</tr>
</table>

整段程序的功能就是当用户按下按钮时便在id为slot的标签中显示“Hello World” 。

需要注意的一点是gwt并不是将编译出来的javascript写到Test1.html中，而是生成一个独立的javascript文件gwt.js，Test1.html仅仅是引用了该文件。另外用gwt编写AJAX可以完全将html标签抛弃，因为gwt中提供的ui组建已经完全涵盖了html中所有的标签，google也提倡用纯粹的java来构造html页面。打开ie，输入如下的网址，这是google.提供的一个邮箱范例程序，http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.html，查看一下源代码可以发现如此复杂的页面其标签中仅包含如下两条语句：

<script language='javascript' src='gwt.js'></script>
<iframe id='__gwt_historyFrame' style='width:0;height:0;border:0'></iframe>

所有的页面元素都是有gwt的ui组件创建的。


说明：本文并非对原文的直接翻译，有进行过删节和重组。原文链接：http://code.google.com/webtoolkit/

上一页  [1] [2] [3]