GWT-Ext 體驗之旅，第 1 部分: GWT-Ext 入門

GWT-Ext 是基於 Google Web Toolkit（GWT）和 ExtJs 的功能強大的網頁開發控制項庫。它非常適用於進行純 Java 語言的富 Internet 應用的快速開發。本系列文章將詳細講解 GWT-Ext 的基本結構和功能特點，並通過代碼示例來演示該技術的具體實現。本文是該系列的第一部分，將帶領您快速入門 GWT-Ext，並演示如何快速搭建 GWT-Ext 的開發環境。

概述

GWT-Ext 是基於 Google Web Toolkit（GWT）和 ExtJs 的功能強大的網頁開發控制項庫。它擴展了 GWT，在 ExtJs 的基礎上實現了有排序功能的表格（Grid）、分頁、過濾，支持有拖拽功能的樹，高度可定製的組合下拉框（Combobox）、目錄、對話框、表單（Form）以及功能豐富、強大且易用的 API。

GWT-Ext 擁有 GNU Lesser General Public Licence (LGPL)（請參閱 參考資料），V3.0 的許可證 。因此它是一個非常靈活，允許在開源和商業中應用的控制項庫。

GWT 的介紹（請參閱 參考資料）已經非常豐富，我們這個系列主要關注在 GWT-Ext 的介紹和應用上。GWT-Ext 是在 GWT 和 ExtJs 的基礎上對表現層的進一步封裝。我們可以理解 GWT 提供了 Ajax 的一套基礎框架，而 ExtJs 提供了以 JavaScript 和 CSS 樣式表為基礎的非常豐富的表現層介面。那麼 GWT-Ext 就是在 GWT 的基礎上，將 ExtJs 的 JavaScript 介面映射或者封裝為 Java 的介面。在 Java 的環境下開發和調試開發表現層，可以大大提高開發的速度。

GWT-Ext 開發環境搭建

在這個系列中，將通過示例的方式，一步步地介紹如何搭建一個 GWT-Ext 的開發環境。本章將通過圖解與代碼結合的方式搭建演示平台框架，並且演示如何部署這個平台到 Tomcat 容器中。

下載開發環境

我們將使用 Eclipse 和插件 Cypal Studio 來搭建控制項演示平台。Cypal Stutio 是一個 GWT 成熟的開發工具。它能非常方便地幫助我們搭建 GWT 的開發以及調試環境，並且能夠實現編譯和打包的工作，省去了開發 GWT 過程中很多繁瑣的過程。

需要下載的產品和技術請參閱 參考資源 中的“獲得產品和技術”部分。

安裝 Cypal Studio 插件

解壓 Eclipse 到本地硬碟，同時解壓 cypal.studio.for.gwt-1.0.zip 到 Eclipse 的 plugins 目錄下。然後解壓下載的 gwt-windows-1.5.0.zip 。最後，啟動 Eclipse 。

選擇 Eclipse 目錄 Window >Preferences > Cypal Stutio，填寫 GWT 相關的信息如 圖 1 所示。 GWT Home 填寫 GWT 的解壓根目錄。如果 Java VM 的要求較高，可以從 512M 提高到 1024M 。如圖 1 所示。

創建第一個 GWT-Ext 工程

選擇 File > New > Dynamic Web Project, 填寫必要信息。Dynamic Web Module version 選擇版本 2.4，因為 Cypal Studio 是在 2.4 這個版本上開發的。Configuration 選擇 Cypal Studio for GWT。工程名填寫 GWTEXTDemo。輸入以上信息后，點擊 Finish。

在新創建的工程上點擊右鍵，選擇 new-> other. 在 Cypal Studio 下找到並選擇 GWT Module 節點。

在打開的 Panle 里填寫 GWT Module 的信息，主要需要填寫的是 GWT Module 所在的包名以及它的類名。 GWT Module 必須實現 com.google.gwt.core .client.EntryPoint 介面。點擊 Finish 完成 Module 的創建。

新創建的 GWT 開發工程的結構如圖 5 所示。

在 public 這個目錄下放置圖片，JavaScript 腳本，CSS 樣式表和每個 GWT module 對應的 html 文件。

DemoControlPanel.gwt.xml 是一個 GWT 工程的配置文件。所有 GWT 的配置信息需要在這裡聲明。這些配置信息包括 Module 的信息，CSS 樣式表的相對路徑，我們應用到的 JavaScript 的文件相對路徑，和所有非同步通信中 Servlet 的映射信息。

在 GWT 的應用規範中，顯示層的 Java 代碼必須放在以包名 client 結尾的目錄或者子目錄下，並且不能依賴其它非 client 目錄下的 Java 代碼。

對其它的伺服器端的代碼，要放到以 server 結尾的包或者子包當中。

以上，是建立 GWT 工程的詳細過程，接下來，我們開始創建 ExtJs 的開發文件。

因為 GWT-Ext 依賴於 ExtJs，因此在 GWTEXTDemo 工程的 GWTEXTDemo\src\com\ibm\developworks\demo\public 目錄下創建 js 目錄，js 目錄下創建 ext 目錄。解壓下載的文件 ext-2.0.2.zip，拷貝解壓的文件夾 adapter，resources 和文件 ext-all.js 到工程的 public /js/ext 目錄下。上述的兩個文件夾和文件包括了 ExtJs 的核心 JavaScript 腳本，CSS 樣式表和基本圖案。如圖 6 所示。

刷新工程，得到圖 7 ExtJs 的目錄結構。

