初次接觸GWT，知識點概括

前言

本人最近開始研究?GWT(Google Web Toolkit)?，現將個人的一點心得貼出來，希望對剛開始接觸?GWT的程序員們有所幫助，也歡迎討論，共同進步。

先說說本人的硬件環境，機器是?dell inspiron 1464?，?i5?的處理器，?6G?內存。軟件環境，?Win7 32位操作系統，?MyEclipse9.0?，?JDK1.7?，?GWT2.3.0?。

所有資料全部來源于網絡，主要是?Google?的官方手冊。另外有一本中文的?GWT?教程，叫做《?GWT?揭秘》，評價很高，但是我沒有找到電子版，書可以從網上買到，但是我不愿意花錢，所以一直沒能拜讀。

1?、介紹

先來說一下概念性的知識，?GWT?的介紹很多，大家可以自己查，我只說注意事項，有說錯的地方，還請大家指出。?GWT?是?Google?的東西，出來四五年了，免費，開源（?JAR?包自帶源代碼，這應該算開源吧）。主要功能是把?java?語言寫的程序編譯成?Javascript?，以此來解放廣大熟悉?Java?編程但是對?Javascript?頭疼的程序員。

GWT?編譯的?JS?文件跨瀏覽器（也可以指定），?GWT?以?Module?為單位，每個?Module?都是一個?Java?類，通過?GWT?編譯后會生成一組?js\html\gif?文件，使用時只需要在網頁上引用一個以Module?名命名的?js?文件即可。?GWT?的?UI?部分使用的是?EXT2.0?（目前?EXT?的版本是?4.0?），因為?EXT2.1?（也有說是?2.2?）后開始收費，想用的話要么交錢，要么要求使用?EXT?的項目開源（無法忍受）！！所以?GWT?只內置了?EXT2.0?，想用?EXT4.0?怎么辦？有個?GXT?的框架，目前的版本是?2.2.4?，他其實是?EXT?的東西，不是?Google?的，?GXT=EXT+ GWT?，內置最新版本的?EXT，所以開發?GWT?的系統時，順便把?GXT?的?JAR?也引入，增強頁面的友好度。當然了，?EXT?都收費了，?GXT?當然也收費！

還有一個?GAE(Google App Engine)?，看名字就知道也是?Google?的產品，主要功能是為用戶提供一個云端的平臺，讓用戶發布自己的服務。說白了就是免費的個人網站。我試著發布自己的服務，但是網絡一直顯示連不上，我懷疑是國內的網絡運營商搞的鬼！

所有相關并且可能用到的插件地址如下，大家可以邊下邊繼續往下看。

GWT?的?Eclipse?插件?(GPE)?下載地址：?http://code.google.com/eclipse/docs/install-from-zip.html

GWT?的?SDK?下載地址：?http://code.google.com/webtoolkit/download.html

GXT?的?SDK?下載地址：?http://www.sencha.com/products/extgwt/download/

GAE?的下載地址：?http://code.google.com/appengine/downloads.html

2?、搭建環境

部署?GWT?環境，網絡上有很多的教程，但是大多都是很久以前的，不太適合現在來看。想要最新的詳細的資料，最好還是看?Google?官方的英文文檔。我用的是?MyEclipse9.0?，所以要安裝IDE?插件。

Google?的?IDE?插件有兩種安裝方式，一種是在線下載，另一種是下載離線安裝包后再安裝。本人強烈推薦后者，因為直接在線下載的話，速度是龜速，畢竟連的是境外服務器，不過在線安裝似乎能省去一些配置的工作。

這里介紹一下第一種在線安裝的方法。

?

如上圖，進入?MyEclipse Configuration Center?。多句嘴，不知道?MyEclipse?從哪個版本開始?(我之前用?6.5)?，所有插件的維護都跑到這里來了，而且還有一些配置也在這里，用起來很方便。提醒一下，離開按鈕在右上角，有個顏色很淺的箭頭，叫?Return to Workbench?，第一次用的時候害我找了半天。

