簡介： Google Web Toolkit (GWT) 是一個可以使用 Java 代碼開發(fā)具有 Ajax 功能的應(yīng)用框架。使用 GWT，開發(fā)人員可以更加高效地開發(fā)和部署主流 Web 應(yīng)用程序。GWT Designer 是 Google 新推出的可視化開發(fā)插件，大大簡化了界面開發(fā)工作。本文將結(jié)合 GWT Designer，以一個小型 Web 應(yīng)用系統(tǒng)為例，對基于 GWT 的 Web 應(yīng)用開發(fā)進(jìn)行完整的介紹。包括開發(fā)環(huán)境的搭建、數(shù)據(jù)通信以及應(yīng)用部署等方面。

GWT 簡述以及 GWT 開發(fā) Web 應(yīng)用程序的優(yōu)勢

Ajax 及基于 Ajax Web 應(yīng)用程序開發(fā)簡述

Ajax 即“Asynchronous JavaScript and XML”（異步 JavaScript 和 XML），是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過此技術(shù)，軟件開發(fā)人員可以在最短的時間內(nèi)開發(fā)出更小，更快的，更友好的 Web 應(yīng)用系統(tǒng)。在傳統(tǒng)的 web 應(yīng)用中，用戶填寫并提交表單 (form)，在提交表單時就向 web 服務(wù)器發(fā)送一個處理請求。服務(wù)器接收用戶請求并處理傳來的表單，并將結(jié)果以一個新的頁面返回給用戶。這種處理方式浪費了許多帶寬，因為在前后兩個頁面中的大部分 HTML 代碼往往是相同的。另外，由于每次交互都需要向服務(wù)器發(fā)送請求，交互的響應(yīng)時間就依賴于服務(wù)器的響應(yīng)時間，從而導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用程序慢得多。通過 Ajax 技術(shù)，使用 JavaScript 可以創(chuàng)建 XMLHttpRequest 對象來直接與服務(wù)器進(jìn)行通信，在不重載頁面的情況下完成與 Web 服務(wù)器的數(shù)據(jù)交換。由于在通訊的過程中傳輸?shù)臄?shù)據(jù)是開發(fā)人員可控制的有用數(shù)據(jù)，消除了冗余的 HTML 代碼，減少了帶寬占用，在很大程度上提高了 Web 應(yīng)用系統(tǒng)的響應(yīng)速度。另外，由于使用 XMLHttpRequest 對象作為后臺通訊工具，頁面不需要全部刷新，只需要刷新局部改變的數(shù)據(jù)，從而實現(xiàn)類似于桌面應(yīng)用的效果。

使用 GWT 進(jìn)行 Ajax Web 應(yīng)用程序開發(fā)的優(yōu)勢

Google Web Toolkit（GWT）是 Google 公司推出的一款基于 Java 的 Ajax Web 應(yīng)用程序開發(fā)框架。在此框架上，開發(fā)人員可以輕松的創(chuàng)建 Ajax Web 應(yīng)用程序，而不必關(guān)注 JavaScript 的編寫和調(diào)試，實現(xiàn)在瀏覽器中輕松地構(gòu)建類似桌面應(yīng)用般的程序。

使用面向?qū)ο蟮?Java 代替 JavaScript，大幅度提高了開發(fā)效率。

JavaScript 是一種腳本語言，它可以用來制作與網(wǎng)絡(luò)無關(guān)的，用戶交互復(fù)雜軟件。它是一種基于對象 (Object Based) 和事件驅(qū)動 (Event Driver) 的編程語言。但是 JavaScript 無法實現(xiàn)真正的繼承關(guān)系（注：使用放在 prototype 對象里，雖然可以實現(xiàn)兩個實例對象中的數(shù)據(jù)共享，模擬繼承，但這其實并不是真正的繼承，更無法實現(xiàn)多層繼承關(guān)系）。因此，使用 JavaScript 來完成 Ajax 開發(fā)，非常耗費時間，代碼重復(fù)使用率低，難以調(diào)試，后期維護工作量巨大。

相比之下，Java 是一種真正的面向?qū)ο蟮恼Z言?；?Java 這一面向?qū)ο蟮恼Z言，GWT 將真正的軟件工程方法帶入到 Ajax 應(yīng)用程序開發(fā)當(dāng)中。GWT 中提供了豐富的的基礎(chǔ)組件，使開發(fā)人員從繁雜而又重復(fù)的 Ajax 構(gòu)建工作中解放出來，更加專注于業(yè)務(wù)層和程序性能的優(yōu)化。開發(fā)人員通過使用 GWT 可以快速地構(gòu)建和維護復(fù)雜的、高性能的 JavaScript 應(yīng)用程序。

