使用 GWT 實現基於 Ajax 的 Web 開發

GWT 簡述以及 GWT 開發 Web 應用程序的優點

Ajax 及基於 Ajax Web 應用程序開發簡述

Ajax  即「Asynchronous JavaScript and XML」（異步 JavaScript 和  XML），是一種建立交互式網頁應用的網頁開發技術。經過此技術，軟件開發人員能夠在最短的時間內開發出更小，更快的，更友好的 Web  應用系統。在傳統的 web 應用中，用戶填寫並提交表單 (form)，在提交表單時就向 web  服務器發送一個處理請求。服務器接收用戶請求並處理傳來的表單，並將結果以一個新的頁面返回給用戶。這種處理方式浪費了許多帶寬，由於在先後兩個頁面中的 大部分 HTML  代碼每每是相同的。另外，因爲每次交互都須要向服務器發送請求，交互的響應時間就依賴於服務器的響應時間，從而致使了用戶界面的響應比本地應用程序慢得 多。經過 Ajax 技術，使用 JavaScript 能夠建立 XMLHttpRequest  對象來直接與服務器進行通訊，在不重載頁面的狀況下完成與 Web  服務器的數據交換。因爲在通信的過程當中傳輸的數據是開發人員可控制的有用數據，消除了冗餘的 HTML 代碼，減小了帶寬佔用，在很大程度上提升了  Web 應用系統的響應速度。另外，因爲使用 XMLHttpRequest  對象做爲後臺通信工具，頁面不須要所有刷新，只須要刷新局部改變的數據，從而實現相似於桌面應用的效果。

使用 GWT 進行 Ajax Web 應用程序開發的優點

Google  Web Toolkit（GWT）是 Google 公司推出的一款基於 Java 的 Ajax Web  應用程序開發框架。在此框架上，開發人員能夠輕鬆的建立 Ajax Web 應用程序，而沒必要關注 JavaScript  的編寫和調試，實如今瀏覽器中輕鬆地構建相似桌面應用般的程序。

使用面向對象的 Java 代替 JavaScript，大幅度提升了開發效率。

JavaScript  是一種腳本語言，它能夠用來製做與網絡無關的，用戶交互複雜軟件。它是一種基於對象 (Object Based) 和事件驅動 (Event  Driver) 的編程語言。可是 JavaScript 沒法實現真正的繼承關係（注：使用放在 prototype  對象裏，雖然能夠實現兩個實例對象中的數據共享，模擬繼承，但這其實並非真正的繼承，更沒法實現多層繼承關係）。所以，使用 JavaScript  來完成 Ajax 開發，很是耗費時間，代碼重複使用率低，難以調試，後期維護工做量巨大。

相比之下，Java  是一種真正的面向對象的語言。基於 Java 這一面向對象的語言，GWT 將真正的軟件工程方法帶入到 Ajax 應用程序開發當中。GWT  中提供了豐富的的基礎組件，使開發人員從繁雜而又重複的 Ajax 構建工做中解放出來，更加專一於業務層和程序性能的優化。開發人員經過使用 GWT  能夠快速地構建和維護複雜的、高性能的 JavaScript 應用程序。

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

因爲通用的組件不夠友好，致使 Web 開發的同時有大量的美化工做須要處理，因此以往的 Web 開發，都須要專業美工來協助完成。GWT 提供的豐富的組件庫使用戶能夠很容易的開發出極具視覺享受的 UI 界面。如圖 1 所示。

圖 1. GWT 消息框

上 圖中爲 Ext GWT 提供的消息框，下面爲原始的消息框。經過比較能夠看到，Ext GWT 的消息框明顯更加友好。按照傳統的 Web  開發方式要實現具備 Ext GWT 樣式的消息框，還要付出至關一些額外的美化工做。而這只是一個很是簡單的示例， GWT  所帶來的具備友好界面體驗的組件遠不止此。

GWT Designer 簡介

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

回頁首

基於 Eclipse 的 GWT 開發環境的搭建

Eclipse  是一個用 Java 開發的開源 IDE，由包括 IBM 在內的主要幾家技術型公司所支持。使用 Eclipse  可使開發者以高效的方式編寫、組織、測試和調試軟件。Eclipse 集成了對 GWT 腳本的支持，在 Eclipse 環境下使用 GWT 開發  Ajax Web 應用程序，不管是代碼編寫、組織、測試仍是調試，都可以得到較高的生產力。基於 Eclipse 的 GWT  開發環境是業界公認的，最佳的 GWT 開發環境。

