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

←手機掃碼閱讀     火星人 @ 2014-03-12 , reply:0
  
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 所示。


圖 1. Cypal Studio 配置

創建第一個 GWT-Ext 工程

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


圖 2. 創建 GWTExt 開發工程

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


圖 3. 創建 GWT Module

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


圖 4. 填寫 GWT Module 信息

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

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

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

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

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


圖 5. GWT 開發工程的結構圖

以上,是建立 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 所示。


圖 6. 工程所需的 ExtJs 開發文件

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


圖 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 已被加入工作空間。


圖 8. gwtext.jar 已加入工作空間

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


清單 1. GWT 配置文件
				<! — - 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 所示。


清單 2. Hello GWT-ext
				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 所示。


圖 9. GWTEXTDemo 運行配置

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


圖 10. 第一個 GWT-Ext 示例

通過上述配置開發,我們已經完成了從工程的搭建,代碼的編寫,到頁面運行展示的過程。因為 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 工程。


圖 11. 編譯 GWT-Ext 工程

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


圖 12. 編譯成功

2 打包

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


圖 13. 打 WAR 包


圖 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 所示。


圖 15. GWT-Ext 的控制項演示平台框架

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

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


圖 16. 需要 copy 的文件





結束語

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






[火星人 ] GWT-Ext 體驗之旅,第 1 部分: GWT-Ext 入門已經有375次圍觀

http://coctec.com/docs/linux/show-post-68891.html