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

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

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

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

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

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

使用面向對象的 Java 代替 JavaScript，大幅度提高了開發(fā)效率。

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

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

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

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

圖 1. GWT 消息框

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

GWT Designer 簡介

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

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

Eclipse 是一個用 Java 開發(fā)的開源 IDE，由包括 IBM 在內的主要幾家技術型公司所支持。使用 Eclipse 可以使開發(fā)者以高效的方式編寫、組織、測試和調試軟件。Eclipse 集成了對 GWT 腳本的支持，在 Eclipse 環(huán)境下使用 GWT 開發(fā) Ajax Web 應用程序，無論是代碼編寫、組織、測試還是調試，都能夠獲得較高的生產力?；?Eclipse 的 GWT 開發(fā)環(huán)境是業(yè)界公認的，最佳的 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) 為例進行說明。

搭建 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/），解壓后將其中相應的 jar（本例中選用的是 gxt-2.2.4-gwt2.jar）加入到 ClassPath 中。

建立帶有 GWT Designer 支持的 Web 應用

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

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

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

在圖２的對話框中選擇 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 的路徑，這里直接選擇已經下載的 GXT 包的存放路徑即可。

GWT Designer 各組件簡介及舉例

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

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

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

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

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

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

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

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

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

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

添加事件處理代碼 :

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

使用 Session

Session 在交互中的作用

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

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

Session 的使用

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

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

之后就可以通過下面的方法設置或讀取 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ù)據通信

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

客戶端定義同步服務接口

客戶端用來定義異步通信的同步接口需要繼承自 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); 
 }

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

清單 3.為了實現(xiàn)異步通信，在服務器端實現(xiàn)服務接口的類需要繼承自 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 
	 } 
 }

客戶端定義上述服務的異步接口

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

客戶端進行 RPC 調用

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

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

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

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

● 發(fā)出 RPC 請求。

有關 RPC 更多的介紹可以閱讀 參考資料。

遠程調用的數(shù)據載體

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

使用 JSON 傳輸數(shù)據

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

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

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

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

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

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

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

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ù)據如下：

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

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

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

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

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 為服務器端從客戶端接收到的包含 JSON 信息的字符參數(shù)。當然服務端也可根據需要建立 JSON 對象返回給客戶端，然后客戶端再做解析。

使用 XML 傳輸數(shù)據

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

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

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

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

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

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

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

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ù)據

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

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

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

 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 為服務器端從客戶端接收到的包含 xml 信息的字符串參數(shù)。當然客戶端也可先建立 XML 對象再提交給服務器端，然后服務器端再做解析。

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

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

使用 GWT Designer 進行界面設計

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

登錄頁面的設計：

創(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.登錄頁面

信息查詢頁面的設計：

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

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

設置左邊的 ContentPanel 的屬性如下：

LayoutData | collapsible : true;

LayoutData | floatable : true;

LayoutData | split : true;

collapsible : true;

設置中心的 ContentPanel 的屬性如下：

collapsible : true;

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

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

圖 6.信息查詢頁面

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

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

至此，信息查詢頁面的設計已經完成，再次用 GWT Designer 打開它，其結果如圖 7 所示。

圖 7.信息查詢頁面

后臺 GWT 代碼

登錄頁面：

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

信息查詢頁面：

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

在信息查詢頁面，當用戶在左側 Tree 上選擇不同查詢節(jié)點時，根據其選定的節(jié)點查詢相應的數(shù)據，這需要在 Tree 的 selectionChanged 事件中，調用 RPC 進行通信。

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

圖 8.信息查詢結果

發(fā)布 GWT Application.

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

基本概念

主機模式

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

Web 模式

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

部署應用到 Web 服務器

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

編譯客戶端文件

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

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

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

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

● 將用以部署到服務器上的 war 文件

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

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

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

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

部署到 Web Server

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

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

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

前景展望

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

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

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

參考資料

學習

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