本文由chelson發表在Ajax論壇,原貼:
http://www.matrix.org.cn/thread.shtml?topicId=47378&forumId=41
http://www.matrix.org.cn/thread.shtml?topicId=47380&forumId=41
之一:
用AJAX編寫更具互動性的B/S程式是當今世界一大潮流，然而AJAX的缺點也顯而易見，缺乏一個強有力的IDE使得編寫，測試AJAX程式異常困難。GWT（Google Web Toolkit）的出現讓你輕松的跨過這些屏障自在的建構你自己的AJAX程式。閑話少說，讓我們來領略一下GWT的魅力吧。先來看看google提供給我們的範例程式有多優美：網址為http://code.google.com/webtoolkit/documentation/examples/desktopclone/demo.html這是google提供給我們的一個郵箱程式範例，126郵局最近新出的D計劃就與該範例及其相似，你隻需點選右上邊欄的某封郵件右下邊欄馬上就能顯示内容。
開始之前先做些準備工作。你得先保證已經安裝了GDK以及eclipse，然後到以下網址下載下傳Google Web Toolkit SDK package： http://code.google.com/webtoolkit/。..........等待中。OK，下載下傳完畢了，然後解壓到某個目錄下，我解壓到了D:/Program Files/下;原壓縮包包含了gwt-windows-1.0.21檔案夾，因而此時應将D:/Program Files/gwt-windows-1.0.21注冊到環境變量中。
好，接下來就要開始建構第一個GWT程式了，Google Web Toolkit SDK package中已包含了一個projectcreator和applicationcreator，通過這兩個工具就可以建構可在eclipse下編譯的項目和程式。，現在我要在D:/學習/gwt/project下建立一個名為test的項目。先在D:/學習/gwt/project下建立檔案夾test，然後打開cmd将目錄切換到D:/學習/gwt/project/test下。輸入如下指令：projectcreator -eclipse test，（注意不要将項目建立到eclipse的工作空間中，否則會報錯）。接着再來建立一個程式，輸入如下指令：applicationcreator –eclipse test com.chelson.client.Test1。Test1是程式的主類，相當于普通java程式中具有main函數的類。建立過程截圖如下：
接下來要将建立的項目導入到eclipse中。打開eclipse，然後點選工具欄中的 檔案－>導入，選擇“從現有項目到工作空間中”如下圖所示：
點“下一步”，再點選“浏覽”。跳出如下視窗：
選擇剛才建立的D:/學習/gwt/project/test目錄，單擊确定傳回到如下視窗：
單擊完成，所有預備工作完畢，在eclipse的包資料總管下可以看到test項目的目錄結構如下：
輕按兩下其中的Test1-shell.cmd可以看到系統跳出一下視窗：
這是系統預設為你建立的第一個程式GWT程式所對應的html頁面。裡面僅包含一個GWT按鈕元件。
明天我将詳細介紹按照上述方式建立項目的原因以及項目的基本構成。
之二:
讓我們來回顧一下gwt項目及程式的建構過程。首先應建立一個項目，項目建構的格式如下ProjectCreator [-ant projectName] [-eclipse projectName] [-out dir] [-overwrite][-ignore]，參數都是可選非必須的。如果要建立可被eclipse導入的項目就必須在projectcreator後面添加－eclipse，如果添加最後兩個參數的話會覆寫目标目錄底下的同名項目。由于ProjectCreator建立項目時不像eclipse會建立一個與項目同名的檔案夾用于存放項目底下的所有檔案是以在建立項目之前必須先建立項目檔案夾test。然後我們在cmd下直接進入項目檔案夾：cd D:/學習/gwt/project/test，是以無需輸入檔案輸出路徑outdir。指令如下：projectcreator -eclipse test。便會自動在項目檔案夾底下生成所需的檔案。
然後開始建立程式，建立程式的格式如下ApplicationCreator [-eclipse projectName] [-out dir] [-overwrite] [-ignore] className，我想應該不用解釋了吧。我們要給項目test建立程式是以projectName應該填test，className是該程式的入口類，建立該類需要注意的一點是包路徑必須是com.*.client.className。其中的*表示可以設定任意的路徑如com.chelson.client.className或者com.swinu.client.className或者com.chelson.swinu.client.className，但是com和client兩個路徑不能省，這是GWT強制規定的，目的是為了使項目結構更為明晰。當用eclipse編譯完該類後系統将把該類解析成一個javascript檔案，檔案名是gwt.js。在我的範例中指令如下：applicationcreator –eclipse test com.chelson.client.Test1。
接下來來看看項目的結構：
Test1-shell.cmd用于調試程式，就是該檔案使GWT可以輕松的調試AJAX，當程式編寫完後，輕按兩下該檔案，系統就會将java編譯成javascript并開啟自帶的浏覽器使程式員可以實時的看到程式運作結果。如圖：
Test1-compile.cmd用于部署程式，當程式已調試完畢就可以輕按兩下該檔案，系統就會生成一個www檔案夾，其目錄結構如下：
如果你想要在那個網頁中添加該程式隻要将gwt.js包含到該網頁中就行了，當然www檔案夾也要放到網頁的資源目錄中。
打開src檔案夾，其檔案結構如下圖：
可以看到主要有client，public和一個xml檔案構成。Test1-compile.cmd和Test1-shell.cmd正是通過這個Xml檔案識别主類并将其編譯為javascript的。Client檔案夾用于存放你所編寫的java類，Client用于存放你要釋出到網上的網頁或者其他檔案。讓我們來看看Test1.java的源碼：
onModuleLoad函數功能相當于main函數，第19至29行很好了解，跟java圖形程式設計沒有什麼差別，其中的Button和label類分别對應html标簽中的<input type=button>和<label>。RootPanel類對應着文檔，RootPanel.get(“slot”) 與javascript中的document.getElementById(“slot”)功能相當。Id：Slot在Test1.html中定義如下：
<table align=center>
<tr>
<td id="slot1"></td><td id="slot2"></td>
</tr>
</table> 整段程式的功能就是當使用者按下按鈕時便在id為slot的标簽中顯示“Hello World” 。
需要注意的一點是gwt并不是将編譯出來的javascript寫到Test1.html中，而是生成一個獨立的javascript檔案gwt.js，Test1.html僅僅是引用了該檔案。另外用gwt編寫AJAX可以完全将html标簽抛棄，因為gwt中提供的ui組建已經完全涵蓋了html中所有的标簽，google也提倡用純粹的java來構造html頁面。打開ie，輸入如下的網址，這是google.提供的一個郵箱範例程式，http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.html，檢視一下源代碼可以發現如此複雜的頁面其标簽中僅包含如下兩條語句：
<script language='javascript' src='gwt.js'></script>
<iframe id='__gwt_historyFrame' style='width:0;height:0;border:0'></iframe> 所有的頁面元素都是有gwt的ui元件建立的。
說明：本文并非對原文的直接翻譯，有進行過删節和重組。原文連結：http://code.google.com/webtoolkit/