?

進入之后，單擊?Software?，中央的面板會出現?4?個區域，在左上角的?Browse Software?里會顯示當前能夠安裝的插件，里面已經幫我們列出了?GPE?插件?(?難道?GPE?在國外有這么出名，讓它出現在常用插件里?)?，右擊選擇?add to profile?，就會發現?GPE?已經出現在了右上方的?My Software?里，同時在?Software Update Available?里面也會有響應的提示，說有新的插件添加，最后點?Pending Change?里面出現的?Apple 1change?就可以了，剩下的都是傻瓜化操作，這里不再贅述。

現在主要講一下第二種的離線安裝插件的方法。首先要下載安裝包?(?地址在上面?)?，接近160MB?的?zip?文件。安裝的時候還是要進入?MyEclipse Configuration Center?：

?

這時候在?Software?的插件搜索框的右邊有個?add site?的鏈接，點進去會出現一個?Add Update Site?的對話框，在這里有兩個需要填寫的內容，一個是名稱，可以隨便填，另一個是插件在硬盤上的位置。這個插件的位置其實是有?3?種寫法，一種是填寫?Eclipse?傳統的?link?鏈接，是個URL?地址；一種是填寫本地的插件目錄，點?Add from local Folder?；還有一種就是填寫本地插件的zip?文件的位置。后兩種的區別一個是解壓的文件夾，一個是沒解壓的?zip?文件，效果其實一樣。

?

點?OK?之后，我們的?Browse Software?里就會新增一個插件，不過這不算玩，這頂多只表示Myeclipse?多了一個升級插件的選擇，想安裝，要像上圖那樣。上圖只顯示了一個插件，相同的辦法，可以安裝其他的插件。之后右側的?My Software?截圖如下，現在可以點執行按鈕了。

?

?

在經過幾步確認和一小會的等待后，?MyEclipse?要求重啟。我的?MyEclipse?不知道是怎么的，點重啟就會死機，所以每次都是手工重啟?MyEclipse?。重啟之后，就會發現在工具條上多了四個按鈕：

?

第一個按鈕用來新建?GWT?的工程，他有?3?個下拉選項，我目前只知道最上面的那個是新建本地的工程，剩下的兩個功能是?GPE?剛剛加上去?的，還沒試驗過。第二個按鈕用來編譯已經存在的?GWT?項目。第三個按鈕是?Speed Tracer?，它是?GWT2.0?后新加的，主要是用來做性能分析，雖然沒用過，但我個人老感覺跟?Firebug?差不多。最后一個按鈕是將?GWT?項目發布到?Google?的云端，就是我上面提到的?GAE?啦！

3?、創建工程

現在開始正式建立一個真正的?GWT?項目。單擊?，彈出下面的對話框：

?

Package?很重要，?GWT?的?Module?就放在這個目錄下。選上?”Use Google Web Toolkit”?，這是引用?GWT?要用到的?JAR?包。去掉?”Use Google App Engine”?，因為我們還不需要將項目發布到Google?的云端。?”Sample Code”?一定選上，這樣生成的項目會自動為我們建立好實例代碼。生成的項目結構如下：

?

雖然?GWT?應用在?Web?項目上，但是目前新建的這個工程并不是?web?項目?MyEclipse?只當他是個普通的?java?項目，可以通過右擊項目→?MyEclipse?→?Add Web Project Capabilities…?來追加Web?工程。不過要注意，這樣追加之后，項目的目錄和文件會發生變化，所以要小心些。

現在一個可以直接運行的項目就算建好了，很簡單吧。下面來試著運行它，看看效果。要運行該實例，根本不需要去部署項目，?MyEclipse?自帶了?jetty-6?服務器，右擊項目→?Run As?→Web Application?，這時?jetty?服務就會啟動，并加載當前的項目。

?

