论坛首页 → Web前端技术论坛 →

如何使用GWT-Ext 进行RIA开发

浏览 18256 次
锁定老帖子 主题：如何使用GWT-Ext 进行RIA开发
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • sheva.wen
  • 等级: 初级会员
  • 性别:
  • 文章: 37
  • 积分: 79
  • 来自: 呼和浩特
   发表时间：2007-11-14  
GWT

个人觉得，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代码
  1. <html>  
  2.     <head>  
  3.        
  4.         <title>Wrapper HTML for Treetitle>  
  5.   
  6.         <meta name='gwt:module' content='showcase.Tree'/>  
  7.   
  8.         <link type="text/css" rel='stylesheet' href='Tree.css'/>  
  9.            
  10.         <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>  
  11.         <link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" />  
  12.         <script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js">script>  
  13.         <script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js">script>  
  14.         <script type="text/javascript" src="js/ext/ext-all.js">script>  
  15.            
  16.     head>  
  17.   
  18.     <body>  
  19.   
  20.         <script language="javascript" src="gwt.js">script>  
  21.   
  22.         <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0">iframe>  
  23.   
  24.     body>  
  25. html>  

 

4.编辑项目的Tree.gwt.xml文件，添加以下

xml 代码
  1. <inherits name='com.gwtext.GwtExt'/>  

通过以上步骤，你就可以写接近Ext功能的客户端界面了，同时也具有了Gwt的各种开发优势了，比如Java方式开发，清晰的RPC（这点尤其是在客户端需要获取服务器端数据信息时尤其方便）等等。

二、实例

下面我们就编写Showcase Demo 中的Tree节点下的Two Trees Drag & Drop，例子实现的是两个Tree中节点的任意拖放（再次感叹Ext的丰富表现）。

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

java 代码
  1. package showcase.client;   
  2.   
  3. import com.google.gwt.core.client.EntryPoint;   
  4. import com.google.gwt.user.client.ui.HorizontalPanel;   
  5. import com.google.gwt.user.client.ui.RootPanel;   
  6. import com.gwtext.client.widgets.tree.AsyncTreeNode;   
  7. import com.gwtext.client.widgets.tree.AsyncTreeNodeConfig;   
  8. import com.gwtext.client.widgets.tree.TreePanel;   
  9. import com.gwtext.client.widgets.tree.TreeNode;   
  10. import com.gwtext.client.widgets.tree.DropNodeCallback;   
  11. import com.gwtext.client.widgets.tree.TreePanelConfig;   
  12. import com.gwtext.client.widgets.tree.XMLTreeLoader;   
  13. import com.gwtext.client.widgets.tree.XMLTreeLoaderConfig;   
  14. import com.gwtext.client.widgets.tree.event.TreePanelListenerAdapter;   
  15. import com.gwtext.client.dd.*;   
  16. /**  
  17.  * Entry point classes define onModuleLoad().  
  18.  */  
  19. public class Tree implements EntryPoint {   
  20.     public void onModuleLoad() {   
  21.         RootPanel rootPanel = RootPanel.get();   
  22.         HorizontalPanel horizontalPanel = new HorizontalPanel();   
  23.         rootPanel.add(horizontalPanel);   
  24. //      create source countried tree   
  25.         final TreePanel treePanel = new TreePanel("coutries-grouped", new TreePanelConfig() {   
  26.             {   
  27.                 setAnimate(true);   
  28.                 setEnableDD(true);   
  29.                 setContainerScroll(true);   
  30.                 setRootVisible(true);   
  31.             }   
  32.         });   
  33.   
  34.         final XMLTreeLoader loader = new XMLTreeLoader(new XMLTreeLoaderConfig() {   
  35.             {   
  36.                 setDataUrl("countries-grouped.xml");   
  37.                 setMethod("get");   
  38.                 setRootTag("countries");   
  39.                 setFolderTitleMapping("@title");   
  40.                 setFolderTag("continent");   
  41.                 setLeafTitleMapping("@title");   
  42.                 setLeafTag("country");   
  43.                 setQtipMapping("@qtip");   
  44.                 setIconMapping("@icon");   
  45.             }   
  46.         });   
  47.   
  48.         AsyncTreeNode root = new AsyncTreeNode("Countries", new AsyncTreeNodeConfig() {   
  49.             {   
  50.                 setLoader(loader);   
  51.             }   
  52.         });   
  53.   
  54.         treePanel.setRootNode(root);   
  55.         treePanel.render();   
  56.   
  57.         root.expand();   
  58.         treePanel.expandAll();   
  59.   
  60. //      create target vacation tree   
  61.         final TreePanel tripTreePanel = new TreePanel("vacation-tree", new TreePanelConfig() {   
  62.             {   
  63.                 setAnimate(true);   
  64.                 setEnableDD(true);   
  65.                 setContainerScroll(true);   
  66.                 setRootVisible(true);   
  67.             }   
  68.         });   
  69.   
  70.         final XMLTreeLoader tripLoader = new XMLTreeLoader(new XMLTreeLoaderConfig() {   
  71.             {   
  72.                 setDataUrl("trip.xml");   
  73.                 setMethod("get");   
  74.                 setRootTag("vacations");   
  75.                 setFolderIdMapping("@title");   
  76.                 setFolderTag("trip");   
  77.                 setQtipMapping("@qtip");   
  78.                 setIconMapping("@icon");   
  79.                 setAttributeMappings(new String[]{"@trip"});   
  80.             }   
  81.         });   
  82.   
  83.         AsyncTreeNode tripRoot = new AsyncTreeNode("Places to Visit", new AsyncTreeNodeConfig() {   
  84.             {   
  85.                 setLoader(tripLoader);   
  86.             }   
  87.         });   
  88.   
  89.         tripTreePanel.setRootNode(tripRoot);   
  90.         tripTreePanel.render();   
  91.   
  92.         tripRoot.expand();   
  93.         tripTreePanel.expandAll();   
  94.   
  95. //      add trip tree listener that handles move / copy logic   
  96.         tripTreePanel.addTreePanelListener(new TreePanelListenerAdapter() {   
  97.             public boolean doBeforeNodeDrop(TreePanel treePanel, TreeNode target, String point, DragDrop source, TreeNode dropNode, DropNodeCallback dropDropNodeCallback) {   
  98.                 if("true".equals(target.getAttribute("trip"))) {   
  99.                 }   
  100.                 return true;   
  101.             }   
  102.         });   
  103.         horizontalPanel.add(treePanel);   
  104.         horizontalPanel.add(tripTreePanel);   
  105.     }   
  106. }   

 注意：例子中需要的两个数据文件需放置于public目录，熟悉Ext的应该很清楚。

