GWT笔记(Google Web Toolkit)1

  1. 云栖社区>
  2. 博客>
  3. 正文

GWT笔记(Google Web Toolkit)1

chszs 2007-07-22 00:32:00 浏览362
展开阅读全文
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/1701710

GWT笔记(Google Web Toolkit)1


一、GWT介绍
1)GWT目的:通过提供相似的Java开发环境,并隐藏各浏览器不兼容的部分,使AJAX开发变得更容易。
2)GWT统一了客户端和服务器端的代码,形成了用一种语言来编写:Java。
这有许多优势:
(1)熟悉Java的开发者比熟悉JavaScript或Flash的开发者多。
(2)Java的开发工具非常多,如Eclipse、NetBeans和IDEA。
3)GWT允许以类似于创建Swing应用程序的方式创建Web应用,它可以创建可视化组件、设置事件驱动,调试等等。
4)在客户端和服务器端统一了语言后,方便共享代码。
5)GWT还可以提取浏览器的DOM,隐藏浏览器之间的不同,扩展了面向对象的UI模式。它使代码更轻便,并支持所有浏览器。
GWT工具箱提供了一个XML解析器、几个和服务器通信的工具、国际化工具、配置工具,以及浏览器历史管理系统。
二、GWT支持平台及安装
GWT的开发受到Windows、Linux以及MacOSX等操作系统的支持。
GWT应用程序还可以部署成Web服务到任意操作系统,并在新版浏览器(如IE6、IE7、Firefox、Opera等等)中浏览。
GWT需要JDK1.4.2及以上版本的支持。另外,还需要一个IDE,如Eclipse3.2。最后,需要下载Google Web Toolkit SDK(1.2.22及以上版本,现在是1.4)。
三、搭建脚手架(scaffolding)
在命令行提示符中,运行下列命令:
1) c:/>mkdir c:/gwt-projects/MyProject
2) c:/>cd c:/gwt-projects/MyProject
3) c:/gwt-projects/MyProject>projectCreator -eclipse MyProject
Created directory c:/gwt-projects/MyProject/src
Created directory c:/gwt-projects/MyProject/test
Created file c:/gwt-projects/MyProject/.project
Created file c:/gwt-projects/MyProject/.classpath
4) c:/gwt-projects/MyProject>applicationCreator -eclipse MyProject com.xyz.client.MyApp
Created directory c:/gwt-projects/MyProject/src/com/xyz
Created directory c:/gwt-projects/MyProject/src/com/xyz/client
Created directory c:/gwt-projects/MyProject/src/com/xyz/public
Created file c:/gwt-projects/MyProject/src/com/xyz/MyApp.gwt.xml
Created file c:/gwt-projects/MyProject/src/com/xyz/public/MyApp.html
Created file c:/gwt-projects/MyProject/src/com/xyz/client/MyApp.java
Created file c:/gwt-projects/MyProject/MyApp.launch
Created file c:/gwt-projects/MyProject/MyApp-shell.cmd
Created file c:/gwt-projects/MyProject/MyApp-compile.cmd
------------------------------
projectCreator和applicationCreator命令是shell脚本,由GWT提供,因此需要指定环境变量PATH,增加GWT目录到PATH中去。
projectCreator建立了一个普通的GWT项目的框架,而applicationCreator则添加了一个GWT应用。
四、运行和调试
在Eclipse外部运行应用程序:使用脚手架(scaffolding)提供的shell脚本命令。
c:/gwt-projects/MyProject>MyApp-shell
如果工作正常的话,将出现两个窗口:
(1)GWT开发shell窗口
(2)Web浏览器窗口
在Eclipse IDE下运行GWT项目,可以先导入项目,如(File-->Import-->Existing Project into Workspace)。
然后选择Run-->Debug...,再在Java Application下点击the launch configuration titled MyApp,然后点击Debug,也会出现上述的两个窗口。
进入调试模式也很简单,可以在MyApp.java内任意设置断点,在调试模式下进行单步跟踪,如检查变量的值等等。
它使你能够采用Java来开发Ajax应用。
五、主机(Hosted)模式 VS Web模式
在先前,你可以使用主机模式调用GWT应用程序。主机模式仅用于开发阶段。而在进入产品阶段,你的应用程序将运行在Web模式下。
在使用GWT开发时,你需要理解两者的不同。
注意:主机模式目前只在Windows和Linux下有效。
1)主机模式(Hosted Mode)
主机模式是一种独特的混合开发环境,它让你的代码作为真正的Java代码来运行,而且还嵌入在浏览器中。
在主机模式下执行是由Google Web Toolkit开发shell来控制的。
这个开发shell实际上是一个Eclipse富客户应用程序,它由shell控制台、Tomcat服务器、一个或多个主机浏览器组成。
主机浏览器(Hosted Browser)和开发shell之间有两个紧密连接:
(1)一是HTTP连接,得到web页面、.css文件、图片和其它资源。
所有的这些都是由内嵌的Tomcat服务器使用servlet调用com.google.gwt.dev.shell.GWTShellServlet来处理的。
(2)第二个连接是一个后门(back-door),用于拦截在主机浏览器和shell之间所有的交互行为。Java代码依次调用实际的客户端代码,它由IDE编译成字节码。
P4:How a GWT page is loaded in hosted mode?
(1)shell程序打开主机浏览器窗口,载入MyApp.html;
(2)MyApp.html通过<script>标签加载gwt.js;
(3)gwt.js扫描MyApp.html并解析出<mata name='gwt-module'>,得到组件名(Module Name);
(4)GWT读入组件文件(MyApp.gwt.xml)来查找入口点(EntryPoint)类的名字(MyApp);
(5)MyApp类被实例化,且它的onModuleLoad()方法被调用,应用程序开始执行了;
(6)应用程序代码开始调用GWT用户库(gwt-user.jar),它也是Java代码;
(7)GWT用户库代码操纵主机浏览器的DOM来添加UI组件到Web页面,在浏览器中通过使用特殊的钩子,重定向浏览器事件返回到Java应用程序代码。
由于实际运行的是Java代码,故你可以使用Java工具如Eclipse的debugger,findbugs,pmd,JUnit等等。
2)Web模式
当你在主机浏览器下点击“Compile/Browse”,GWT编译器将把你的.client包解释成JavaScript,并打开一个通用的Web浏览器来浏览应用程序。网页还将作为shell的Tomcat实例来服务。
另一种方式就是请求GWT编译器,用脚手架提供shell脚本:MyApp-compile。如果你喜欢,还可以写Ant脚本来做这件事。
然而在你请求它时,GWT编译器用GWT API的JavaScript版本结合你的代码。这个代码和和几个支持文件都放在你的项目的www目录下。来自public目录下的所有文件是一个copy。下面的文件均做了解释:
---------------------------------
文件名                            描述
long-hex-name.cache.html         编译后的JavaScript
long-hex-name.cache.xml          实现的定义
module-name.nocache.html         Cache文件的选择
gwt.js                           通用GWT引导程序(bootstrap)代码
history.html                     IFrame的历史记录
MyApp.html                       主页,从public目录中copy的
tree*.gif                        通过Tree工具增减图片文件
---------------------------------
P5: How a GWT page is loaded in Web mode
在Web模式下,页面载入期间的执行流程如下:
(1)Web浏览器载入MyApp.html;
(2)MyApp.html通过<script>标签载入gwt.js;
(3)gwt.js扫描MyApp.html并解析出<meta ame='gwt-module'>,得到组件名;
(4)gwt.js修改页面,包含<iframe>标签,使得源文件module-name.nocache.html得以载入;
(5)module-name.nocache.html文件内的JavaScript代码查看浏览器的用户代理(userAgent)区域,判断用的是哪一种浏览器(如IE、Mozilla、Opera等等)。然后它选择正确适合浏览器类型的代码并重定向<iframe>标签;
(6)JavaScript等价的onModuleLoad()方法被执行,在已编译的JavaScript代码中操纵浏览器的DOM执行通常的动态网页调用。
六、困惑点
在缺省方式下,GWT Java到JavaScript编译器将产生令人困惑的输出。它产生的代码是含糊的、不易读的,难于用逆向工程。如果你需要调试GWT产生的JavaScript代码,你应该用GWT编译器的命令行参数关闭模糊(obfuscation)项。(如作为MyApp-compile.cmd脚本目录的参数),使用-style pretty选项来产生易读的输出,如易读的命名、缩进(indentation)。
要浏览所有的作为命名的Java类型,使用-style detailed选项来代替。
七、部署
目前看到的所有例子均是昨晚shell的Tomcat服务来提供的。实际上,在Web模式下,他们能被分发到任意的Web服务器上或者本地文件系统中。
拷贝整个www目录到本地文件系统的另一个位置,用浏览器来观看,你会发现跟之前一样。
 

网友评论

登录后评论
0/500
评论
chszs
+ 关注