摘要:

用AJAX編寫更具交互性的B/S程序是當今世界一大潮流，然而AJAX的缺點也顯而易見，缺乏一個強有力的IDE使得編寫，測試AJAX程序異常困難。GWT（Google Web Toolkit）的出現(xiàn)讓你輕松的跨過這些屏障自在的構建你自己的AJAX程序。

之一:
用AJAX編寫更具交互性的B/S程序是當今世界一大潮流，然而AJAX的缺點也顯而易見，缺乏一個強有力的IDE使得編寫，測試AJAX程序異常困難。GWT（Google Web Toolkit）的出現(xiàn)讓你輕松的跨過這些屏障自在的構建你自己的AJAX程序。閑話少說，讓我們來領略一下GWT的魅力吧。先來看看google提供給我們的范例程序有多優(yōu)美：網(wǎng)址為http://code.google.com/webtoolkit/documentation/examples/desktopclone/demo.html這是google提供給我們的一個郵箱程序范例，126郵局最近新出的D計劃就與該范例及其相似，你只需點擊右上邊欄的某封郵件右下邊欄馬上就能顯示內(nèi)容。

開始之前先做些準備工作。你得先保證已經(jīng)安裝了GDK以及eclipse，然后到以下網(wǎng)址下載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注冊到環(huán)境變量中。

好，接下來就要開始構建第一個GWT程序了，Google Web Toolkit SDK package中已包含了一個projectcreator和applicationcreator，通過這兩個工具就可以構建可在eclipse下編譯的項目和程序。，現(xiàn)在我要在D:\學習\gwt\project下創(chuàng)建一個名為test的項目。先在D:\學習\gwt\project下創(chuàng)建文件夾test，然后打開cmd將目錄切換到D:\學習\gwt\project\test下。輸入如下命令：projectcreator -eclipse test，（注意不要將項目創(chuàng)建到eclipse的工作空間中，否則會報錯）。接著再來創(chuàng)建一個程序，輸入如下命令：applicationcreator –eclipse test com.chelson.client.Test1。Test1是程序的主類，相當于普通java程序中具有main函數(shù)的類。創(chuàng)建過程截圖如下：



接下來要將創(chuàng)建的項目導入到eclipse中。打開eclipse，然后點擊工具欄中的 文件－>導入，選擇“從現(xiàn)有項目到工作空間中”如下圖所示：

點“下一步”，再點擊“瀏覽”。跳出如下窗口：

 選擇剛才創(chuàng)建的D:\學習\gwt\project\test目錄，單擊確定返回到如下窗口：

單擊完成，所有預備工作完畢，在eclipse的包資源管理器下可以看到test項目的目錄結構如下：

雙擊其中的Test1-shell.cmd可以看到系統(tǒng)跳出一下窗口：

這是系統(tǒng)默認為你創(chuàng)建的第一個程序GWT程序所對應的html頁面。里面僅包含一個GWT按鈕組件。
明天我將詳細介紹按照上述方式創(chuàng)建項目的原因以及項目的基本構成。


之二:

讓我們來回顧一下gwt項目及程序的構建過程。首先應新建一個項目，項目構建的格式如下ProjectCreator [-ant projectName] [-eclipse projectName] [-out dir] [-overwrite][-ignore]，參數(shù)都是可選非必須的。如果要創(chuàng)建可被eclipse導入的項目就必須在projectcreator后面添加－eclipse，如果添加最后兩個參數(shù)的話會覆蓋目標目錄底下的同名項目。由于ProjectCreator創(chuàng)建項目時不像eclipse會創(chuàng)建一個與項目同名的文件夾用于存放項目底下的所有文件所以在創(chuàng)建項目之前必須先創(chuàng)建項目文件夾test。然后我們在cmd下直接進入項目文件夾：cd  D:\學習\gwt\project\test，所以無需輸入文件輸出路徑outdir。命令如下：projectcreator -eclipse test。便會自動在項目文件夾底下生成所需的文件。

然后開始創(chuàng)建程序，創(chuàng)建程序的格式如下ApplicationCreator [-eclipse projectName] [-out dir] [-overwrite] [-ignore] className，我想應該不用解釋了吧。我們要給項目test創(chuàng)建程序所以projectName應該填test，className是該程序的入口類，創(chuàng)建該類需要注意的一點是包路徑必須是com.*.client.className。其中的*表示可以設置任意的路徑如com.chelson.client.className或者com.swinu.client.className或者com.chelson.swinu.client.className，但是com和client兩個路徑不能省，這是GWT強制規(guī)定的，目的是為了使項目結構更為明晰。當用eclipse編譯完該類后系統(tǒng)將把該類解析成一個javascript文件，文件名是gwt.js。在我的范例中命令如下：applicationcreator –eclipse test com.chelson.client.Test1。
接下來來看看項目的結構：

Test1-shell.cmd用于調(diào)試程序，就是該文件使GWT可以輕松的調(diào)試AJAX，當程序編寫完后，雙擊該文件，系統(tǒng)就會將java編譯成javascript并開啟自帶的瀏覽器使程序員可以實時的看到程序運行結果。如圖：

Test1-compile.cmd用于部署程序，當程序已調(diào)試完畢就可以雙擊該文件，系統(tǒng)就會生成一個www文件夾，其目錄結構如下：

如果你想要在那個網(wǎng)頁中添加該程序只要將gwt.js包含到該網(wǎng)頁中就行了，當然www文件夾也要放到網(wǎng)頁的資源目錄中。
打開src文件夾，其文件結構如下圖：

可以看到主要有client，public和一個xml文件構成。Test1-compile.cmd和Test1-shell.cmd正是通過這個Xml文件識別主類并將其編譯為javascript的。Client文件夾用于存放你所編寫的java類，Client用于存放你要發(fā)布到網(wǎng)上的網(wǎng)頁或者其他文件。讓我們來看看Test1.java的源碼：

onModuleLoad函數(shù)功能相當于main函數(shù)，第19至29行很好理解，跟java圖形編程沒有什么區(qū)別，其中的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組建已經(jīng)完全涵蓋了html中所有的標簽，google也提倡用純粹的java來構造html頁面。打開ie，輸入如下的網(wǎng)址，這是google.提供的一個郵箱范例程序，http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.html，查看一下源代碼可以發(fā)現(xiàn)如此復雜的頁面其標簽中僅包含如下兩條語句：

<script language=‘javascript‘ src=‘gwt.js‘></script>
<iframe id=‘__gwt_historyFrame‘ style=‘width:0;height:0;border:0‘></iframe>

所有的頁面元素都是有gwt的ui組件創(chuàng)建的。


說明：本文并非對原文的直接翻譯，有進行過刪節(jié)和重組。原文鏈接：http://code.google.com/webtoolkit/