GWT 提供了友好的界面，減少了 Web 應(yīng)用程序的美化工作

由于通用的組件不夠友好，導(dǎo)致 Web 開發(fā)的同時有大量的美化工作需要處理，所以以往的 Web 開發(fā)，都需要專業(yè)美工來協(xié)助完成。GWT 提供的豐富的組件庫使用戶可以很容易的開發(fā)出極具視覺享受的 UI 界面。如圖 1 所示。

圖 1. GWT 消息框

上圖中為 Ext GWT 提供的消息框，下面為原始的消息框。通過比較可以看到，Ext GWT 的消息框明顯更加友好。按照傳統(tǒng)的 Web 開發(fā)方式要實現(xiàn)具有 Ext GWT 樣式的消息框，還要付出相當(dāng)一些額外的美化工作。而這只是一個非常簡單的示例， GWT 所帶來的具有友好界面體驗的組件遠(yuǎn)不止此。

GWT Designer 簡介

GWT Designer 是 Google 最新推出的，可以輔助開發(fā)者在 Eclipse 中快速構(gòu)建 GUI 和 GWT/Java 應(yīng)用的高效開視化開工具。使用 GWT Designer，開發(fā)人員只需通過簡單拖拽可視化組件，即可完成組件的添加而無須繁瑣的重復(fù)編碼，同時使用 GWT Designer 也可以最大限度地完成布局管理等界面設(shè)計的工作。

基于 Eclipse 的 GWT 開發(fā)環(huán)境的搭建

Eclipse 是一個用 Java 開發(fā)的開源 IDE，由包括 IBM 在內(nèi)的主要幾家技術(shù)型公司所支持。使用 Eclipse 可以使開發(fā)者以高效的方式編寫、組織、測試和調(diào)試軟件。Eclipse 集成了對 GWT 腳本的支持，在 Eclipse 環(huán)境下使用 GWT 開發(fā) Ajax Web 應(yīng)用程序，無論是代碼編寫、組織、測試還是調(diào)試，都能夠獲得較高的生產(chǎn)力?；?Eclipse 的 GWT 開發(fā)環(huán)境是業(yè)界公認(rèn)的，最佳的 GWT 開發(fā)環(huán)境。

搭建 Eclipse 開發(fā)環(huán)境

搭建 Eclipse 開發(fā)環(huán)境很簡單。只需要從 http://www.eclipse.org/downloads/下載后解壓即可使用。Eclipse 的版本很多，本文中將以 Eclipse Java EE IDE for Web Developers(Version: Helios Release) 為例進(jìn)行說明。

搭建 GWT 開發(fā)環(huán)境

在 Eclipse 中安裝 GWT，步驟如下：

選擇 Eclipse 的菜單 Help | Install New Software …， 然后在 Work with 中輸入 http://dl.google.com/eclipse/plugin/3.6，在出現(xiàn)的列表中選擇 Google App Engine Tools for Eclipse(required) 和 SDKs，之后點擊”Next”并完成安裝 。

安裝完成后重啟 Eclipse.

基于 Eclipse 的 GWT Designer 開發(fā)環(huán)境的搭建

搭建 GWT Designer 開發(fā)環(huán)境

在 Eclipse 中安裝 GWT Designer，步驟如下：

選擇 Eclipse 的菜單 Help | Install New Software …， 然后在 Work with 中輸入 http://dl.google.com/eclipse/inst/d2gwt/latest/3.6，在出現(xiàn)的列表中選擇 GWT Designer 和 WindowBuilder Engine (required)，之后點擊按鈕”Next”并完成安裝 。

安裝完成后重啟 Eclipse.

下載 Ext GWT(GXT)（http://www.sencha.com/products/extgwt/download/），解壓后將其中相應(yīng)的 jar（本例中選用的是 gxt-2.2.4-gwt2.jar）加入到 ClassPath 中。

建立帶有 GWT Designer 支持的 Web 應(yīng)用

GWT Designer 安裝之后，就可以建立帶有 GWT Designer 支持的 Web 應(yīng)用了，建立此 Web 應(yīng)用的步驟如下：

選擇 Eclipse 的菜單 File | New | Other。彈出如圖 2 所示的對話框。

圖 2.創(chuàng)建 GWT Designer 支持的 Web 應(yīng)用

在圖２的對話框中選擇 WindowBuilder | GWT Designer | Model | GWT Java Project。然后選擇按鈕”Next” ，將會彈出 Create a Java Project 對話框。

在 Create a Java Project 對話框中的 Project Name 中輸入項目名稱如 : EmployeeManagement，然后點擊按鈕”Next” ，將會彈出 New GWT Module 對話框：

在 New GWT Module 對話框中的 Module name 中輸入 EmployeeManagement，在 Package name 中輸入 com.employeemanagement。在 Configure for third-party toolkit 中選擇 Ext GWT(GXT)。點擊按鈕”Finish” .

