GWT筆記（Google Web Toolkit）1

一、GWT介紹
1）GWT目的：通過提供相似的Java開發(fā)環(huán)境，并隱藏各瀏覽器不兼容的部分，使AJAX開發(fā)變得更容易。
2）GWT統(tǒng)一了客戶端和服務(wù)器端的代碼，形成了用一種語(yǔ)言來編寫：Java。
這有許多優(yōu)勢(shì)：
（1）熟悉Java的開發(fā)者比熟悉JavaScript或Flash的開發(fā)者多。
（2）Java的開發(fā)工具非常多，如Eclipse、NetBeans和IDEA。
3）GWT允許以類似于創(chuàng)建Swing應(yīng)用程序的方式創(chuàng)建Web應(yīng)用，它可以創(chuàng)建可視化組件、設(shè)置事件驅(qū)動(dòng)，調(diào)試等等。
4）在客戶端和服務(wù)器端統(tǒng)一了語(yǔ)言后，方便共享代碼。
5）GWT還可以提取瀏覽器的DOM，隱藏瀏覽器之間的不同，擴(kuò)展了面向?qū)ο蟮腢I模式。它使代碼更輕便，并支持所有瀏覽器。
GWT工具箱提供了一個(gè)XML解析器、幾個(gè)和服務(wù)器通信的工具、國(guó)際化工具、配置工具，以及瀏覽器歷史管理系統(tǒng)。
二、GWT支持平臺(tái)及安裝
GWT的開發(fā)受到Windows、Linux以及MacOSX等操作系統(tǒng)的支持。
GWT應(yīng)用程序還可以部署成Web服務(wù)到任意操作系統(tǒng)，并在新版瀏覽器（如IE6、IE7、Firefox、Opera等等）中瀏覽。
GWT需要JDK1.4.2及以上版本的支持。另外，還需要一個(gè)IDE，如Eclipse3.2。最后，需要下載Google Web Toolkit SDK（1.2.22及以上版本，現(xiàn)在是1.4）。
三、搭建腳手架（scaffolding）
在命令行提示符中，運(yùn)行下列命令：
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提供，因此需要指定環(huán)境變量PATH，增加GWT目錄到PATH中去。
projectCreator建立了一個(gè)普通的GWT項(xiàng)目的框架，而applicationCreator則添加了一個(gè)GWT應(yīng)用。
四、運(yùn)行和調(diào)試
在Eclipse外部運(yùn)行應(yīng)用程序：使用腳手架（scaffolding）提供的shell腳本命令。
c:/gwt-projects/MyProject>MyApp-shell
如果工作正常的話，將出現(xiàn)兩個(gè)窗口：
（1）GWT開發(fā)shell窗口
（2）Web瀏覽器窗口
在Eclipse IDE下運(yùn)行GWT項(xiàng)目，可以先導(dǎo)入項(xiàng)目，如（File-->Import-->Existing Project into Workspace）。
然后選擇Run-->Debug...,再在Java Application下點(diǎn)擊the launch configuration titled MyApp，然后點(diǎn)擊Debug，也會(huì)出現(xiàn)上述的兩個(gè)窗口。
進(jìn)入調(diào)試模式也很簡(jiǎn)單，可以在MyApp.java內(nèi)任意設(shè)置斷點(diǎn)，在調(diào)試模式下進(jìn)行單步跟蹤，如檢查變量的值等等。
它使你能夠采用Java來開發(fā)Ajax應(yīng)用。
五、主機(jī)（Hosted）模式 VS Web模式
在先前，你可以使用主機(jī)模式調(diào)用GWT應(yīng)用程序。主機(jī)模式僅用于開發(fā)階段。而在進(jìn)入產(chǎn)品階段，你的應(yīng)用程序?qū)⑦\(yùn)行在Web模式下。
在使用GWT開發(fā)時(shí)，你需要理解兩者的不同。
注意：主機(jī)模式目前只在Windows和Linux下有效。
1）主機(jī)模式（Hosted Mode）
主機(jī)模式是一種獨(dú)特的混合開發(fā)環(huán)境，它讓你的代碼作為真正的Java代碼來運(yùn)行，而且還嵌入在瀏覽器中。
在主機(jī)模式下執(zhí)行是由Google Web Toolkit開發(fā)shell來控制的。
這個(gè)開發(fā)shell實(shí)際上是一個(gè)Eclipse富客戶應(yīng)用程序，它由shell控制臺(tái)、Tomcat服務(wù)器、一個(gè)或多個(gè)主機(jī)瀏覽器組成。
主機(jī)瀏覽器（Hosted Browser）和開發(fā)shell之間有兩個(gè)緊密連接：
（1）一是HTTP連接，得到web頁(yè)面、.css文件、圖片和其它資源。
所有的這些都是由內(nèi)嵌的Tomcat服務(wù)器使用servlet調(diào)用com.google.gwt.dev.shell.GWTShellServlet來處理的。
（2）第二個(gè)連接是一個(gè)后門（back-door），用于攔截在主機(jī)瀏覽器和shell之間所有的交互行為。Java代碼依次調(diào)用實(shí)際的客戶端代碼，它由IDE編譯成字節(jié)碼。
P4：How a GWT page is loaded in hosted mode?
（1）shell程序打開主機(jī)瀏覽器窗口，載入MyApp.html；
（2）MyApp.html通過<script>標(biāo)簽加載gwt.js；
（3）gwt.js掃描MyApp.html并解析出<mata name='gwt-module'>，得到組件名（Module Name）；
（4）GWT讀入組件文件（MyApp.gwt.xml）來查找入口點(diǎn)（EntryPoint）類的名字（MyApp）；
（5）MyApp類被實(shí)例化，且它的onModuleLoad()方法被調(diào)用，應(yīng)用程序開始執(zhí)行了；
（6）應(yīng)用程序代碼開始調(diào)用GWT用戶庫(kù)（gwt-user.jar），它也是Java代碼；
（7）GWT用戶庫(kù)代碼操縱主機(jī)瀏覽器的DOM來添加UI組件到Web頁(yè)面，在瀏覽器中通過使用特殊的鉤子，重定向?yàn)g覽器事件返回到Java應(yīng)用程序代碼。
由于實(shí)際運(yùn)行的是Java代碼，故你可以使用Java工具如Eclipse的debugger，findbugs，pmd，JUnit等等。
2）Web模式
當(dāng)你在主機(jī)瀏覽器下點(diǎn)擊“Compile/Browse”，GWT編譯器將把你的.client包解釋成JavaScript，并打開一個(gè)通用的Web瀏覽器來瀏覽應(yīng)用程序。網(wǎng)頁(yè)還將作為shell的Tomcat實(shí)例來服務(wù)。
另一種方式就是請(qǐng)求GWT編譯器，用腳手架提供shell腳本：MyApp-compile。如果你喜歡，還可以寫Ant腳本來做這件事。
然而在你請(qǐng)求它時(shí)，GWT編譯器用GWT API的JavaScript版本結(jié)合你的代碼。這個(gè)代碼和和幾個(gè)支持文件都放在你的項(xiàng)目的www目錄下。來自public目錄下的所有文件是一個(gè)copy。下面的文件均做了解釋：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
文件名??????????????????????????? 描述
long-hex-name.cache.html???????? 編譯后的JavaScript
long-hex-name.cache.xml????????? 實(shí)現(xiàn)的定義
module-name.nocache.html???????? Cache文件的選擇
gwt.js?????????????????????????? 通用GWT引導(dǎo)程序（bootstrap）代碼
history.html???????????????????? IFrame的歷史記錄
MyApp.html?????????????????????? 主頁(yè)，從public目錄中copy的
tree*.gif??????????????????????? 通過Tree工具增減圖片文件
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
P5: How a GWT page is loaded in Web mode
在Web模式下，頁(yè)面載入期間的執(zhí)行流程如下：
（1）Web瀏覽器載入MyApp.html；
（2）MyApp.html通過<script>標(biāo)簽載入gwt.js；
（3）gwt.js掃描MyApp.html并解析出<meta ame='gwt-module'>，得到組件名；
（4）gwt.js修改頁(yè)面，包含<iframe>標(biāo)簽，使得源文件module-name.nocache.html得以載入；
（5）module-name.nocache.html文件內(nèi)的JavaScript代碼查看瀏覽器的用戶代理（userAgent）區(qū)域，判斷用的是哪一種瀏覽器（如IE、Mozilla、Opera等等）。然后它選擇正確適合瀏覽器類型的代碼并重定向<iframe>標(biāo)簽;
（6）JavaScript等價(jià)的onModuleLoad()方法被執(zhí)行，在已編譯的JavaScript代碼中操縱瀏覽器的DOM執(zhí)行通常的動(dòng)態(tài)網(wǎng)頁(yè)調(diào)用。
六、困惑點(diǎn)
在缺省方式下，GWT Java到JavaScript編譯器將產(chǎn)生令人困惑的輸出。它產(chǎn)生的代碼是含糊的、不易讀的，難于用逆向工程。如果你需要調(diào)試GWT產(chǎn)生的JavaScript代碼，你應(yīng)該用GWT編譯器的命令行參數(shù)關(guān)閉模糊（obfuscation）項(xiàng)。（如作為MyApp-compile.cmd腳本目錄的參數(shù)），使用-style pretty選項(xiàng)來產(chǎn)生易讀的輸出，如易讀的命名、縮進(jìn)（indentation）。
要瀏覽所有的作為命名的Java類型，使用-style detailed選項(xiàng)來代替。
七、部署
目前看到的所有例子均是昨晚shell的Tomcat服務(wù)來提供的。實(shí)際上，在Web模式下，他們能被分發(fā)到任意的Web服務(wù)器上或者本地文件系統(tǒng)中。
拷貝整個(gè)www目錄到本地文件系統(tǒng)的另一個(gè)位置，用瀏覽器來觀看，你會(huì)發(fā)現(xiàn)跟之前一樣。
?

轉(zhuǎn)載于:https://www.cnblogs.com/yangjin-55/archive/2007/07/22/2786990.html

總結(jié)

以上是生活随笔為你收集整理的GWT笔记（Google Web Toolkit）1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。