摘要:
用AJAX编写更具交互性的B/S程序是当今世界一大潮流，然而AJAX的缺点也显而易见，缺乏一个强有力的IDE使得编写，测试AJAX程序异常困难。GWT（Google Web Toolkit）的出现让你轻松的跨过这些屏障自在的构建你自己的AJAX程序。
之一:
用AJAX编写更具交互性的B/S程序是当今世界一大潮流，然而AJAX的缺点也显而易见，缺乏一个强有力的IDE使得编写，测试AJAX程序异常困难。GWT（Google Web Toolkit）的出现让你轻松的跨过这些屏障自在的构建你自己的AJAX程序。闲话少说，让我们来领略一下GWT的魅力吧。先来看看google提供给我们的范例程序有多优美：网址为http://code.google.com/webtoolkit/documentation/examples/desktopclone/demo.html这是google提供给我们的一个邮箱程序范例，126邮局最近新出的D计划就与该范例及其相似，你只需点击右上边栏的某封邮件右下边栏马上就能显示内容。
开始之前先做些准备工作。你得先保证已经安装了GDK以及eclipse，然后到以下网址下载Google Web Toolkit SDK package： http://code.google.com/webtoolkit/。..........等待中。OK，下载完毕了，然后解压到某个目录下，我解压到了D:\Program Files\下;原压缩包包含了gwt-windows-1.0.21文件夹，因而此时应将D:\Program Files\gwt-windows-1.0.21注册到环境变量中。
好，接下来就要开始构建第一个GWT程序了，Google Web Toolkit SDK package中已包含了一个projectcreator和applicationcreator，通过这两个工具就可以构建可在eclipse下编译的项目和程序。，现在我要在D:\学习\gwt\project下创建一个名为test的项目。先在D:\学习\gwt\project下创建文件夹test，然后打开cmd将目录切换到D:\学习\gwt\project\test下。输入如下命令：projectcreator -eclipse test，（注意不要将项目创建到eclipse的工作空间中，否则会报错）。接着再来创建一个程序，输入如下命令：applicationcreator –eclipse test com.chelson.client.Test1。Test1是程序的主类，相当于普通java程序中具有main函数的类。创建过程截图如下：
接下来要将创建的项目导入到eclipse中。打开eclipse，然后点击工具栏中的 文件－>导入，选择“从现有项目到工作空间中”如下图所示：
点“下一步”，再点击“浏览”。跳出如下窗口：
选择刚才创建的D:\学习\gwt\project\test目录，单击确定返回到如下窗口：
单击完成，所有预备工作完毕，在eclipse的包资源管理器下可以看到test项目的目录结构如下：
双击其中的Test1-shell.cmd可以看到系统跳出一下窗口：
这是系统默认为你创建的第一个程序GWT程序所对应的html页面。里面仅包含一个GWT按钮组件。
明天我将详细介绍按照上述方式创建项目的原因以及项目的基本构成。
之二:
让我们来回顾一下gwt项目及程序的构建过程。首先应新建一个项目，项目构建的格式如下ProjectCreator [-ant projectName] [-eclipse projectName] [-out dir] [-overwrite][-ignore]，参数都是可选非必须的。如果要创建可被eclipse导入的项目就必须在projectcreator后面添加－eclipse，如果添加最后两个参数的话会覆盖目标目录底下的同名项目。由于ProjectCreator创建项目时不像eclipse会创建一个与项目同名的文件夹用于存放项目底下的所有文件所以在创建项目之前必须先创建项目文件夹test。然后我们在cmd下直接进入项目文件夹：cd D:\学习\gwt\project\test，所以无需输入文件输出路径outdir。命令如下：projectcreator -eclipse test。便会自动在项目文件夹底下生成所需的文件。
然后开始创建程序，创建程序的格式如下ApplicationCreator [-eclipse projectName] [-out dir] [-overwrite] [-ignore] className，我想应该不用解释了吧。我们要给项目test创建程序所以projectName应该填test，className是该程序的入口类，创建该类需要注意的一点是包路径必须是com.*.client.className。其中的*表示可以设置任意的路径如com.chelson.client.className或者com.swinu.client.className或者com.chelson.swinu.client.className，但是com和client两个路径不能省，这是GWT强制规定的，目的是为了使项目结构更为明晰。当用eclipse编译完该类后系统将把该类解析成一个javascript文件，文件名是gwt.js。在我的范例中命令如下：applicationcreator –eclipse test com.chelson.client.Test1。
接下来来看看项目的结构：
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/