如果之前沒有配置 Ext GWT(GXT) 的路徑，此時會彈出一個對話框提示輸入 GXT 的路徑，這里直接選擇已經(jīng)下載的 GXT 包的存放路徑即可。

GWT Designer 各組件簡介及舉例

帶有 GWT Designer 支持的 Web 應(yīng)用建立以后，右鍵點擊所需編輯的類文件如 employeeViewer.java 類，然后選擇菜單 Open With | GWT Designer。 在右面的區(qū)域中選擇 Design 選項卡，就可以看到 GWT、 GXT 支持的所有組件，表１給出了常用的 GWT 和 GXT 組件。

表 1. GWT、GXT 常用組件列表

GWT 組件GXT 組件功能描述HorizontalPanelRowLayout，Horizontal用于橫向單行排列組件內(nèi)部組件的布局組件VerticalPanelRowLayout，Vertical用于豎向向單列排列組件內(nèi)部組件的布局組件FlexTable 用于定位的布局組件，類似于 HTML 中 TableButtonButton按鈕組件LabelText標(biāo)簽組件TextBoxTextField輸入框組件RadioButtonRadio單選按鈕組件ChekcBoxCheckBox多選按鈕組件ListBoxLsitFied列表組件ComboComboBox下拉列表組件Image 圖片組件Tree/TreeItemTree/TreeItem樹結(jié)構(gòu)組件MenuBar/MenuItemMenuBar/MenuBarItem主菜單組件 Menu/MenuItem右鍵菜單組件

在 Designer 中可以很方便地使用這些組件，以下是一個使用 Button 按鈕的例子。

在前面創(chuàng)建的例子中，右擊類文件 EmployeeManagement.java 選擇 Open With | GWT Designer.

在右面的 Tab 頁中選擇 Design 選項卡。

在 Palette 中選一個需要創(chuàng)建的組件，放在設(shè)計窗口上，本例中選擇了 GXT 的 button 按鈕，如圖 3 所示。

圖 3.創(chuàng)建 button 按鈕

組件創(chuàng)建后可在 Properties 區(qū)域修改其樣式屬性，比如將 button 的標(biāo)題改為 test。

圖 4.修改 button 按鈕的樣式屬性

添加事件處理代碼 :

在 Properties 中選擇顯示按鈕 。然后，在事件列表中雙擊 ComponentSelected 事件，可以看到 Designer 已經(jīng)創(chuàng)建好了此事件的外圍代碼，此時，光標(biāo)也已經(jīng)定位到 ComponentSelected 事件的代碼上。接下來只需要根據(jù)實際情況添加具體的業(yè)務(wù)代碼即可。

使用 Session

Session 在交互中的作用

Web 應(yīng)用是基于 HTTP 協(xié)議的，而 HTTP 協(xié)議是一種無狀態(tài)協(xié)議。也就是說，用戶從一個頁面跳轉(zhuǎn)到另一個頁面時會重新發(fā)送一次 HTTP 請求，而服務(wù)端在返回響應(yīng)的時候卻無法獲知該用戶在請求當(dāng)前頁面之前都做了些什么。顯然，HTTP 協(xié)議這樣的限制根本無法滿足 Web 應(yīng)用對動態(tài)化的需求，于是 Session 便應(yīng)運而生。使用 Session 可以存儲特定用戶會話所需的信息。這樣，當(dāng)用戶在應(yīng)用程序的 Web 頁之間跳轉(zhuǎn)時，存儲在 Session 對象中的變量將不會丟失，而是在整個用戶會話中一直存在下去。

當(dāng)用戶請求來自應(yīng)用程序的 Web 頁時，如果該用戶還沒有 Session，則 Web 服務(wù)器將自動創(chuàng)建一個 Session 對象。當(dāng)會話過期或被放棄后，服務(wù)器將終止該 Session?？梢?#xff0c;使用 Session 是 Web 開發(fā)中必不可少的。

Session 的使用

GWT 中的 RPC 機制可以直接使用 session，但要確保使用 session 的類繼承自 com.google.gwt.user.server.rpc.RemoteServiceServlet，同時需要導(dǎo)入以下兩個包：

javax.servlet.http.HttpServletRequest; 
javax.servlet.http.HttpSession;

之后就可以通過下面的方法設(shè)置或讀取 session 中的信息了。

