GWT筆記（GoogleWebToolkit）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目錄到本地檔案系統的另一個位置，用瀏覽器來觀看，你會發現跟之前一樣。