编译后执行的效果如下图：

 

以上示例只是将该种开发方式的流程顺了一下，窥一斑以示全貌，Ext各种丰富的表现都可以实现。闲下来，再写一下将数据提供（其实就是一些多维数据而已）方式改为RPC，这样开发流程就完整了。

可以下载示例程序运行一下，证明我没骗你

 

  • 描述: 示例的运行效果
  • 大小: 73.3 KB
返回顶楼
         
  • stone
  • 等级: 四星会员
  • 性别:
  • 文章: 187
  • 积分: 411
  • 来自: 天津
   发表时间：2007-11-14  
呵呵，使用gwt就尽量不要再粘上其他js的东东，当然那个gwt.js例外。
如果楼主觉得extjs不错的话，倒是推荐使用mygwt这个在extjs上构建的gwt framework，它将extjs的组件完全用gwt实现，而不是使用extjs的js脚本
返回顶楼
          回帖地址
0 请登录后投票
  • sheva.wen
  • 等级: 初级会员
  • 性别:
  • 文章: 37
  • 积分: 79
  • 来自: 呼和浩特
   发表时间：2007-11-14  
@stone
mygwt同样是一个不错的GWT扩展，只是发展的时间短了些，功能还不是很多，希望能有个好的势头，毕竟不需要JSObject来连接了，结构简单了许多。
返回顶楼
          回帖地址
0 请登录后投票
  • cloudyofsky
  • 等级: 初级会员
  • 性别:
  • 文章: 32
  • 积分: 30
  • 来自: 广州
   发表时间：2007-11-14  
还是比较喜欢mygwt，毕竟它是gwt的扩展
返回顶楼
          回帖地址
0 请登录后投票
  • ztkx
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 70
   发表时间：2008-03-05  
编译是成功的,但是shell的时候会报错，因为找不到GWT.ext.xml，jar也放进相应路径了，inherits也写了
返回顶楼
          回帖地址
0 请登录后投票
  • zSun
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 30
  • 来自: 北京
   发表时间：2008-07-22  
找不到GWT.ext.xml，jar也放进相应路径了，inherits也写了
不知道怎么回事
返回顶楼
          回帖地址
0 请登录后投票
  • aolygc
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 30
  • 来自: 上海
   发表时间：2008-07-24  
我也是这样，为什么？好奇怪
找不到GWT.ext.xml，jar也放进相应路径了，inherits也写了
不知道怎么回事
返回顶楼
          回帖地址
0 请登录后投票
  • zhangcheng
  • 等级: 初级会员
  • 性别:
  • 文章: 41
  • 积分: 60
  • 来自: 北京
   发表时间：2008-10-10  
我也比较喜欢gwt本身
返回顶楼
          回帖地址
0 请登录后投票
  • sheva.wen
  • 等级: 初级会员
  • 性别:
  • 文章: 37
  • 积分: 79
  • 来自: 呼和浩特
   发表时间：2008-10-11  
@zhangcheng
感觉GWT还有一段路要走，现在还不能得到普遍的接受
返回顶楼
          回帖地址
0 请登录后投票
  • KKD
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 30
  • 来自: 杭州
   发表时间：2008-10-29  
sheva.wen 写道
@zhangcheng
感觉GWT还有一段路要走，现在还不能得到普遍的接受


对js实现的模拟桌面效果的框架怕怕 狂耗内存和cpu 老机器跑起来很吃力 不利于推广
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics