簡介： ajax 被用于建立更加動态和互動性更好的 web 應用程式。google web toolkit (簡稱gwt) 是 google 推出的 ajax 應用開發包，gwt 支援開發者使用java 語言開發 ajax 應用。本文中作者将介紹如何使用 gwt 開發 ajax 應用的基本方法和步驟。 ## ajax簡介 ## ajax是 asynchronous javascript and xml（以及 dhtml 等）的縮寫，由xhtml、css、javascript、xmlhttprequest、xml等技術組合而成，是目前web應用開發領域的熱門技術，用于建立更加動态和互動性更好的web應用程式，提升使用者的浏覽體驗。
ajax的核心是javascript對象xmlhttprequest。xmlhttprequest處理所有伺服器通信的對象，是一種支援異步請求的技術。簡而言之，xmlhttprequest使您可以使用javascript向伺服器提出請求并處理響應，而不阻塞使用者。 ajax并不是本文的中心關注點，是以這裡不再贅述，請大家通路參考資源區的相關連結，了解更多關于ajax技術和應用方面的知識。
衆所周知，即使對于ajax技術非常熟悉的開發者而言，ajax應用的開發和調試過程也不是一件容易的事情，更困難的是，到目前為止，一直沒有出現合适的開發工具能夠支援ajax應用的開發和調試。 與此相反的是，java語言–企業應用開發的主流語言-的開發和調試過程卻因為有各種各樣開發工具的支援而簡單的多，而且這樣的開發工具我們可以免費獲得，比如eclipse、netbeans。 如果能夠應用java語言開發ajax，ajax應用開發的最大難題-開發工具的缺失-就将迎刃而解。這種情況下，我們就可以既充分利用java語言的開發優勢降低ajax應用開發的難度，加快ajax應用的開發速度，為ajax的大規模應用創造可能，又可以充分發揮ajax技術的優勢，建立更加動态和互動性更好的web應用程式，提升使用者的浏覽體驗。
google web toolkit(簡稱gwt)的出現為我們提供了這種可能。gwt是google推出的ajax應用開發包，支援開發者使用java語言開發ajax應用。gwt架構本身是開源的，但是gwt中的開發工具僅僅提供開發用license，不允許分發。 gwt提供了一組基于java語言的開發包，這個開發包的設計參考java awt包設計，類命名規則、接口設計、事件監聽等都和awt非常類似。熟悉java awt的開發者不需要花費多大的力氣就能夠快速的了解gwt開發工具包，将更多地時間投入到gwt應用的開發過程中。
開發出來的java應用将由gwt開發包提供的編譯工具編譯後聲生成對應的、應用了ajax技術的web應用，java應用中出現的、和伺服器之間的互動動作被自動生成的異步調用代碼所代替。
gwt除了支援将應用java語言開發的應用轉化為ajax應用，同時提供了更多的進階特性，下面是這些特性的簡單描述。
gwt編譯器 gwt編譯器是gwt的核心，負責完成将java代碼翻譯很ajax内容的工作。gwt編譯器能夠翻譯java語言的大部分特性。包括支援java語言中的基本類型、違例處理等，支援java.lang包和java.util包中的絕大部分類和接口，支援正規表達式和序列化。
跨平台支援 如果你使用gwt中提供的顯示元件(比如button)群組裝元件(比如verticalpanel)，gwt編譯生成的ajax應用能夠支援大部分的浏覽器和作業系統，比如internet explorer、firefox等，也能夠支援linux、windows等不同作業系統。這是因為gwt最大限度的将這些控件翻譯成浏覽器内置的類型。比如button類編譯後生成的是标準html：。
gwt建議使用css修飾頁面元素的顯示效果。gwt的類中很少提供通路頁面元素樣式屬性的方法，我們可以直接在css檔案中通過對應的樣式名稱來設定頁面元素的預設顯示效果。比如使用 .gwt-button { font-size: 150%; } 使用button元素的預設顯示效果。
宿主模式(hosted mode) 宿主模式是指我們和沒有轉換為ajax應用的gwt應用互動的狀态。當我們開發和調試時，我們就一直處在宿主模式下。在這種情況下，java虛拟機使用gwt内置的浏覽器運作gwt應用編譯後的class内容，是以能夠提供”編碼、測試、調試”過程的最佳速度。 我們可以運作com.google.gwt.dev.gwtshell啟動宿主模式。
web模式(web mode) web模式是指已經成功轉化為ajax應用的狀态，這種狀态下，我們已經開始通過web方式來通路ajax應用了。 在web模式下運作時，不再需要gwt工具包或者jvm的支援。
指令行工具 gwt工具包中提供了幾個非常适用的小工具來幫助我們更快的建立gwt應用開發環境：projectcreator、applicationcreator、junitcreator。 projectcreator 建立在eclipse中開發gwt應用所需要的項目基本檔案和可選的ant buildfile檔案。 applicationcreator applicationcreator指令用于建立基本的helloworld！應用和gwt應用開發環境。
junitcreator 生成junti測試代碼。 通過上面的内容，我們已經了解了gwt工具集工作的基本原理和主要特性。有些迫不及待了吧，那麼就請随我一起進入gwt應用開發的過程吧，享受應用java語言開發ajax應用帶來的簡單和便利。 本文中所有的環境準備、執行個體開發和說明均針對windows操作平台，如果使用其他的作業系統，請根據實際情況進行适當的調整。
1、 下載下傳和安裝jdk1.4.x
gwt工具包的編譯需要jdk支援，是以在安裝gwt工具包之前請下載下傳和安裝合适的jdk。gwt工具支援java語言1.4版本或者以下版本，是以jdk版本選擇jdk1.4.x是比較合适的，不需要采用最新的jdk5.0或者更高版本。 請通路java.sun.com網站上下載下傳安裝版本，下載下傳後安裝到c:/jdk目錄下，本書中的後續内容中将使用%java_home%變量來引用這個目錄。 您可以根據實際情況将jdk安裝到任意目錄下。但是在運作本文中例子的時候，請記住将對應的%java_home%變量替換為您的實際安裝目錄。
2、 下載下傳和安裝gwt
請通路http://code.google.com/webtoolkit/下載下傳gwt的最新版本，将下載下傳的壓縮檔案解壓縮到c:/gwt目錄下。本書中的後續内容中将使用%gwt_home%變量來引用這個目錄。 gwt工具包支援不同的作業系統，請根據自己的作業系統選擇合适的安裝包。
您可以根據實際情況将gwt安裝到任意目錄下。但是在運作本文中例子的時候，請記住将對應的%gwt_home%變量替換為您的實際安裝目錄。
下面的内容中我們将介紹如何使用gwt工具集來完成第一個gwt的例子-“hello world！”，并且将使用gwt編譯及将他轉化為ajax應用，在浏覽器中完成測試。 我們要完成的例子要實作的功能包括：
1、 在頁面上顯示一個按鈕
2、 點選該按鈕，預設情況下，我們将在按鈕後面緊跟着顯示字元串”hello world!”。
3、 如果點選按鈕時，”hello world!”字元串已經顯示在浏覽器中，我們要将他隐藏起來。 我們現在開始使用gwt工具集完成”hello world！”例子的開發，下面的步驟是完成”hello world！”例子開發環境配置、應用開發、編譯的基本步驟，同樣适用于其他gwt應用的開發，隻是根據實際情況可能有增減。
1、 建立gwt應用開發環境
從上面的gwt特性部分我們知道，gwt工具包中提供的applicationcreator指令行工具可以幫助我們建立gwt應用開發所需要的環境，是以我們可以直接使用applicationcreator幫助我們完成這項工作。 打開指令行工具，進入c:/根目錄下，執行”mkdi”指令建立新的檔案目錄helloworld。
執行下面的指令将%java_home%\bin目錄和%gwt_home%目錄加入到path路徑中。
請将指令行中的%java_home%替換為實際環境中jdk的安裝目錄，将%gwt_home%替換為gwt工具包的安裝目錄。 進入新建立的helloworld目錄，然後運作applicationcreator指令建立gwt應用開發環境。
applicationcreator.cmd指令支援的文法如下。
<code>applicationcreator [-eclipse projectname] [-out dir] [-overwrite] [-ignore] classname</code>
其中最重要的一個參數是classname，也就是我們建立的gwt應用中的主java類，我們這裡選擇使用<code>org.vivianj.gwt.client.helloworld。</code>
根據gwt工具包的預設規則，gwt應用中的主java類報名的最後一段必須是client。也就是說，隻有xxx.client.xxxx這樣命名的java類才能被識别為正确的gwt應用主類。 applicationcreator工具運作的時候，螢幕上會列印如下内容。
2、 開發”hello world！”例子
使用applicationcreator工具的時候，applicationcreator工具其實已經幫我們生成了符合hello world!例子要求的全部内容。為了不打斷第一個例子的示範過程，我們先簡單的了解一下applicationcreator工具的生成内容。我們将在将在測試過程後面做出更加詳細的分析。
圖1中顯示了applicationcreator工具執行後生成的目錄結構。
圖1中的src\org\vivianj\gwt\client目錄中的helloworld.java是gwt應用的主類；src\org\vivianj\gwt\public目錄中的
helloworld.html檔案是例子的預設頁面；src\org\vivianj\gwt目錄下的helloworld.gwt.xml是gwt應用的配置檔案，提供gwt應用中頁面和主類的配置資訊；根目錄下的helloworld-compile.cmd檔案用于提供将該gwt應用編譯成ajax的指令；根目錄下的helloworld-shell.cmd檔案用于啟動宿主模式(hosted mode)，友善測試gwt應用。
3、 在宿主模式下啟動”hello world！”例子 我們可以直接在指令行中執行helloworld-shell.cmd來啟動宿主模式(hosted mode)，運作新建立的”hello world！”例子。
這個指令将啟動兩個可視化界面：google web toolkit development shell（見圖2）和gwt内置的gwt應用浏覽器（見圖3），gwt應用浏覽器中将顯示”hello world！”例子的初始界面，如果我們點選界面上的”click me”按鈕，按鈕後面将會顯示”hello world!”字元串（見圖4），如果再次單擊頁面上的”click me”按鈕，按鈕後面的”hello world！”字元串會消失。
要将gwt應用編譯成ajax應用，我們可以執行helloworld-compile.cmd。
指令運作時，界面上将會顯示下面的内容。
其中的第一行顯示生成的ajax應用位于c:\helloworld\www\org.vivianj.gwt.helloworld目錄下。
從上面的圖中我們可以看到，新生成的www目錄下有一個名為org.vivianj.gwt.helloworld的目錄，它的命名規則是gwt主類全名(org.vivianj.gwt.client.helloworld)去掉其中的”client.”。
org.vivianj.gwt.helloworld目錄下的helloworld.html檔案就是”hello world！”例子對應的頁面，以.cache.html字尾結尾的檔案就是”hello world！”例子中對應的ajax代碼部分，而gwt.js檔案則是gwt提供的、ajax代碼中需要用到的javascript公共函數。其他還有些輔助檔案。
運作helloworld-compile.cmd後，gwt應用就已經被編譯成ajax應用了，不再依賴于jdk和gwt環境，而僅僅依賴于浏覽器。 我們打開ie浏覽器，打開c:\helloworld\www\org.vivianj.gwt.helloworld\helloworld.html檔案，就可以看到”hello world！”例子在web模式下的運作效果（見圖6），單擊頁面上的”click me”按鈕，按鈕後面會出現”hello world！”字元串（見圖7），如果再次單擊頁面上的”click me”按鈕，按鈕後面的”hello
world！”字元串會消失。
上面的步驟中，我們已經完成第一個gwt應用的編譯和測試，下面我們來詳細的介紹一下gwt應用開發過程中涉及的幾個檔案：顯示頁面helloworld.html、主類helloworld和配置檔案helloworld.gwt.xml。
gwt應用中的html内容必須存放在public目錄下，public目錄的全路徑是”org\vivianj\gwt\ublic”，是将主類helloworld的包名”org.vivianj.gwt.client”中的client替換為”public”後形成的目錄結構。
我們将主要介紹helloworld.html中和gwt相關的内容，helloworld.html檔案的全部内容見清單1。
在helloworld.html檔案的第24行，我們使用meta标簽指定了本頁面和gwt子產品” org.vivianj.gwt.helloworld”之間的聯系，meta标簽的name屬性是不變的，而content屬性則是gwt主類全名(org.vivianj.gwt.client.helloworld)去掉其中的”client.”後的結果。
在helloworld.html檔案的第40行，我們使用script标記引入gwt工具提供的預設函數庫。根據html語言的規定，我們可以選擇在<head></head>之間加入這行代碼，也可以選擇在<body></body>之間加入這段代碼。gwt建議在<head></head>之間加入這行代碼，以便獲得稍微快一些的起動速度。
在helloworld.html檔案的第56行，我們使用td标簽定義了兩個相鄰的表格單元格，他們分别命名為”slot1”和”slot2”，根據”helloworld!”例子的要求，名為”slot1”的單元格中應該顯示按鈕，而名為”slot2”的單元格中則根據情況決定顯示”helloworld!”字元串或者不顯示任何内容。 我們将在主類helloworld.java的源代碼中使用rootpanel.get(“slot1”)來獲得對該單元格的引用，請參考下面的”主類helloworld”部分的說明。
在helloworld.html的第43行，我們使用iframe标簽來設定目前頁支援曆史功能，iframe的屬性必須和上面的内容保持一緻，否則将不會起到任何效果。
清單1 src\org\vivianj\gwt\public\public\helloworld.html
主類helloworld必須繼承自com.google.gwt.core.client.entrypoint類，并且覆寫其public void onmoduleload()方法。 在onmoduleload()方法中，我們使用gwt中提供的預設顯示元件(比如button)群組裝元件(比如verticalpanel)來設計需要顯示的界面，所有這些元件都位于com.google.gwt.user.client.ui包下面。這些元件的命名規則和java awt的命名規則基本類似，使用方式也和awt的基本一緻，不過gwt中提供了不少的新組建可供選擇，比如可以直接用verticalpanel來實作垂直方向的布局管理。
helloworld.java中的19和20行，就聲明了button和label兩個顯示元件。
onmoduleload()方法中，我們需要把生成的顯示元件或者組裝組建加入到顯示頁面的對應顯示區域。首先，我們需要在頁面上使用id屬性為顯示區域指定唯一的名稱(參見清單1中的56行)。com.google.gwt.user.client.ui.rootpanel的靜态方法get可以根據傳入的字元串參數（參數值就是顯示區域的id屬性）擷取頁面上對應的顯示區域。 helloworld.java的36、37行，就使用了rootpanel的get方法分别獲得頁面上id為”slot1”、”slot2”的顯示區域，然後調用add方法将生成的button和label對象加入到顯示區域中。
ajax最重要的功能就是為使用者提供更好的互動體驗，gwt中使用和awt中相同的事件監聽機制完成用戶端事件監聽，gwt中支援的listener接口包括changelistener、clicklistener等。我們可以通過各種各樣的listener接口獲得使用者界面上所發生的動作，通過處理這些動作來完成對應業務邏輯。
helloworld.java中的第22行~29行的内容就實作了一個clicklistender接口，并且提供了對應的onclick方法實作，用于處理按鈕點選後的業務邏輯（判斷是否需要顯示”hello world!”字元串），然後調用button對象的addclicklistener方法增加監聽器。
helloworld類的全部源代碼内容見清單2。
清單2 src\org\vivianj\gwt\client\helloworld.java
配置檔案中包括兩個元素。inherits元素地設定gwt應用的繼承資訊，而entry-point元素的class屬性則用于設定設定gwt應用的主類。
清單3 src\org\vivianj\gwt\helloworld.gwt.xml
ajax是目前熱門的web應用開發技術，java是企業應用開發中的主流技術，gwt架構将這兩種技術合二為一，是我們能夠應用java語言來開發ajax，在保留ajax技術的優點基礎上，解決了ajax應用開發、調試困難的缺點。 本文中介紹了gwt的基本知識、主要特性，提供了”helloworld！”例子說明使用java和gwt架構開發ajax應用的開發、編譯、測試過程，并且通過對”helloworld！”例子中涉及檔案的分析，講解了使用gwt架構開發ajax應用的技術細節和限制條件。