Google Web Toolkit-用Java编写AJAX

2016-02-19 15:03 9 1 收藏

下面图老师小编要向大家介绍下Google Web Toolkit-用Java编写AJAX,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

摘要:用AJAX编写更具交互性的B/S程序是当今世界一大潮流,然而AJAX的缺点也显而易见,缺乏一个强有力的IDE使得编写,测试AJAX程序异常困难。GWT(Google Web Toolkit)的出现让你轻松的跨过这些屏障自在的构建你自己的AJAX程序。 工具箱本站收藏
美味书签
投票评分
发表评论
复制链接
本文由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函数的类。创建过程截图如下:

image

接下来要将创建的项目导入到eclipse中。打开eclipse,然后点击工具栏中的 文件-导入,选择“从现有项目到工作空间中”如下图所示:

image



点“下一步”,再点击“浏览”。跳出如下窗口:

image

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

 

 



选择刚才创建的D:学习gwtprojecttest目录,单击确定返回到如下窗口:


image



单击完成,所有预备工作完毕,在eclipse的包资源管理器下可以看到test项目的目录结构如下:

image

们来看看Test1.java的源码:

image

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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/

来源:http://www.tulaoshi.com/n/20160219/1608712.html

延伸阅读
标签: Web开发
修复了一些细节代码(支持持续按键事件) *项目名称:AJAX实现类Google Suggest效果 *作者:草履虫(也就是蓝色的ecma) *联系:caolvchong@gmail.com *时间:2007-7-7 *工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库) *测试平台:Firefox2.0,IE6.0,IE7.0 *演示地址:http://finish.3322.org/sugge...
标签: Web开发
目前,在提供商业应用方面,IT行业对Web系统的依赖程度越来越高。Web浏览器虽然一直是向远程用户提供软件的一种理想的廉价方式,但它们并不能像桌面应用那样提供丰富的客户端功能。而通过AJAX(异步JavaScript及XML)则可以实现丰富的客户端交互能力和实时数据微量更新(micro-update),并且不需要使用任何一种私有的专用插件。 AJAX是一种使...
Google发布中文名谷歌,我们来用Java绘制google中文名称“谷歌”,java与google,鱼与熊掌我兼得了。 *_* package ccidnet; import java.io.*; import java.awt.*; import java.awt.image.*; import com.sun.image.codec.jpeg.*; class google { public static void main(String[] args) { Buffere...
标签: Web开发
在过去,由于为了获得新数据而不得不重新加载web页面(或者加载其他页面)导致web应用程序发展被限制。虽然有其他方法可用(不加载其他页面),但是这些技术都没有被很好地支持而且有bug成灾的趋向。在过去的几个月里,一个过去并不被广泛支持的技术已经被越来越多的web冲浪者(web surfers??是指浏览器还是浏览者?)所接受,它给了开发者更...
标签: Web开发
我所举的这个例子是一个企业用户注册时的一个应用,当用户注册时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息,用户输入用户名或企业名称的时候,当输入文本框失去焦点的时候,则会...

经验教程

738

收藏

8
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部