清單 1. 存取 Session 變量

 HttpServletRequest request = this.getThreadLocalRequest(); 
 HttpSession session = request.getSession(); 

 // Set the variable USERNAME into session 
 session.setAttribute("USERNAME", ”yuexiaopeng”); 

 // Get the variable USERNAME from session 
 String name = session.getAttribute("USERNAME”);

使用 RPC 實現(xiàn)與后臺數(shù)據(jù)通信

作為 Ajax 的應(yīng)用開發(fā)框架，GWT 使得實現(xiàn)客戶端和服務(wù)器的通信變得十分簡單，特別是異步通信，而這一功能就是通過 RPC 實現(xiàn)的。以下給出實現(xiàn)異步通信的具體步驟。

客戶端定義同步服務(wù)接口

客戶端用來定義異步通信的同步接口需要繼承自 RemoteService。

清單 2.

import com.google.gwt.user.client.rpc.RemoteService; 
 import com.google.gwt.user.client.rpc.RemoteServiceRelativePath; 

 @RemoteServiceRelativePath("CheckUserService") 
 public interface CheckUserService extends RemoteService 
 { 
	 boolean checkUser(String userName, String passWord); 
 }

服務(wù)器端實現(xiàn)上述服務(wù)接口

清單 3.為了實現(xiàn)異步通信，在服務(wù)器端實現(xiàn)服務(wù)接口的類需要繼承自 RemoteServiceServlet

 import com.employeemanagement.client.login.service.CheckUserService; 
 import com.google.gwt.user.server.rpc.RemoteServiceServlet; 

public class CheckUserServiceImpl extends RemoteServiceServlet        implements CheckUserService
 { 
	 public boolean checkUser(String userName, String passWord) 
	 { 
          // Do related things 
	 } 
 }

客戶端定義上述服務(wù)的異步接口

在進(jìn)行遠(yuǎn)程調(diào)用之前，還必須創(chuàng)建一個客戶端的異步接口，而這個異步接口的定義要基于之前的同步接口并且和之前的同步接口同處一個客戶端的包中。對于異步接口的方法而言，沒有返回類型，參數(shù)列表中除了給出同步接口方法中的參數(shù)列表以外，還需要傳入一個回調(diào)對象以便異步調(diào)用完成后通知該對象進(jìn)行相應(yīng)的處理。異步接口的命名則必須是同步接口名后加上 Async 后綴。

清單 4.

import com.google.gwt.user.client.rpc.AsyncCallback; 

 public interface CheckUserServiceAsync 
 { 
	 void checkUser(String userName, String passWord, 
                    AsyncCallback<Boolean> callback); 
 }

在 web.xml 加上 Servlet 的配置信息

清單 5.

<servlet> 
  <servlet-name>CheckUserService</servlet-name> 
 <servlet-class>com.employeemanagement.server.login.service.CheckUserServiceImpl 
 </servlet-class> 
 </servlet> 
 <servlet-mapping> 
  <servlet-name>CheckUserService</servlet-name> 
  <url-pattern>/com.employeemanagement.EmployeeManagement/CheckUserService 
  </url-pattern> 
 </servlet-mapping>

客戶端進(jìn)行 RPC 調(diào)用

主要的接口和配置完成后，客戶端就可以按照以下步驟來通過 RPC 實現(xiàn)和后臺的異步通信：

● 使用 GWT.create（）初始化服務(wù)接口 ;

● 必要時，使用 ServiceDefTarget 為 Service 代理描述 Service 接入點的 URL ；

● 創(chuàng)建一個異步回調(diào)對象以供 RPC 完成時調(diào)用；

● 發(fā)出 RPC 請求。

有關(guān) RPC 更多的介紹可以閱讀 參考資料。

遠(yuǎn)程調(diào)用的數(shù)據(jù)載體

遠(yuǎn)程調(diào)用時，客戶端和服務(wù)器端往往要傳遞大量的信息，這就需要一種能包含各種數(shù)據(jù)的數(shù)據(jù)載體，比如 JSON 或 XML。當(dāng)然也可以是用序列化的 Java 對象，但是對于夸應(yīng)用的數(shù)據(jù)傳輸推薦使用公用的載體：JSON 或 XML。 以下簡要介紹在 GWT 中如何使用 JSON 和 XML 進(jìn)行數(shù)據(jù)的傳輸。

使用 JSON 傳輸數(shù)據(jù)

JSON 的全稱是 JavaScript Object Notation，是一種輕量級的數(shù)據(jù)交換格式。JSON 與 XML 具有相同的特性，例如易于人工編寫和閱讀，易于機器生成和解析。但是采用 JSON 的數(shù)據(jù)傳輸比采用 XML 的數(shù)據(jù)傳輸具有更高的有效性。JSON 完全獨立于編程語言，并且使用文本格式保存。關(guān)于 JSON 更多的了解請閱讀 參考資料。

在 GWT 中使用 JSON 作為數(shù)據(jù)傳輸格式的配置步驟如下：

1）在模塊配置文件 .gwt.xml 中添加對 HTTP 和 JSON 的引用。

在 <inherits name=’com.google.gwt.user.User’/> 之后添加

<inherits name=”com.google.gwt.json.JSON”/>

2）在客戶端 / 服務(wù)器端建立 JSON 數(shù)據(jù)并將其作為 RPC 的參數(shù)傳輸?shù)搅硪欢恕?/p>

