美味书签
投票评分
发表评论
复制链接
本文由chelson发表在Ajax论坛,原贴:
http://www.matrix.org.cn/thread.shtml？topicId=47378&forumId=41
http://www.matrix.org.cn/thread.shtml？topicId=47380&forumId=41
之一:
用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 Filesgwt-windows-1.0.21注册到环境变量中。
好，接下来就要开始构建第一个GWT程序了，Google Web Toolkit SDK package中已包含了一个projectcreator和applicationcreator，通过这两个工具就可以构建可在eclipse下编译的项目和程序。，现在我要在D:学习gwtproject下创建一个名为test的项目。先在D:学习gwtproject下创建文件夹test，然后打开cmd将目录切换到D:学习gwtprojecttest下。输入如下命令：projectcreator -eclipse test，（注意不要将项目创建到eclipse的工作空间中，否则会报错）。接着再来创建一个程序，输入如下命令：applicationcreator –eclipse test com.chelson.client.Test1。Test1是程序的主类，相当于普通java程序中具有main函数的类。创建过程截图如下：
接下来要将创建的项目导入到eclipse中。打开eclipse，然后点击工具栏中的 文件－导入，选择“从现有项目到工作空间中”如下图所示：
点“下一步”，再点击“浏览”。跳出如下窗口：
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）
选择刚才创建的D:学习gwtprojecttest目录，单击确定返回到如下窗口：
单击完成，所有预备工作完毕，在eclipse的包资源管理器下可以看到test项目的目录结构如下：
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"/tdtd 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/