搭建 Eclipse 開發環境

搭建 Eclipse 開發環境很簡單。只須要從 http://www.eclipse.org/downloads/下載後解壓便可使用。Eclipse 的版本不少，本文中將以 Eclipse Java EE IDE for Web Developers(Version: Helios Release) 爲例進行說明。

搭建 GWT 開發環境

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

選擇 Eclipse 的菜單 Help | Install New Software …， 而後在 Work with 中輸入 http://dl.google.com/eclipse/plugin/3.6，在出現的列表中選擇 Google App Engine Tools for Eclipse(required) 和 SDKs，以後點擊」Next」並完成安裝 。

安裝完成後重啓 Eclipse.

回頁首

基於 Eclipse 的 GWT Designer 開發環境的搭建

搭建 GWT Designer 開發環境

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

選擇 Eclipse 的菜單 Help | Install New Software …， 而後在 Work with 中輸入 http://dl.google.com/eclipse/inst/d2gwt/latest/3.6，在出現的列表中選擇 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.建立 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。 在右面的區域中選擇 Design 選項卡，就能夠看到 GWT、 GXT  支持的全部組件，表１給出了經常使用的 GWT 和 GXT 組件。

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

GWT 組件	GXT 組件	功能描述
HorizontalPanel	RowLayout，Horizontal	用於橫向單行排列組件內部組件的佈局組件
VerticalPanel	RowLayout，Vertical	用於豎向向單列排列組件內部組件的佈局組件
FlexTable		用於定位的佈局組件，相似於 HTML 中 Table
Button	Button	按鈕組件
Label	Text	標籤組件
TextBox	TextField	輸入框組件
RadioButton	Radio	單選按鈕組件
ChekcBox	CheckBox	多選按鈕組件
ListBox	LsitFied	列表組件
Combo	ComboBox	下拉列表組件
Image		圖片組件
Tree/TreeItem	Tree/TreeItem	樹結構組件
MenuBar/MenuItem	MenuBar/MenuBarItem	主菜單組件
	Menu/MenuItem	右鍵菜單組件

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

在前面建立的例子中，右擊類文件 EmployeeManagement.java 選擇 Open With | GWT Designer.

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

在 Palette 中選一個須要建立的組件，放在設計窗口上，本例中選擇了 GXT 的 button 按鈕，如圖 3 所示。

圖 3.建立 button 按鈕

組件建立後可在 Properties 區域修改其樣式屬性，好比將 button 的標題改成 test。

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

添加事件處理代碼 :

在 Properties 中選擇顯示按鈕 。而後，在事件列表中雙擊 ComponentSelected 事件，能夠看到 Designer 已經建立好了此事件的外圍代碼，此時，光標也已經定位到 ComponentSelected 事件的代碼上。接下來只須要根據實際狀況添加具體的業務代碼便可。

回頁首

使用 Session

Session 在交互中的做用

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

當用戶請求來自應用程序的 Web 頁時，若是該用戶尚未 Session，則 Web 服務器將自動建立一個 Session 對象。當會話過時或被放棄後，服務器將終止該 Session。可見，使用 Session 是 Web 開發中必不可少的。

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 實現與後臺數據通訊

做爲 Ajax 的應用開發框架，GWT 使得實現客戶端和服務器的通訊變得十分簡單，特別是異步通訊，而這一功能就是經過 RPC 實現的。如下給出實現異步通訊的具體步驟。

客戶端定義同步服務接口

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

服務器端實現上述服務接口

清單 3.爲了實現異步通訊，在服務器端實現服務接口的類須要繼承自 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   }   }

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

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

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

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

• 建立一個異步回調對象以供 RPC 完成時調用；

• 發出 RPC 請求。

有關 RPC 更多的介紹能夠閱讀 參考資料。

回頁首

遠程調用的數據載體

遠 程調用時，客戶端和服務器端每每要傳遞大量的信息，這就須要一種能包含各類數據的數據載體，好比 JSON 或 XML。固然也能夠是用序列化的  Java 對象，可是對於誇應用的數據傳輸推薦使用公用的載體：JSON 或 XML。 如下簡要介紹在 GWT 中如何使用 JSON 和 XML  進行數據的傳輸。