清單 6. 在客戶端建立 JSON 數(shù)據(jù)

import com.google.gwt.json.client.* 

 JSONObject jsonObject = new JSONObject(); 
 JSONString value = new JSONString("yuexiaopeng"); 
 jsonObject.put("name", value); 

 JSONArray arrayValue = new JSONArray(); 
 arrayValue.set(0, new JSONString("item0")); 
 arrayValue.set(1, new JSONString("item1")); 
 jsonObject.put("array", arrayValue);

本例中建立的 JSON 數(shù)據(jù)如下：

{name: "yuexiaopeng",  array: {"item", "item"}}

JSON 對象建立后，調(diào)用 JSONObject 的 toString() 方法將其轉(zhuǎn)換為 String 做為 RPC 的一個參數(shù)，即可傳到服務(wù)端。

3）在服務(wù)器 / 客戶端解析 JSON 格式的數(shù)據(jù)。

清單 7. 在服務(wù)器端解析客戶端傳送的 JSON 數(shù)據(jù)

import org.json.* 

 JSONObject jsonObject = new JSONObject(jsonBody); 
 String name = jsonObject.getString("name"); 
 System.out.println("name is:" + name); 
 JSONArray jsonArray = jsonObject.getJSONArray("array"); 
 for (int i = 0; i < jsonArray.length(); i++) 
 { 
   System.out.println("item " + i + " :" + jsonArray.getString(i)); 
 }

這里 jsonBody 為服務(wù)器端從客戶端接收到的包含 JSON 信息的字符參數(shù)。當(dāng)然服務(wù)端也可根據(jù)需要建立 JSON 對象返回給客戶端，然后客戶端再做解析。

使用 XML 傳輸數(shù)據(jù)

XML（eXtensible Markup Language）為可擴展的標(biāo)記語言，是一套定義語義標(biāo)記的規(guī)則。用戶可以根據(jù)實際需要定義自己的新的標(biāo)記語言，并為這個標(biāo)記語言規(guī)定其特有的一套標(biāo)簽。XML 易于閱讀和編寫，更重要的是其可以跨平臺跨語言交換數(shù)據(jù)，使其成為在不同的應(yīng)用間交換數(shù)據(jù)的理想格式。關(guān)于 XML 更多的了解請閱讀 參考資料。

在 GWT 中使用 XML 作為數(shù)據(jù)傳輸格式，其本質(zhì)與使用 JSON 一樣，需要以下幾步 :

1）在模塊配置文件 .gwt.xml 中添加對 HTTP 和 XML 的引用。

在 <inherits name=’com.google.gwt.user.User’/> 之后添加：

<inherits name =”com.google.gwt.xml.XML”/>

2）在客戶端 / 服務(wù)器端建立 XML 數(shù)據(jù)并作為 RPC 的參數(shù)傳輸?shù)搅硪欢恕?/p>

清單 8. 在服務(wù)器端建立 XML 數(shù)據(jù)

import org.w3c.dom.* 

 Document xmlDoc = new DocumentImpl(); 
 // create the root element 
 Element rootElement = xmlDoc.createElement("employees"); 
 Element employeeItem = xmlDoc.createElement("employee"); 
 employeeItem.setAttribute("ID", "0008"); 
 Element Name = xmlDoc.createElement("name"); 
 Name.appendChild(xmlDoc.createTextNode("yuexiaopeng")); 
 employeeItem.appendChild(Name); 
 rootElement.appendChild(employeeItem); 
 xmlDoc.appendChild(rootElement); 

 //convert XML object to string 
 Document document = rootElement.getOwnerDocument(); 
 DOMImplementationLS domImplLS = (DOMImplementationLS) document.getImplementation(); 
 LSSerializer serializer = domImplLS.createLSSerializer(); 
 String result = serializer.writeToString(document);

清單 9. 本例中建立的 XML 數(shù)據(jù)

<employees> 
	 <employee ID = "0008"> 
		 <name> 
			 yuexiaopeng 
		 </name> 
	 </employee> 
 </employees>

3）在服務(wù)器 / 客戶端解析 XML 格式的數(shù)據(jù)。

