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目錄到本地文件系統的另一個位置，用瀏覽器來觀看，你會發現跟之前一樣。
?

轉載于:https://www.cnblogs.com/yangjin-55/archive/2007/07/22/2786990.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。