|
個(gè)人覺(jué)得，GWT的客戶端表現(xiàn)并不是Gwt這個(gè)項(xiàng)目最關(guān)心的方向，所以要做出表現(xiàn)豐富的界面，要花去不少心思，當(dāng)你為做一個(gè)“可排序的Grid”被搞得焦頭爛額時(shí)，想想EXT,DOJO，只有艷羨地分了。
GWT-Ext 是sanjiv.jivan為了豐富GWT的客戶端表現(xiàn)而貢獻(xiàn)的開(kāi)源項(xiàng)目。項(xiàng)目結(jié)合了當(dāng)前客戶端表現(xiàn)和用戶體驗(yàn)都相當(dāng)完善的Ext，提供了一種操作性很強(qiáng)的RIA開(kāi)發(fā)方式。
作者應(yīng)該花了不少心思在項(xiàng)目上，更新很頻繁，大概不到1個(gè)月就有新的版本問(wèn)世，目前項(xiàng)目的版本為GWT-Ext 0.9.3，是 Ext 1.1.1 和 GWT 1.4 Final 的結(jié)合，在 Ext 方面實(shí)現(xiàn)了大多數(shù)常用的控件，如Grid、Tree、Form、TabPanel等等。具體實(shí)現(xiàn)效果可以查看項(xiàng)目中的 Showcase Demo 。
以下結(jié)合一個(gè)例子來(lái)演示一下如何使用GWT-Ext 做實(shí)際開(kāi)發(fā)。
一定要認(rèn)真閱讀項(xiàng)目中的 GettingStarted ，下面起初的幾段其實(shí)就是該文的中文譯本。
一、在Gwt項(xiàng)目中集成GWT-Ext
1.下載gwtext-0.9.3.zip，之后解壓，將其中的 gwtext.jar 附加到當(dāng)前GWT項(xiàng)目（Tree）的BuildPath中。
2.下載ext-1.1.1.zip （注意：暫時(shí)還不支持最新的2.0版本），將的ext-all.js、ext-core.js以及resources和adapter兩個(gè)目錄拷貝到module的public中的js/ext位置。對(duì)Ext熟悉的話，可以只拷貝需要的文件而不必載入所有的資源文件。
3.修改GWT項(xiàng)目中module的html頁(yè)面，添加Ext資源，修改后的html頁(yè)面可能是這樣：
html代碼
- <html>
- <head>
-
- <title>Wrapper HTML for Treetitle>
-
- <meta name='gwt:module' content='showcase.Tree'/>
-
- <link type="text/css" rel='stylesheet' href='Tree.css'/>
-
- <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
- <link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" />
- <script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js">script>
- <script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js">script>
- <script type="text/javascript" src="js/ext/ext-all.js">script>
-
- head>
-
- <body>
-
- <script language="javascript" src="gwt.js">script>
-
- <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0">iframe>
-
- body>
- html>
4.編輯項(xiàng)目的Tree.gwt.xml文件，添加以下
xml 代碼
- <inherits name='com.gwtext.GwtExt'/>
通過(guò)以上步驟，你就可以寫(xiě)接近Ext功能的客戶端界面了，同時(shí)也具有了Gwt的各種開(kāi)發(fā)優(yōu)勢(shì)了，比如Java方式開(kāi)發(fā)，清晰的RPC（這點(diǎn)尤其是在客戶端需要獲取服務(wù)器端數(shù)據(jù)信息時(shí)尤其方便）等等。
二、實(shí)例
下面我們就編寫(xiě)Showcase Demo 中的Tree節(jié)點(diǎn)下的Two Trees Drag & Drop，例子實(shí)現(xiàn)的是兩個(gè)Tree中節(jié)點(diǎn)的任意拖放（再次感嘆Ext的豐富表現(xiàn)）。
Tree.java代碼如下，可直接拷貝到查看效果。
java 代碼
注意：例子中需要的兩個(gè)數(shù)據(jù)文件需放置于public目錄，熟悉Ext的應(yīng)該很清楚。
以上示例只是將該種開(kāi)發(fā)方式的流程順了一下，窺一斑以示全貌，Ext各種豐富的表現(xiàn)都可以實(shí)現(xiàn)。閑下來(lái)，再寫(xiě)一下將數(shù)據(jù)提供（其實(shí)就是一些多維數(shù)據(jù)而已）方式改為RPC，這樣開(kāi)發(fā)流程就完整了。
可以下載示例程序運(yùn)行一下，證明我沒(méi)騙你
|