清單 10. 客戶端解析接收到的 XML 數(shù)據(jù)

 import com.google.gwt.xml.client.* 

 Document employeeDom = XMLParser.parse(xmlText); 
 Element employeeElement = employeeDom.getDocumentElement(); 
 XMLParser.removeWhitespace(employeeElement); 
 NodeList employees = employeeElement.getElementsByTagName("employee"); 
 Element employee = (Element) employees.item(0); 

 NamedNodeMap attributes = employee.getAttributes(); 
 Node attribute = attributes.getNamedItem("ID"); 
 String ID = attribute.getNodeValue(); 

 String name = employee.getElementsByTagName("name").item(0).getFirstChild() 
				 .getNodeValue();

這里 xmlText 為服務(wù)器端從客戶端接收到的包含 xml 信息的字符串參數(shù)。當(dāng)然客戶端也可先建立 XML 對象再提交給服務(wù)器端，然后服務(wù)器端再做解析。

應(yīng)用實例：簡單信息查詢系統(tǒng)

前面已經(jīng)詳細(xì)敘述了如何使用 GWT Designer 進(jìn)行 UI 設(shè)計，如何使用 JSON 或 XML 傳輸數(shù)據(jù)，以及如何創(chuàng)建和使用 RPC 通信。本節(jié)將使用前面介紹的知識，完成一個簡單雇員信息查詢系統(tǒng)。雇員信息存儲在數(shù)據(jù)庫中。本系統(tǒng)將根據(jù)選中節(jié)點包含的條件查詢相應(yīng)雇員的信息，結(jié)果以表格的形式展現(xiàn)給用戶。此系統(tǒng)包含兩個頁面：登陸頁面和查詢頁面。登陸頁面根據(jù)輸入的用戶名和密碼驗證當(dāng)前用戶是否合法；查詢頁面分為左右兩部分，左邊以樹的形式包含多個查詢結(jié)點，用戶選擇查詢結(jié)點，將會在右邊以表格的形式展現(xiàn)選中結(jié)點的查詢結(jié)果。

使用 GWT Designer 進(jìn)行界面設(shè)計

本系統(tǒng)包含了兩個頁面，一個登錄頁面，一個信息查詢頁面。為了頁面統(tǒng)一，在此創(chuàng)建了一個基類 CommonViewport。CommonViewport 包含了用于顯示本系統(tǒng)名稱的標(biāo)題。后面創(chuàng)建兩個頁面后都將繼承自 CommonViewport。這樣就包含了顯示標(biāo)題的 Header。

登錄頁面的設(shè)計：

創(chuàng)建一個新類 LoginView，使其繼承自 LayoutContainer。

右擊選擇 Open With | GWT Designer.

在 Empty LayoutContainer 中添加一個 verticalPanel。

在 verticalPanel 中添加 3 個 horizontalPanel。

在最上面的 verticalPanel 添加一個 Label 和一個 TextBox， 將 Label 的 text 屬性改為 User Name:

在最中間的 verticalPanel 添加一個 Label 和一個 TextBox， 將 Label 的 text 屬性改為 Password:

在最下面的 verticalPanel 添加一個 Button，將其 text 屬性改為 Login

右擊 Button 選擇菜單：Add event handler | click(com.google.gwt.event.dom.client.ClickHandler) |>圖 5.登錄頁面

信息查詢頁面的設(shè)計：

創(chuàng)建一個新類 : LoginFrame，使其繼承自 CommonViewport。

在其上添加一個 ContentPanel，放在中心位置。再增加一個 ContentPanel 放在最左邊。

設(shè)置左邊的 ContentPanel 的屬性如下：

LayoutData | collapsible : true;

LayoutData | floatable : true;

LayoutData | split : true;

collapsible : true;

設(shè)置中心的 ContentPanel 的屬性如下：

collapsible : true;

在左邊的 ContentPanel 上放一個 flexTable， 里面添加一個 Label，將其 text 屬性改為 input search text:

在左邊的 ContentPanel 上放一個 verticalPanel， 上面添加一個 treePanel. 完成后結(jié)果如圖 6 所示。

圖 6.信息查詢頁面

重命名組件使得代碼可讀性更強。 至此，使用 UI Designer 設(shè)計 UI 的工作已經(jīng)完成。后面要用添加一些 abstract 組件和一些需要動態(tài)綁定數(shù)據(jù)的組件，需要添加代碼來完成。

添加代碼，為 TreePanel 添加一個存儲數(shù)據(jù)的模型 store， 同時為葉子節(jié)點指定圖標(biāo)。

至此，信息查詢頁面的設(shè)計已經(jīng)完成，再次用 GWT Designer 打開它，其結(jié)果如圖 7 所示。

圖 7.信息查詢頁面

后臺 GWT 代碼

登錄頁面：

實現(xiàn)本文前面提到的服務(wù)器端的 checkUser 方法。添加詳細(xì)代碼以完成對當(dāng)前用戶的檢查。

信息查詢頁面：

