2007-06-13

使用Dwr渲染table

关键字: Dwr ajax 表格

第一次尝试使用Dwr来开发ajax，js也没有想像那么难写。有一个感觉，Dwr的设计很像axis1，连显示服务的风格都很像，呵呵，是不是作者使借签了axis的设计思想啊

1、设计目标

避免查询的时候刷新页面的全部区域，只用改变查询结果显示的部分

2、web.xml中部署Dwr

xml 代码
  1. <servlet>  
  2.         <servlet-name>dwr</servlet-name>  
  3.         <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>  
  4.         <init-param>  
  5.             <param-name>debug</param-name>  
  6.             <param-value>true</param-value>  
  7.         </init-param>  
  8.     </servlet>  
  9.     <servlet-mapping>  
  10.         <servlet-name>dwr</servlet-name>  
  11.         <url-pattern>/dwr/*</url-pattern>  
  12.     </servlet-mapping>  

3、Dwr.xml部置

xml 代码
  1. <dwr>  
  2.     <allow>  
  3.         <create creator="spring" javascript="FileManager">  
  4.             <param name="beanName" value="fileItemManager" />  
  5.             <include method="getFileItemsByParent" />  
  6.         </create>  
  7.         <convert match="com.csroad.fileproject.model.FileItem"  
  8.             converter="bean">  
  9.             <param name="include" value="id,name,fileType,parentId" />  
  10.         </convert>  
  11.     </allow>  
  12.   
  13. </dwr>  

客户端调用的是Spring代理的javabean，所有creator要使用spring，如果是普通javabean，则使用new就可以了。javascript属性指定了客户端的js名字

参数，spring中是使用beanName来获取spring中的bean。如果是普通的javabean，则使用class，值为java类

需要注意的是convert，如果传递的对象不是基本类型，则需要配置javabean，并指定相关的属性。如配置文件中的id,name

需要说明的是，fileItemManager的方法是一返回一个java.util.List对象

4、页面中插入js

js 代码
  1. <script type='text/javascript' src='${ctx}/dwr/interface/FileManager.js'></script>   
  2.   
  3. <script type='text/javascript'   
  4.     src='<%=request.getContextPath()%>/dwr/engine.js'>   
  5. </script>   
  6. <script type='text/javascript'   
  7.     src='<%=request.getContextPath()%>/dwr/util.js'></script>  

 

其中${ctx}/dwr/inteface/FileManger.js的名字要和前面dwr.xml中javscript属性的值一致。

5、编写JS代码

js 代码
  1. <script type="text/javascript">   
  2. //查询函数   
  3. function query(parentId,label,dep){   
  4.     FileManager.getFileItemsByParent(parentId,getFileList);   
  5.     DWRUtil.useLoadingMessage("文件正在载入中，请稍等...........");       
  6.  }   
  7.   //回调函数   
  8.    function getFileList(data){   
  9.    var cellfuncs=[   
  10.    function(data){   
  11.    if(data.fileType==1){   
  12.    return data.name;   
  13.    }   
  14.    var aDom=document.createElement("a");   
  15.    aDom.setAttribute("href","javascript:query('"+data.id+"','"+data.name+"','"+fileDep+"')");   
  16.    var aText=document.createTextNode(data.name);   
  17.    aDom.appendChild(aText);   
  18.    return aDom;   
  19.     },   
  20.    function(data){   
  21.    if(data.fileType==0){   
  22.     return "目录";   
  23.     }   
  24.    return "可下载文件";   
  25.    },   
  26.    function(data){   
  27.     if(data.fileType==0){   
  28.     return "无相关操作";   
  29.     }   
  30.    var aDom=document.createElement("a");   
  31.    aDom.setAttribute("href","javascript:openWindow('/scrood/yg/downloadRecordAction.html?method=applyDownload&dep="+fileDep+"&fileId="+data.id+"')");   
  32.    var aText=document.createTextNode("申请下载");   
  33.    aDom.appendChild(aText);   
  34.    return aDom;   
  35.      
  36.    }   
  37.    ];   
  38.    DWRUtil.removeAllRows("fileResultBody");   
  39.    DWRUtil.addRows('fileResultBody', data,cellfuncs,{       
  40.     rowCreator:function(options) {       
  41.         var row = document.createElement("tr");       
  42.          return row;       
  43.     },       
  44.     cellCreator:function(options) {       
  45.         var td = document.createElement("td");       
  46.         td.setAttribute("align","center");       
  47.         return td;       
  48.     }              
  49.     });          
  50.    }   
  51.  </script>  

 

在query查询函数中，调用FileManager得到查询结果，和普通的java方法调用一样。但要注意，第二个参数传入的是回调函数，用于处理响应值，注要是指如何渲染。

在回调函数中第一个要定义的就是cellfuns，它代表每一列值的表现形势，有多少function，就有多少列。每一个单元格的内容可以是简单的值，也可以是一个包含了其它HTML标签的Document.

接下来就是具体的处理参数值的过程。DwrUtil是DWR框架提供的一个非常有用的功具函数，包含通常的是JS处理功能，如动态添加select的option等，可以单独使用。

DwrUtil.addRows('fileResultBody',data,cellfuncs,...)是用来实际插入数据的，第一个插入是要插入数据所在的表格的ID，最好是tbody的ID，data为值，cellfuncs前面已经介绍了，最后两个参数是用于创建<tr>和<td>属性的

 

评论
hxirui 2007-07-18
不知道大家是否遇到过DWR报找不到DWREngine错误的情况,当然是在那三个js文件都存在的情况下,好像和ie的设置有关,好像选中 使用http1.1 就可以,但是不是很有规律.
juliashine 2007-07-17
SteveGY 写道
DWR适用于类似RPC方式的设计，如果有比较复杂的UI，仅使用DWR有很多不利的地方，HTML的表现层不是那么容易处理的，特别是当你需要处理浏览器兼容性的时候更是麻烦。
安全性也是一个问题，如果使用DWR，因为DWR没有提供安全性的指南，实现起来基本依赖于使用者的经验和具体应用环境。
在大多数的web应用环境中，DWR并不是合适。反而是那些js库配合jsp或servlet（asp也可以）在服务器端组合完成数据和html表现更符合具有web开发经验的团队的基本常识和开发经验。现在有很多js的库Yahoo UI, prototype, dojo, 一般的都带有某种ajax.update方法，这才是web开发中快速实用的技巧。


dwr关注的中心是信息的传递，组装表现确实非其所长，就我的理解来说，将数据的传递与具体的表现组装方式分离是一种优美的方式，dwr简化了数据的包装与传递，在数据需求不变的情况下可以只将注意力集中于表现的变化。我们开发中一般使用dwr结合prototype或者jquery
blogbin 2007-07-12
卒子99 写道
我没有做过大型的开发。不过SteveGY提到的
那些js库配合jsp或servlet（asp也可以）在服务器端组合完成数据和html表现更符合具有web开发经验的团队的基本常识和开发经验

我想首先这就不符合MVC模式，页面的渲染和服务端代码混在一起，一是很难开发，二是更难维护。如果页面需要做出修改，那到底是UI的工作，还是programmer的事情呢。


服务端代码并不局限于处理页面渲染，可能包括业务逻辑，事务处理，安全管理以及数据持久化等操作。WEB瘦客户端先天不足限制页面渲染的能力，复杂的界面表现仍然需要服务端代码提供帮助。

ps:
过于严格的分工可能会造成沟通成本的上升，设计模式的滥用也会提高开发和维护的难度。

blogbin
卒子99 2007-06-21
我没有做过大型的开发。不过SteveGY提到的
那些js库配合jsp或servlet（asp也可以）在服务器端组合完成数据和html表现更符合具有web开发经验的团队的基本常识和开发经验

我想首先这就不符合MVC模式，页面的渲染和服务端代码混在一起，一是很难开发，二是更难维护。如果页面需要做出修改，那到底是UI的工作，还是programmer的事情呢。
SteveGY 2007-06-18
DWR适用于类似RPC方式的设计，如果有比较复杂的UI，仅使用DWR有很多不利的地方，HTML的表现层不是那么容易处理的，特别是当你需要处理浏览器兼容性的时候更是麻烦。
安全性也是一个问题，如果使用DWR，因为DWR没有提供安全性的指南，实现起来基本依赖于使用者的经验和具体应用环境。
在大多数的web应用环境中，DWR并不是合适。反而是那些js库配合jsp或servlet（asp也可以）在服务器端组合完成数据和html表现更符合具有web开发经验的团队的基本常识和开发经验。现在有很多js的库Yahoo UI, prototype, dojo, 一般的都带有某种ajax.update方法，这才是web开发中快速实用的技巧。
juliashine 2007-06-15
dwr同样有struts的creator
卒子99 2007-06-14
不过不是有一个小问题，整个系统是基于Struts+Spring+iBatis开发的
我的安全域配置是配置是根据URL+action(action的方法名)+用户身份实现的。使用dwr后，就变成直接调用事业层的方式了，安全校验就失效了，不知知道在dwr中有什么方法，可以让其调用action来完成数据获取
jason823 2007-06-14
dwr确实很简单易用，尤其提供了Spring的支持之后。
卒子99
搜索本博客
最近加入圈子
存档
最新评论