如上圖所示，這里會提供一個地址，表示服務已經啟動，大家是不是已經明白下面要做什么了！先別急，這時去訪問的話，瀏覽器會提示你安裝一個叫?Google Web Toolkit Developer Plugin的瀏覽器插件，否則不能瀏覽。要是把地址上的那段詭異的參數去掉，頁面會提示?”GWT module 'mygwttest' may need to be (re)compiled”?，為什么呢？

?

現在想想，在?Eclipse?里，我們可以很方便的調試?java?代碼，而?GWT?的功能是把?java?代碼編譯成?JS?，那我們是不是也可以像調試?JAVA?代碼那樣，去調試?GWT?編譯的?JS?代碼呢？?Google不會想不到這點，所以給?GWT?提供了兩種運行模式。一種是宿主模式?(Hosted Mode)?，現在改名叫做開發模式?(development mode)?；另一種是?WEB?模式，現在叫生產模式?(production mode)。兩種模式的區別網上有一大堆的解釋，本質區別就是，開發模式下可以通過?IDE?工具調試，生產模式直接發布到正式服務器，不能調試！

GWT?區分兩種模式的方法是通過一個本地的服務完成的，注意到訪問地中那段詭異的參數了嗎?gwt.codesvr=127.0.0.1:9997?？沒錯，這個?9997?端口的服務就是用來調試的。除了服務器端需要開啟服務外，瀏覽器端也需要有所配合，這就是第一次訪問時需要安裝的?Google Web Toolkit Developer Plugin?。

?

安裝好瀏覽器插件后，頁面終于顯示了出來！很簡單的頁面，在文本框中輸入姓名后，點send?，會顯示出當前使用的后臺服務器和當前瀏覽器的信息。注意，如果調試后臺的?GWT?代碼的話，運行方式選擇?Debug As?，不是?Run As?，Run As下只能實現實時編譯。

這里要注意一點，?GWT?的兩種運行模式編譯的?JS?文件是不一樣的，開發模式的?JS?會包含調試信息?(?千萬不要把開發模式的?JS?發布到正式服務器上?)?，訪問地址沒有參數的時候會出現”GWT module 'xxx' may need to be (re)compiled”?的提示，并且在服務關閉之后，還會提示鏈接斷開。要想使用生產模式的?JS?文件，要通過??來實現，它會將指定的文件編譯成可以發布到正式服務器的?JS?文件。

4?、代碼解釋

現在來說說這個實例的代碼。

●?GreetingService.java?和?GreetingServiceAsync.java?要放在一起，這是兩個接口，其中GreetingService?繼承了?com.google.gwt.user.client.rpc.RemoteServic?接口。?GreetingServiceAsync是作為代理出現的，它的名字不能改，只能叫這個名，為什么呢？因為這兩個接口是用來實現RPC?功能的，說白了就相當于是?Struts?的后臺?Action?響應，只不過?RPC?傳的的對象。現在來說說他們倆的命名規則，假如我們新建了一個叫?XXX?的接口，繼承了com.google.gwt.user.client.rpc.RemoteServic?，有幾個方法?fn1(par…)?、?fn2(par…)?……。那么在這個?XXX?接口的同包下，必須有一個叫?XXXAsync?的接口，并且連方法都必須跟?XXX?一樣，只不過每個方法要多加一個參數?com.google.gwt.user.client.rpc.AsyncCallback<String> callback?，于是有了?fn1(par…,callback)?、?fn2(par…,callback)?…?..?。這所有的規則都是有校驗的，不清楚MyEclipse?的插件是怎么實現的，反正不滿足就回報錯，還能幫用戶修改，很方便。

●光有兩個接口而沒有實現類是沒有用的，?GreetingServiceImpl.java?就是一個對GreetingService?的實現類，注意不是那個代理接口。同時這個類還繼承了com.google.gwt.user.server.rpc.RemoteServiceServlet?，要是不繼承他，?GreetingService?也就沒什么特別的了。這個類里面所有實現的方法，相當于是?Struts?的后臺業務邏輯。