使用 JSON 傳輸數據

JSON 的全稱是 JavaScript  Object Notation，是一種輕量級的數據交換格式。JSON 與 XML  具備相同的特性，例如易於人工編寫和閱讀，易於機器生成和解析。可是採用 JSON 的數據傳輸比採用 XML 的數據傳輸具備更高的有效性。JSON  徹底獨立於編程語言，而且使用文本格式保存。關於 JSON 更多的瞭解請閱讀 參考資料。

在 GWT 中使用 JSON 做爲數據傳輸格式的配置步驟以下：

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

在 <inherits name='com.google.gwt.user.User'/> 以後添加

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

2）在客戶端 / 服務器端創建 JSON 數據並將其做爲 RPC 的參數傳輸到另外一端。

清單 6. 在客戶端創建 JSON 數據

 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 數據以下：

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

JSON 對象創建後，調用 JSONObject 的 toString() 方法將其轉換爲 String 作爲 RPC 的一個參數，便可傳到服務端。

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

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

 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 信息的字符參數。固然服務端也可根據須要創建 JSON 對象返回給客戶端，而後客戶端再作解析。

使用 XML 傳輸數據

XML（eXtensible  Markup  Language）爲可擴展的標記語言，是一套定義語義標記的規則。用戶能夠根據實際須要定義本身的新的標記語言，併爲這個標記語言規定其特有的一套標 籤。XML 易於閱讀和編寫，更重要的是其能夠跨平臺跨語言交換數據，使其成爲在不一樣的應用間交換數據的理想格式。關於 XML 更多的瞭解請閱讀 參考資料。

在 GWT 中使用 XML 做爲數據傳輸格式，其本質與使用 JSON 同樣，須要如下幾步 :

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

在 <inherits name='com.google.gwt.user.User'/> 以後添加：

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

2）在客戶端 / 服務器端創建 XML 數據並做爲 RPC 的參數傳輸到另外一端。

清單 8. 在服務器端創建 XML 數據

 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 數據

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

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

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

 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 信息的字符串參數。固然客戶端也可先創建 XML 對象再提交給服務器端，而後服務器端再作解析。

回頁首

應用實例：簡單信息查詢系統

前 面已經詳細敘述瞭如何使用 GWT Designer 進行 UI 設計，如何使用 JSON 或 XML 傳輸數據，以及如何建立和使用 RPC  通訊。本節將使用前面介紹的知識，完成一個簡單僱員信息查詢系統。僱員信息存儲在數據庫中。本系統將根據選中節點包含的條件查詢相應僱員的信息，結果以表 格的形式展示給用戶。此係統包含兩個頁面：登錄頁面和查詢頁面。登錄頁面根據輸入的用戶名和密碼驗證當前用戶是否合法；查詢頁面分爲左右兩部分，左邊以樹 的形式包含多個查詢結點，用戶選擇查詢結點，將會在右邊以表格的形式展示選中結點的查詢結果。

使用 GWT Designer 進行界面設計

本 系統包含了兩個頁面，一個登陸頁面，一個信息查詢頁面。爲了頁面統一，在此建立了一個基類 CommonViewport。CommonViewport  包含了用於顯示本系統名稱的標題。後面建立兩個頁面後都將繼承自 CommonViewport。這樣就包含了顯示標題的 Header。

登陸頁面的設計：

建立一個新類 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) | onClick 生成

重命名組件使得代碼可讀性更強。

再建立一個新類 : LoginFrame，使其繼承自 CommonViewport。

在其上添加一個 ContentPanel，放在中心位置。

修改 Collapsible 屬性爲 false， heading 爲空。

在 ContentPanel 中添加一個 Flextable.

右擊 Palette 中的 Custom，選擇 Add Component， 而後選擇 LoginView.

從 Custom 中選擇 LoginView 添加到 Flextable 中，將其 Layout 屬性選擇爲 CenterLayout.

重命名組件使得代碼可讀性更強。

完成後如圖 5 所示。

圖 5.登陸頁面

信息查詢頁面的設計：

建立一個新類 : 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 組件和一些須要動態綁定數據的組件，須要添加代碼來完成。

