選擇剛才創(chuàng)建的D:\學(xué)習(xí)\gwt\project\test目錄，單擊確定返回到如下窗口：
單擊完成，所有預(yù)備工作完畢，在eclipse的包資源管理器下可以看到test項(xiàng)目的目錄結(jié)構(gòu)如下：
雙擊其中的Test1-shell.cmd可以看到系統(tǒng)跳出一下窗口：
這是系統(tǒng)默認(rèn)為你創(chuàng)建的第一個(gè)程序GWT程序所對(duì)應(yīng)的html頁(yè)面。里面僅包含一個(gè)GWT按鈕組件。
明天我將詳細(xì)介紹按照上述方式創(chuàng)建項(xiàng)目的原因以及項(xiàng)目的基本構(gòu)成。
之二:
讓我們來(lái)回顧一下gwt項(xiàng)目及程序的構(gòu)建過(guò)程。首先應(yīng)新建一個(gè)項(xiàng)目，項(xiàng)目構(gòu)建的格式如下ProjectCreator [-ant projectName] [-eclipse projectName] [-out dir] [-overwrite][-ignore]，參數(shù)都是可選非必須的。如果要?jiǎng)?chuàng)建可被eclipse導(dǎo)入的項(xiàng)目就必須在projectcreator后面添加－eclipse，如果添加最后兩個(gè)參數(shù)的話會(huì)覆蓋目標(biāo)目錄底下的同名項(xiàng)目。由于ProjectCreator創(chuàng)建項(xiàng)目時(shí)不像eclipse會(huì)創(chuàng)建一個(gè)與項(xiàng)目同名的文件夾用于存放項(xiàng)目底下的所有文件所以在創(chuàng)建項(xiàng)目之前必須先創(chuàng)建項(xiàng)目文件夾test。然后我們?cè)赾md下直接進(jìn)入項(xiàng)目文件夾：cd D:\學(xué)習(xí)\gwt\project\test，所以無(wú)需輸入文件輸出路徑outdir。命令如下：projectcreator -eclipse test。便會(huì)自動(dòng)在項(xiàng)目文件夾底下生成所需的文件。
然后開(kāi)始創(chuàng)建程序，創(chuàng)建程序的格式如下ApplicationCreator [-eclipse projectName] [-out dir] [-overwrite] [-ignore] className，我想應(yīng)該不用解釋了吧。我們要給項(xiàng)目test創(chuàng)建程序所以projectName應(yīng)該填test，className是該程序的入口類(lèi)，創(chuàng)建該類(lèi)需要注意的一點(diǎn)是包路徑必須是com.*.client.className。其中的*表示可以設(shè)置任意的路徑如com.chelson.client.className或者com.swinu.client.className或者com.chelson.swinu.client.className，但是com和client兩個(gè)路徑不能省，這是GWT強(qiáng)制規(guī)定的，目的是為了使項(xiàng)目結(jié)構(gòu)更為明晰。當(dāng)用eclipse編譯完該類(lèi)后系統(tǒng)將把該類(lèi)解析成一個(gè)javascript文件，文件名是gwt.js。在我的范例中命令如下：applicationcreator –eclipse test com.chelson.client.Test1。
接下來(lái)來(lái)看看項(xiàng)目的結(jié)構(gòu)：
Test1-shell.cmd用于調(diào)試程序，就是該文件使GWT可以輕松的調(diào)試AJAX，當(dāng)程序編寫(xiě)完后，雙擊該文件，系統(tǒng)就會(huì)將java編譯成javascript并開(kāi)啟自帶的瀏覽器使程序員可以實(shí)時(shí)的看到程序運(yùn)行結(jié)果。如圖：
Test1-compile.cmd用于部署程序，當(dāng)程序已調(diào)試完畢就可以雙擊該文件，系統(tǒng)就會(huì)生成一個(gè)www文件夾，其目錄結(jié)構(gòu)如下：
如果你想要在那個(gè)網(wǎng)頁(yè)中添加該程序只要將gwt.js包含到該網(wǎng)頁(yè)中就行了，當(dāng)然www文件夾也要放到網(wǎng)頁(yè)的資源目錄中。
打開(kāi)src文件夾，其文件結(jié)構(gòu)如下圖：
可以看到主要有client，public和一個(gè)xml文件構(gòu)成。Test1-compile.cmd和Test1-shell.cmd正是通過(guò)這個(gè)Xml文件識(shí)別主類(lèi)并將其編譯為javascript的。Client文件夾用于存放你所編寫(xiě)的java類(lèi)，Client用于存放你要發(fā)布到網(wǎng)上的網(wǎng)頁(yè)或者其他文件。讓我們來(lái)看看Test1.java的源碼：
onModuleLoad函數(shù)功能相當(dāng)于main函數(shù)，第19至29行很好理解，跟java圖形編程沒(méi)有什么區(qū)別，其中的Button和label類(lèi)分別對(duì)應(yīng)html標(biāo)簽中的<input type=button>和<label>。RootPanel類(lèi)對(duì)應(yīng)著文檔，RootPanel.get(“slot”) 與javascript中的document.getElementById(“slot”)功能相當(dāng)。Id：Slot在Test1.html中定義如下：
<table align=center>
<tr>
<td id="slot1"></td><td id="slot2"></td>
</tr>
</table>
整段程序的功能就是當(dāng)用戶按下按鈕時(shí)便在id為slot的標(biāo)簽中顯示“Hello World” 。
需要注意的一點(diǎn)是gwt并不是將編譯出來(lái)的javascript寫(xiě)到Test1.html中，而是生成一個(gè)獨(dú)立的javascript文件gwt.js，Test1.html僅僅是引用了該文件。另外用gwt編寫(xiě)AJAX可以完全將html標(biāo)簽拋棄，因?yàn)間wt中提供的ui組建已經(jīng)完全涵蓋了html中所有的標(biāo)簽，google也提倡用純粹的java來(lái)構(gòu)造html頁(yè)面。打開(kāi)ie，輸入如下的網(wǎng)址，這是google.提供的一個(gè)郵箱范例程序，http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.html，查看一下源代碼可以發(fā)現(xiàn)如此復(fù)雜的頁(yè)面其標(biāo)簽中僅包含如下兩條語(yǔ)句：
<script language=‘javascript‘ src=‘gwt.js‘></script>
<iframe id=‘__gwt_historyFrame‘ style=‘width:0;height:0;border:0‘></iframe>
所有的頁(yè)面元素都是有g(shù)wt的ui組件創(chuàng)建的。
說(shuō)明：本文并非對(duì)原文的直接翻譯，有進(jìn)行過(guò)刪節(jié)和重組。原文鏈接：http://code.google.com/webtoolkit/
聯(lián)系客服