●以上的幾個文件配額起來能夠實現類似于?AJAX?的功能，而?MyGWTtest.java?則實現前臺的業務邏輯，將來它會編譯成?JS?文件，該文件還是一個入口文件，在頁面上引用的?JS?文件就是它編譯的，這有點類似?java?中的?main?方法。這里有個注意事項，因為要編譯成?JS?，所以?import的類只能有以下?3?種情況：?java.lang?包和?java.util?包下的類；?GWT?的類；符合上面?2?點而且也會編譯成?JS?的類。

●?FieldVerifier.java?里的代碼是在沒什么好說的，只有一個簡單的不能再簡單的方法。但是要注意，這個類也會編譯成?JS?代碼。

●?MyGWTtest.gwt.xml?是個重頭戲，它是?GWT?的配置文件，功能類似?Hibernate?的*.hbm.xml?。這個文件所在的包加上這個文件的文件名?(?不包括?gwt.xml)?就是?GWT?的一個Module?名。哪個類是入口類，那個類會被編譯，都在這里定義。同時文件中還會有多個繼承，inherits?元素指定；有且只有一個入口，?entry-point?元素指定；多個資源，?source?元素指定。

●空著的?com.jsltool.client?包是?JUtil?測試用的，可以不用理睬。

●?MyGWTtest.html?是用來測試用的頁面，?MyGWTtest.css?是它的樣式。

●在運行過一次這個實例之后，會發現項目的?war?包下面會多一個?mygwttest?的文件夾，文件夾的名字也就是?Module?名。這個文件夾里的文件就是?GWT?編譯好的?JS?文件。使用的時候，在頁面上將該文件夾下?的?Module?名?.nocache.js?引入就可以了。

對每個文件的詳細說明，我已經以注釋的形式寫入了代碼里，大家可以將項目下下來在自己的機器上部署。把?GWT?發布到正式的服務器上，注意不要忘記把編譯之后的?JS?文件夾拷過去，GWT?不會像?DWR?那樣產生一個虛擬的?JS?文件。

1 樓 yx200404 2011-06-16?? gxt收費嗎?
GAE 看運氣..運氣好碰到墻有洞 就訪問到了. 2 樓 jsltool 2011-06-30?? yx200404 寫道 gxt收費嗎?
GAE 看運氣..運氣好碰到墻有洞 就訪問到了.
GXT是收費的……GAE我目前還沒有成功連接過…… 3 樓 jiangzezhou1989 2011-09-12?? b3log團隊在gae上有個博客項目你可以關注下。項目主頁：http://www.b3log.org/ 4 樓 longthen 2011-09-21?? 6G內存裝32位系統不是浪費么 5 樓 飯特稀 2011-10-11?? GAE 年初的時候貌似很正常，不過后來就掛了 6 樓 jsltool 2011-10-13?? longthen 寫道 6G內存裝32位系統不是浪費么
同時開兩個MyEclipse，3個主流程的瀏覽器，Oracle服務……這樣就不覺得浪費了。主要還是因為工作上需要的幾個程序不支持64位 7 樓 liuweihong47java 2011-10-22?? good收藏起來了 8 樓 zhangyou1010 2011-11-18?? 博主你好，我有< GWT 揭秘>的電子版，如果需要的話，可以聯系我。 9 樓 ayaga 2011-12-20?? 編譯速度怎樣？ 10 樓 Kivewen 2012-02-16?? 問題是如果我在Grails項目中怎么集成GWT進去？ 11 樓 jsltool 2012-02-19?? Kivewen 寫道 問題是如果我在Grails項目中怎么集成GWT進去？
呵呵，這個還真不清楚，現在我還在使用基本的SSH框架做開發呢。

總結

以上是生活随笔為你收集整理的初次接触GWT，知识点总括的全部內容，希望文章能夠幫你解決所遇到的問題。

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