信息查詢頁面的主要是根據(jù)用戶選擇的查詢節(jié)點，從數(shù)據(jù)庫查詢相應(yīng)的記錄，以 XML 的形式返回數(shù)據(jù)給前端頁面。期間的數(shù)據(jù)通信也是以 RPC 方式進(jìn)行。

在信息查詢頁面，當(dāng)用戶在左側(cè) Tree 上選擇不同查詢節(jié)點時，根據(jù)其選定的節(jié)點查詢相應(yīng)的數(shù)據(jù)，這需要在 Tree 的 selectionChanged 事件中，調(diào)用 RPC 進(jìn)行通信。

至此，一個簡單的雇員信息查詢系統(tǒng)就全部完成了。運行后首先會出現(xiàn)登錄頁面，當(dāng)用戶輸入有效的用戶名和密碼后，就進(jìn)入到信息查詢頁面。在左側(cè)樹中選擇一個節(jié)點，相應(yīng)的結(jié)果將顯示在右側(cè)的面板中。

圖 8.信息查詢結(jié)果

發(fā)布 GWT Application.

本節(jié)將結(jié)合實際介紹如何發(fā)布前面已經(jīng)完成 GWT 應(yīng)用。在完成對上述應(yīng)用的部署之前，還需要澄清一些概念。

基本概念

主機模式

在前面的幾節(jié)中，我們已經(jīng)使用 GWT Designer 設(shè)計完成了一個簡單實用的 Web 應(yīng)用程序。但是，對于一個 web 應(yīng)用來說，事情還不至于此。這是因為，在之前的開發(fā)中，我們一直使用的是主機模式（hosted）來開發(fā)、調(diào)試和運行這個 web 應(yīng)用。所謂主機模式或者稱為 GWT 的托管模式，是指 GWT 有一個內(nèi)嵌的瀏覽器 ( 或者瀏覽器插件 )，開發(fā)人員可以在 web 應(yīng)用開發(fā)的過程中，在 Java 開發(fā)環(huán)境中運行和調(diào)試 web 應(yīng)用程序?？梢钥闯?#xff0c;在 web 應(yīng)用部署之前，開發(fā)人員會將大多數(shù)的時間用于主機模式。在開發(fā)過程中，使用 GWT 的主機模式，瀏覽器可以通過刷新操作立即查看代碼的變更，而無需編譯為 JavaScript 或部署到服務(wù)器。也就是說 Java 虛擬機實際上是在執(zhí)行編譯后的 Java 字節(jié)碼，并且使用 GWT 將結(jié)果輸出到一個內(nèi)嵌的瀏覽器 ( 或者瀏覽器插件 ) 窗口，從而大大提高了開發(fā)和調(diào)試應(yīng)用程序的效率。

Web 模式

與主機模式相對應(yīng)的是 Web 模式，當(dāng)從開發(fā)階段轉(zhuǎn)到測試或生產(chǎn)階段時，應(yīng)用程序?qū)⒃?Web 模式下運行。所謂 Web 模式是指從普通的瀏覽器來訪問應(yīng)用，在瀏覽器中應(yīng)用將以 JavaScript 運行。

部署應(yīng)用到 Web 服務(wù)器

主機模式下測試完成后，接下來需要為開發(fā)的應(yīng)用創(chuàng)建一個 Web 版本，以便可以將此應(yīng)用部署到通用的 Web 服務(wù)器以供用戶通過普通瀏覽器進(jìn)行訪問。以下將逐一介紹從編譯至部署的各個步驟。

編譯客戶端文件

在 Eclipse IDE 開發(fā)環(huán)境中，可以通過下面的步驟來完成 GWT 的編譯

選中 GWT 模塊配置文件（EmployeeManagement.gwt.xml），點擊右鍵選擇“Google Web Toolkit”， 再選擇“Deploy module”。

根據(jù)對話框上的信息提示，指定相應(yīng)的參數(shù)：包括將要生成的 war 文件名、war 文件名的存放路徑、GWT 編譯選項和 GWT 編譯所用的最大內(nèi)存設(shè)置?？梢酝ㄟ^ Browser 選擇 war 文件的存放路徑，可以是本地路徑也可以是網(wǎng)絡(luò)路徑。

按下 OK 后，將自動完成 GWT 編譯并且產(chǎn)生以下輸出：

● 將用以部署到服務(wù)器上的 war 文件

● 用來執(zhí)行編譯部署的 build.xml 文件

一旦生成了 build.xml 文件（該文件和模塊文件處于同一個文件夾下），后續(xù)就可以將此文件為模板，根據(jù)實際情況進(jìn)行修改以便更好的完成 GWT 編譯和部署的工作。如果需要重新編譯 war 文件，只需要右鍵點擊 build.xml 文件，選擇“Run As -> Ant Build”就可以了。

