神马文学网如何使用GWT-Ext 进行RIA开发 - GWT - AJAX - JavaEye论坛
来源：百度文库 编辑：神马文学网 时间：2024/04/28 01:09:19
个人觉得，GWT的客户端表现并不是Gwt这个项目最关心的方向，所以要做出表现丰富的界面，要花去不少心思，当你为做一个“可排序的Grid”被搞得焦头烂额时，想想EXT,DOJO，只有艳羡地分了。
GWT-Ext 是sanjiv.jivan为了丰富GWT的客户端表现而贡献的开源项目。项目结合了当前客户端表现和用户体验都相当完善的Ext，提供了一种操作性很强的RIA开发方式。
作者应该花了不少心思在项目上，更新很频繁，大概不到1个月就有新的版本问世，目前项目的版本为GWT-Ext 0.9.3，是 Ext 1.1.1 和 GWT 1.4 Final 的结合，在 Ext 方面实现了大多数常用的控件，如Grid、Tree、Form、TabPanel等等。具体实现效果可以查看项目中的Showcase Demo 。
以下结合一个例子来演示一下如何使用GWT-Ext 做实际开发。
一定要认真阅读项目中的 GettingStarted ，下面起初的几段其实就是该文的中文译本。
一、在Gwt项目中集成GWT-Ext
1.下载gwtext-0.9.3.zip，之后解压，将其中的 gwtext.jar 附加到当前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代码
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><br>4.编辑项目的Tree.gwt.xml文件，添加以下<br>xml 代码<br><inherits name='com.gwtext.GwtExt'/><br>通过以上步骤，你就可以写接近Ext功能的客户端界面了，同时也具有了Gwt的各种开发优势了，比如Java方式开发，清晰的RPC（这点尤其是在客户端需要获取服务器端数据信息时尤其方便）等等。<br>二、实例<br>下面我们就编写Showcase Demo 中的Tree节点下的Two Trees Drag & Drop，例子实现的是两个Tree中节点的任意拖放（再次感叹Ext的丰富表现）。<br>Tree.java代码如下，可直接拷贝到查看效果。<br>java 代码<br>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); } }<br>注意：例子中需要的两个数据文件需放置于public目录，熟悉Ext的应该很清楚。<br>以上示例只是将该种开发方式的流程顺了一下，窥一斑以示全貌，Ext各种丰富的表现都可以实现。闲下来，再写一下将数据提供（其实就是一些多维数据而已）方式改为RPC，这样开发流程就完整了。<br>可以下载示例程序运行一下，证明我没骗你<img style='max-width:300px;' id="img0" src="http://image.360doc.cn/DownloadImg/15643/820619_1.gif" /></div>
<div class="list-group">
<a href="/article/208748" class="list-group-item">如何使用GWT-Ext 进行RIA开发 - GWT - AJAX - JavaEye论坛</a>
<a href="/article/2719572" class="list-group-item">ext - ajax</a>
<a href="/article/41528" class="list-group-item">关于GWT的两篇有深度的评论文章</a>
<a href="/article/208332" class="list-group-item">Ext 2.0使用:组件开发模式 - Easy Net (Lucene && SOA) -...</a>
<a href="/article/127660" class="list-group-item">AJAX与Flash RIA</a>
<a href="/article/68459" class="list-group-item">使用 Ajax Toolkit Framework 开发 Dojo 应用</a>
<a href="/article/889147" class="list-group-item">使用 Ajax Toolkit Framework 开发 Dojo 应用</a>
<a href="/article/2990334" class="list-group-item">使用 Ajax Toolkit Framework 开发 Dojo 应用</a>
<a href="/article/176387" class="list-group-item">使用jQuery简化Ajax开发——Ajax开发入门[1]</a>
<a href="/article/199147" class="list-group-item">使用jQuery简化Ajax开发——Ajax开发入门[1]</a>
<a href="/article/23146" class="list-group-item">使用Ant进行Web开发(第二部分)</a>
<a href="/article/37746" class="list-group-item">使用AppFuse进行开发的总结</a>
<a href="/article/1854481" class="list-group-item">嵌入式开发中使用DDD进行调试</a>
<a href="/article/1812384" class="list-group-item">结合Maven2进行J2EE项目构建 - 配置管理 - develop - JavaEye论坛</a>
<a href="/article/2053139" class="list-group-item">使用异步Servlet扩展AJAX应用程序 - 软件人生，雕刻时光 - JavaEye技术...</a>
<a href="/article/1155554" class="list-group-item">业务流程不是需求 - 敏捷开发 - develop - JavaEye论坛</a>
<a href="/article/2938509" class="list-group-item">Jquery Mobile开发和试用 - JQuery - web - JavaEye论坛</a>
<a href="/article/185033" class="list-group-item">论坛集萃-AJAX开发简略 (第二部分)</a>
<a href="/article/2228649" class="list-group-item">使用 Dojo 的 Ajax 应用开发进阶教程，第 8 部分: Dijit 开发最佳实践</a>
<a href="/article/421028" class="list-group-item">Ext.Button简单的按钮类 - ajax - 博客园</a>
<a href="/article/1366163" class="list-group-item">NS2脚本中如何使用God - 程序开发 - 文档专区 - Linux论坛</a>
<a href="/article/120058" class="list-group-item">AJAX网络开发技术</a>
<a href="/article/245009" class="list-group-item">ASP.NET中使用AJAX时如何弹出对话框</a>
<a href="/article/549687" class="list-group-item">ASP.NET中使用AJAX时如何弹出对话框</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="footer hidden-print">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">相关问题</div>
<div class="panel-body">
<a class="btn btn-default" href="/article/669620" title="一招废掉所有木马_">一招废掉所有木马_</a>
<a class="btn btn-default" href="/article/669621" title="周易小成图简述">周易小成图简述</a>
<a class="btn btn-default" href="/article/669622" title="300张客厅效果图给你装修带来灵感(一)">300张客厅效果图给你装修带来灵感(一)</a>
<a class="btn btn-default" href="/article/669623" title="这个时代的“奴才文艺”">这个时代的“奴才文艺”</a>
<a class="btn btn-default" href="/article/669624" title="八大秘诀想不提高水平都难">八大秘诀想不提高水平都难</a>
<a class="btn btn-default" href="/article/669625" title="111">111</a>
<a class="btn btn-default" href="/article/669626" title="电导率的定义概念">电导率的定义概念</a>
<a class="btn btn-default" href="/article/669627" title="中国硬币收藏价格表参考">中国硬币收藏价格表参考</a>
<a class="btn btn-default" href="/article/669628" title="极品环绕靓声 车载专业试音碟《上品豪驾·试音2号SRS》320k/mp3">极品环绕靓声 车载专业试音碟《上品豪驾·试音2号SRS》320k/mp3</a>
<a class="btn btn-default" href="/article/669629" title="中国结-凤凰结的编法(图解)1">中国结-凤凰结的编法(图解)1</a>
<a class="btn btn-default" href="/article/669630" title="為何執迷不悟——談認知失調理論">為何執迷不悟——談認知失調理論</a>
<a class="btn btn-default" href="/article/669631" title="一步一步教你手编绳">一步一步教你手编绳</a>
<a class="btn btn-default" href="/article/669632" title="根据徐文明短线点金中的抄底指标做成的公式">根据徐文明短线点金中的抄底指标做成的公式</a>
<a class="btn btn-default" href="/article/669633" title="ARM芯片的地址重映射">ARM芯片的地址重映射</a>
<a class="btn btn-default" href="/article/669634" title="儿科民间秘方总汇">儿科民间秘方总汇</a>
<a class="btn btn-default" href="/article/669635" title="OA系统中流程设计方法探讨">OA系统中流程设计方法探讨</a>
<a class="btn btn-default" href="/article/669636" title="奥运金牌玉料风头盖过和田玉_商旅报_20080827_XPLUS喜阅网">奥运金牌玉料风头盖过和田玉_商旅报_20080827_XPLUS喜阅网</a>
<a class="btn btn-default" href="/article/669637" title="笔记本上盖自制图案(14p)">笔记本上盖自制图案(14p)</a>
<a class="btn btn-default" href="/article/669638" title="134个治病偏方，从此不用去医院">134个治病偏方，从此不用去医院</a>
<a class="btn btn-default" href="/article/669639" title="七年级思想品德教学计划">七年级思想品德教学计划</a>
<a class="btn btn-default" href="/article/669640" title="硬盘修复">硬盘修复</a>
<a class="btn btn-default" href="/article/669641" title="[开心调查]25岁以后女人必读(转载)">[开心调查]25岁以后女人必读(转载)</a>
<a class="btn btn-default" href="/article/669642" title="世界经典名曲必听集之一">世界经典名曲必听集之一</a>
<a class="btn btn-default" href="/article/669643" title="一些生活用品的妙用及小窍门">一些生活用品的妙用及小窍门</a>
<a class="btn btn-default" href="/article/669644" title="老外总结中国人60个特征">老外总结中国人60个特征</a>
<a class="btn btn-default" href="/article/669645" title="浅谈中考政治总复习方略">浅谈中考政治总复习方略</a>
<a class="btn btn-default" href="/article/669646" title="教你煎鱼不粘锅">教你煎鱼不粘锅</a>
<a class="btn btn-default" href="/article/669647" title="判断资金流入流出的五大秘诀">判断资金流入流出的五大秘诀</a>
<a class="btn btn-default" href="/article/669648" title="短线炒股（中）">短线炒股（中）</a>
<a class="btn btn-default" href="/article/669649" title="QQ空间工具栏更便捷。新功能详解">QQ空间工具栏更便捷。新功能详解</a>
<a class="btn btn-default" href="/article/669650" title="史记（全）">史记（全）</a>
</div>
</div></div>
<div class="copy-right">
<p>神马文学网，客观、专业、权威的知识性互动百科全书。</p></div>
</footer>
</body>
</html>
GWT-Ext 是sanjiv.jivan为了丰富GWT的客户端表现而贡献的开源项目。项目结合了当前客户端表现和用户体验都相当完善的Ext，提供了一种操作性很强的RIA开发方式。
作者应该花了不少心思在项目上，更新很频繁，大概不到1个月就有新的版本问世，目前项目的版本为GWT-Ext 0.9.3，是 Ext 1.1.1 和 GWT 1.4 Final 的结合，在 Ext 方面实现了大多数常用的控件，如Grid、Tree、Form、TabPanel等等。具体实现效果可以查看项目中的Showcase Demo 。
以下结合一个例子来演示一下如何使用GWT-Ext 做实际开发。
一定要认真阅读项目中的 GettingStarted ，下面起初的几段其实就是该文的中文译本。
一、在Gwt项目中集成GWT-Ext
1.下载gwtext-0.9.3.zip，之后解压，将其中的 gwtext.jar 附加到当前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代码