添加代碼，爲 TreePanel 添加一個存儲數據的模型 store， 同時爲葉子節點指定圖標。

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

圖 7.信息查詢頁面

後臺 GWT 代碼

登陸頁面：

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

信息查詢頁面：

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

在信息查詢頁面，當用戶在左側 Tree 上選擇不一樣查詢節點時，根據其選定的節點查詢相應的數據，這須要在 Tree 的 selectionChanged 事件中，調用 RPC 進行通訊。

至此，一個簡單的僱員信息查詢系統就所有完成了。運行後首先會出現登陸頁面，當用戶輸入有效的用戶名和密碼後，就進入到信息查詢頁面。在左側樹中選擇一個節點，相應的結果將顯示在右側的面板中。

圖 8.信息查詢結果

回頁首

發佈 GWT Application.

本節將結合實際介紹如何發佈前面已經完成 GWT 應用。在完成對上述應用的部署以前，還須要澄清一些概念。

基本概念

主機模式

在 前面的幾節中，咱們已經使用 GWT Designer 設計完成了一個簡單實用的 Web 應用程序。可是，對於一個 web  應用來講，事情還不至於此。這是由於，在以前的開發中，咱們一直使用的是主機模式（hosted）來開發、調試和運行這個 web  應用。所謂主機模式或者稱爲 GWT 的託管模式，是指 GWT 有一個內嵌的瀏覽器 ( 或者瀏覽器插件 )，開發人員能夠在 web  應用開發的過程當中，在 Java 開發環境中運行和調試 web 應用程序。能夠看出，在 web  應用部署以前，開發人員會將大多數的時間用於主機模式。在開發過程當中，使用 GWT  的主機模式，瀏覽器能夠經過刷新操做當即查看代碼的變動，而無需編譯爲 JavaScript 或部署到服務器。也就是說 Java  虛擬機其實是在執行編譯後的 Java 字節碼，而且使用 GWT 將結果輸出到一個內嵌的瀏覽器 ( 或者瀏覽器插件 )  窗口，從而大大提升了開發和調試應用程序的效率。

Web 模式

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

部署應用到 Web 服務器

主機模式下測試完成後，接下來須要爲開發的應用建立一個 Web 版本，以即可以將此應用部署到通用的 Web 服務器以供用戶經過普通瀏覽器進行訪問。如下將逐一介紹從編譯至部署的各個步驟。

編譯客戶端文件

在 Eclipse IDE 開發環境中，能夠經過下面的步驟來完成 GWT 的編譯

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

根據對話框上的信息提示，指定相應的參數：包括將要生成的 war 文件名、war 文件名的存放路徑、GWT 編譯選項和 GWT 編譯所用的最大內存設置。能夠經過 Browser 選擇 war 文件的存放路徑，能夠是本地路徑也能夠是網絡路徑。

按下 OK 後，將自動完成 GWT 編譯而且產生如下輸出：

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

• 用來執行編譯部署的 build.xml 文件

一旦生成了 build.xml  文件（該文件和模塊文件處於同一個文件夾下），後續就能夠將此文件爲模板，根據實際狀況進行修改以便更好的完成 GWT  編譯和部署的工做。若是須要從新編譯 war 文件，只須要右鍵點擊 build.xml 文件，選擇「Run As -> Ant  Build」就能夠了。

編譯完成後，GWT 會將所開發的客戶端 Java 代碼編譯成 JavaScript  語言格式。這樣一來，當應用在 Web 模式中啓動時，它將徹底做爲 JavaScript 運行，而且不須要任何瀏覽器插件或 Java  虛擬機，從而實現了對各類瀏覽器的完美支持。

客戶端文件編譯完成後，將會在當前 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 應用開發和部署更多的介紹，能夠閱讀 參考資料。

回頁首

前景展望

GWT  以其基於 Java 的 Web 應用程序框架，使得開發人員在瀏覽器中輕鬆地構建相似桌面應用般的程序，而無須關注 JavaScript  的編寫和調試。本來枯燥複雜的 Web 開發今後變的生動並且高效。能夠說，相比這以前的 Web 應用框架，GWT  表明的不僅是一種技術上的改進，更是一場 Web 應用框架的革命，由於 GWT 的出現，徹底打破了 Web 應用程序的既有模式。

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

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