編譯完成后，GWT 會將所開發(fā)的客戶端 Java 代碼編譯成 JavaScript 語言格式。這樣一來，當(dāng)應(yīng)用在 Web 模式中啟動時，它將完全作為 JavaScript 運行，并且不需要任何瀏覽器插件或 Java 虛擬機，從而實現(xiàn)了對各種瀏覽器的完美支持。

客戶端文件編譯完成后，將會在當(dāng)前 project 目錄下產(chǎn)生一個 war 文件夾，其中存放了所有被編譯后的客戶端文件。在部署到 Web 服務(wù)器上時，只需要將此 war 文件夾中的文件拷貝到 Web 服務(wù)器相應(yīng)的部署目錄下即可。

部署到 Web Server

可以根據(jù)情況選擇喜歡的 Web Server。關(guān)于 Web Server 的介紹和配置，請閱讀 參考資料。配置好 Web Server 后，將上述 GWT 編譯后的 .war 文件拷貝到該 Web Server 部署目錄下，對 Jboss 來說就是 [ 安裝目錄 ]\server\default\deploy。

缺省情況下，Jboss 運行在端口 8080。本例中應(yīng)用程序的名稱為 EmployeeManagement，HTML 主頁為 EmployeeManagement.html，這樣就可以通過在瀏覽器的地址欄中輸入 http://<hostname>:8080/EmployeeManagement/ 來訪問部署好的應(yīng)用程序。

有關(guān) GWT 應(yīng)用開發(fā)和部署更多的介紹，可以閱讀 參考資料。

前景展望

GWT 以其基于 Java 的 Web 應(yīng)用程序框架，使得開發(fā)人員在瀏覽器中輕松地構(gòu)建類似桌面應(yīng)用般的程序，而無須關(guān)注 JavaScript 的編寫和調(diào)試。原本枯燥復(fù)雜的 Web 開發(fā)從此變的生動而且高效。可以說，相比這之前的 Web 應(yīng)用框架，GWT 代表的不只是一種技術(shù)上的改進(jìn)，更是一場 Web 應(yīng)用框架的革命，因為 GWT 的出現(xiàn)，完全打破了 Web 應(yīng)用程序的既有模式。

GWT Designer 是 Google 最新推出的可視化開發(fā)工具，可以使開發(fā)者人員在 Eclipse 中快速構(gòu)建 GUI 和 GWT/Java 應(yīng)用并將其作為 Web 應(yīng)用部署。相比較傳統(tǒng)的 web 開發(fā)，開發(fā)人員無需了解 JavaScript 就能開發(fā)出高質(zhì)量的 RIA 應(yīng)用。GWT Designer 支持流行的 widget 庫，如 Ext GWT（GXT）和 GWT-Ext，在最新版中還增加了對 Smart GWT 的支持（一個基于 GWT、擁有大量 widget 庫用于構(gòu)建 UI，同時能將 widget 綁定到服務(wù)器端以進(jìn)行數(shù)據(jù)管理的框架）。

可以預(yù)見，隨著 Web 應(yīng)用的快速發(fā)展，GWT 以其獨特的視角和高效靈活的處理方式，會不斷提供給開發(fā)人員更多更好的開發(fā)體驗。借助 GWT 及其相關(guān)插件所開發(fā)出來的最終產(chǎn)品，也必將更加的簡潔易用，深入人心。

參考資料

學(xué)習(xí)

• GWT 和 XML ：介紹如何在 GWT 項目中使用 XML 進(jìn)行數(shù)據(jù)傳輸。
• GWT 和 JSON ：介紹如何在 GWT 項目中使用 JSON 進(jìn)行數(shù)據(jù)傳輸。
• GWT 資源：這里有 Google 公司提供的 GWT 相關(guān)的各種資源，包含了大量的 GWT 使用教程和 GWT 資源下載。
• Communicate with a Server: Google 官方網(wǎng)站資料，詳細(xì)介紹了 GWT RPC 的原理和應(yīng)用細(xì)節(jié)。
• developerWorks Web development 專區(qū)：通過專門關(guān)于 Web 技術(shù)的文章和教程，擴展您在網(wǎng)站開發(fā)方面的技能。
• developerWorks Ajax 資源中心：這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
• developerWorks Web 2.0 資源中心，這是有關(guān) Web 2.0 相關(guān)信息的一站式中心，包括大量 Web 2.0 技術(shù)文章、教程、下載和相關(guān)技術(shù)資源。您還可以通過 Web 2.0 新手入門 欄目，迅速了解 Web 2.0 的相關(guān)概念。
• 查看 HTML5 專題，了解更多和 HTML5 相關(guān)的知識和動向。