如何使用GWT-Ext 進(jìn)行RIA開發(fā) - GWT - AJAX - JavaEye論壇

goldbomb 2007-11-14

展開全文

個人覺得，GWT的客戶端表現(xiàn)并不是Gwt這個項目最關(guān)心的方向，所以要做出表現(xiàn)豐富的界面，要花去不少心思，當(dāng)你為做一個“可排序的Grid”被搞得焦頭爛額時，想想EXT,DOJO，只有艷羨地分了。

GWT-Ext 是sanjiv.jivan為了豐富GWT的客戶端表現(xiàn)而貢獻(xiàn)的開源項目。項目結(jié)合了當(dāng)前客戶端表現(xiàn)和用戶體驗都相當(dāng)完善的Ext，提供了一種操作性很強(qiáng)的RIA開發(fā)方式。

作者應(yīng)該花了不少心思在項目上，更新很頻繁，大概不到1個月就有新的版本問世，目前項目的版本為GWT-Ext 0.9.3，是 Ext 1.1.1 和 GWT 1.4 Final 的結(jié)合，在 Ext 方面實現(xiàn)了大多數(shù)常用的控件，如Grid、Tree、Form、TabPanel等等。具體實現(xiàn)效果可以查看項目中的 Showcase Demo 。

以下結(jié)合一個例子來演示一下如何使用GWT-Ext 做實際開發(fā)。

一定要認(rèn)真閱讀項目中的 GettingStarted ，下面起初的幾段其實就是該文的中文譯本。

一、在Gwt項目中集成GWT-Ext

1.下載gwtext-0.9.3.zip，之后解壓，將其中的 gwtext.jar 附加到當(dāng)前GWT項目（Tree）的BuildPath中。

2.下載ext-1.1.1.zip （注意：暫時還不支持最新的2.0版本），將的ext-all.js、ext-core.js以及resources和adapter兩個目錄拷貝到module的public中的js/ext位置。對Ext熟悉的話，可以只拷貝需要的文件而不必載入所有的資源文件。

3.修改GWT項目中module的html頁面，添加Ext資源，修改后的html頁面可能是這樣：

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.編輯項目的Tree.gwt.xml文件，添加以下

xml 代碼

<inherits name='com.gwtext.GwtExt'/>

通過以上步驟，你就可以寫接近Ext功能的客戶端界面了，同時也具有了Gwt的各種開發(fā)優(yōu)勢了，比如Java方式開發(fā)，清晰的RPC（這點尤其是在客戶端需要獲取服務(wù)器端數(shù)據(jù)信息時尤其方便）等等。

二、實例

下面我們就編寫Showcase Demo 中的Tree節(jié)點下的Two Trees Drag & Drop，例子實現(xiàn)的是兩個Tree中節(jié)點的任意拖放（再次感嘆Ext的豐富表現(xiàn)）。

Tree.java代碼如下，可直接拷貝到查看效果。

java 代碼

package showcase.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.tree.AsyncTreeNode;
import com.gwtext.client.widgets.tree.AsyncTreeNodeConfig;
import com.gwtext.client.widgets.tree.TreePanel;
import com.gwtext.client.widgets.tree.TreeNode;
import com.gwtext.client.widgets.tree.DropNodeCallback;
import com.gwtext.client.widgets.tree.TreePanelConfig;
import com.gwtext.client.widgets.tree.XMLTreeLoader;
import com.gwtext.client.widgets.tree.XMLTreeLoaderConfig;
import com.gwtext.client.widgets.tree.event.TreePanelListenerAdapter;
import com.gwtext.client.dd.*;
/**
* Entry point classes define onModuleLoad().
*/
public class Tree implements EntryPoint {
public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
HorizontalPanel horizontalPanel = new HorizontalPanel();
rootPanel.add(horizontalPanel);
// create source countried tree
final TreePanel treePanel = new TreePanel("coutries-grouped", new TreePanelConfig() {
{
setAnimate(true);
setEnableDD(true);
setContainerScroll(true);
setRootVisible(true);
}
});
final XMLTreeLoader loader = new XMLTreeLoader(new XMLTreeLoaderConfig() {
{
setDataUrl("countries-grouped.xml");
setMethod("get");
setRootTag("countries");
setFolderTitleMapping("@title");
setFolderTag("continent");
setLeafTitleMapping("@title");
setLeafTag("country");
setQtipMapping("@qtip");
setIconMapping("@icon");
}
});
AsyncTreeNode root = new AsyncTreeNode("Countries", new AsyncTreeNodeConfig() {
{
setLoader(loader);
}
});
treePanel.setRootNode(root);
treePanel.render();
root.expand();
treePanel.expandAll();
// create target vacation tree
final TreePanel tripTreePanel = new TreePanel("vacation-tree", new TreePanelConfig() {
{
setAnimate(true);
setEnableDD(true);
setContainerScroll(true);
setRootVisible(true);
}
});
final XMLTreeLoader tripLoader = new XMLTreeLoader(new XMLTreeLoaderConfig() {
{
setDataUrl("trip.xml");
setMethod("get");
setRootTag("vacations");
setFolderIdMapping("@title");
setFolderTag("trip");
setQtipMapping("@qtip");
setIconMapping("@icon");
setAttributeMappings(new String[]{"@trip"});
}
});
AsyncTreeNode tripRoot = new AsyncTreeNode("Places to Visit", new AsyncTreeNodeConfig() {
{
setLoader(tripLoader);
}
});
tripTreePanel.setRootNode(tripRoot);
tripTreePanel.render();
tripRoot.expand();
tripTreePanel.expandAll();
// add trip tree listener that handles move / copy logic
tripTreePanel.addTreePanelListener(new TreePanelListenerAdapter() {
public boolean doBeforeNodeDrop(TreePanel treePanel, TreeNode target, String point, DragDrop source, TreeNode dropNode, DropNodeCallback dropDropNodeCallback) {
if("true".equals(target.getAttribute("trip"))) {
}
return true;
}
});
horizontalPanel.add(treePanel);
horizontalPanel.add(tripTreePanel);
}
}