GWT笔记（Google Web Toolkit）1

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目录到本地文件系统的另一个位置，用浏览器来观看，你会发现跟之前一样。