在 public 目錄下創建 DemoControlPanel.css 空文件。解壓 gwtext-2.0.5.zip，拷貝 gwtext.jar 到工作空間 WebContent/WEB-INF/lib 目錄下。 Gwtext.jar 是我們本系列介紹的核心。他包括了所以 GWT 和 ExtJs 的擴展。在後面的文章中，我們要介紹的 Panel，tree 和拖拽等功能和 API 都在這個 jar 文件中能夠找到。現在，我們將 gwtext.jar 放到上述目錄下，eclipse 會自動將它設置在 classpath 下。

刷新 WebContent/WEB-INF/lib 目錄， 可見 gwtext.jar 已被加入工作空間。

為了讓 GWTEXTDemo 工程能夠引用到 GWT-Ext 和 ExtJs 的開發包，並且應用本工程的 CSS 文件，打開 DemoControlPanel.gwt.xml 文件。加入如下代碼。

				<! — - GWTEXTDemo 工程的代碼繼承於 GWT-Ext -->    <inherits name="com.gwtext.GwtExt"/>    <! — - GWTEXTDemo 工程 css 樣式表，這裡填寫相對於 public 目錄的相對路徑 -->    <stylesheet src="DemoControlPanel.css"/>    <! — - 如下三個是 GWTEXTDemo 工程應用的 ExtJs 的基本 JavaScript 文件和樣式表 -->    <stylesheet src="js/ext/resources/css/ext-all.css"/>    <script src="js/ext/adapter/ext/ext-base.js"/>    <script src="js/ext/ext-all.js"/>

4 第一個 Hello GWT-Ext

準備好以上開發環境后，下面我們開始編寫我們的第一個 Hello GWT-Ext 文件。本文件實現的功能是在頁面上實現一個 Panel，Panel 的 Title 是 Hello GWT-ext，內容是文字加粗的 Hello GWT-ext ！

打開 DemoControlPanel.java 文件，替換已有的 onModuleLoad() 方法。另外添加沒有聲明的 com.gwtext.client.widgets.Panel 類。如清單 2 所示。

				public void onModuleLoad() {   		 Panel panel= new Panel();   		 panel.setTitle("Hello GWT-ext");   		 panel.setHtml("<b>Hello GWT-ext!</b>");   		  		 new Viewport(panel);     	 }

5 配置 GWT 運行環境

選擇 Run － > Run Configurations … , 雙擊 GWT Hosted Mode Application 節點，此時會出現一個 New_configuration 節點用於配置 GWTEXTDemo 工程的運行。選擇運行的工程 GWTEXTDemo，接著選擇要運行的 Module 名稱。如圖 9 所示。

執行這個運行配置，我們就得到了第一個 Hello GWT-Ext 的示例。如圖 10 所示。

通過上述配置開發，我們已經完成了從工程的搭建，代碼的編寫，到頁面運行展示的過程。因為 GWT 是應用 Java 的編程，因此通過斷點調試程序變得異常簡單。 GWT 幫助開發人員做到了 Java 到 JavaScript 的映射工作，大大方便了 JavaScript 調試過程，加快了開發的進度。

GWT-Ext 的部署

GWT 將 Java 的面向對象的編程和 JavaScript 的編程映射起來，因此要將 eclipse 工程里的示例部署到 web 容器中，首先要編譯，其次要打包，最後部署與測試。使用 Cypal Studio 插件可簡化編譯打包過程。

1 編譯

選擇 Project － >Clean, 彈出 Clean 的窗口如圖 11 。選擇 Clean projects selected below 同時勾選 GWTEXTDemo 工程。

因為 GWT 工程的編譯不同於普通的 Java 程序，他包括了 Java 到 JavaScript 的轉換，編譯的時間會相對較長。當在 console 窗口看到“ Compilation succeeded ”表示編譯成功，如圖 12 所示。

2 打包

在 GWTEXTDemo 工程上點右鍵，選擇 exportWAR file 如圖 13 所示。填寫目標存儲路徑，選擇確定。如圖 14 所示。

點擊 Finish 后，可得到 GWTEXTDemo.war 包 .

3 部署

將打包得到的 GWTEXTDemo.war 文件拷貝到 tomcat 的 webapps 目錄下，啟動 tomcat 。

4 測試

在瀏覽器中測試如下 URL：http://localhost:8080/GWTEXTDemo/DemoControlPanel.html 。如果顯示如圖 10 所示，則部署成功。

搭建 GWT-Ext 控制項演示平台框架

在後面的系列中，我們將在 GWT-Ext 的控制項演示平台上對 GWT-Ext 進行詳細介紹。

這個 GWT-Ext 的演示平台包括了屏幕左側的控制項導航欄，通過 Accordion Layout 分類顯示每章將要介紹的內容。例如在 Layout cases 的導航 tab 上，預先添加了 Accordion Layout 節點，單擊這個節點，在右側就會出現演示結果，如圖 15 所示。

由於 GWT-Ext 控制項演示平台本身也是基於 GWT-Ext 的開發，代碼實現的原理和細節將在後面的章節中具體介紹。因此在本章的最後，我們把已開發好的 Java 文件拷貝到 GWTEXTDemo 工程中，為後面的章節的介紹做好準備。

讀者可以拷貝下圖中高亮的幾個文件到對應的工程當中。

結束語

至此，我們完成了 GWTEXT Demo 工程環境的搭建。在後面的章節中我們會從 Panel，Layout，Tree，拖拽已經同步與非同步通信來介紹 GWT-Ext 。讓我們開始體驗 GWT-Ext 的神奇之旅吧。（責任編輯：A6）