DWR 实现 小纸条 （站内短信） 模块展示方法简单介绍，以后会将这些信息进行整理后发上来

最近开发项目的时候，开始使用SSH框架，后来项目组临时决定采用DWR框架作为AJAX开发框架使用，现在这个框架也使用了3个月了已经，整体感觉还是不错的。

现在介绍一个我在实际项目中采用的DWR开发的一个程序在线小纸条程序，JAVA部分在这里就不贴出了，只是简单介绍一个我的开发思路以及得到数据库结果后的一些业务处理。

数据库结构如下：

这个数据库结构为hibernate映射Bean

private SmallNoteId id;（主键）
private String content;//小纸条内容
private String checkTime;//查看时间
private String status;//小纸条状态

 

这一部分为复合主键：    

private String theSender;//发送人
private String sendTime;//接收时间
private String receiver;//接收人

 

配置文件部分：

web.xml中的Dwr配置文件

<servlet>
   <servlet-name>dwr-User-invoker</servlet-name>
   <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
   <init-param>
    <param-name>debug</param-name>
    <param-value>true</param-value>
   </init-param>
   <init-param>
    <param-name>config-User</param-name>
    <param-value>/WEB-INF/dwrUser.xml</param-value>
   </init-param>
   <init-param> 
    <param-name>logLevel</param-name>
    <param-value>DEBUG</param-value>
   </init-param>
   <load-on-startup>10</load-on-startup> 
</servlet>
<servlet-mapping>
   <servlet-name>dwr-User-invoker</servlet-name>
   <url-pattern>/dwrUser/*</url-pattern>
</servlet-mapping>

 

在web-inf中创建dwrUser.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN""http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<!--下面这句话，基本上照搬就行了， value="/smallNote"是Spring配置文件中的一个Bean，由于现在企业开发 一般都采用SSH框架，所以大多数人应该都能看懂了，如果实在不明白的话可以找DWR工具书看一下，已经写的很明白了-->
   <create creator="spring" javascript="SmallNote" scope="request">
    <param name="beanName" value="/smallNote" />
   </create>
<!--
这里需要说明一下，SmallNoteForm是根据上面的数据库自己写的一个form，主要是为了数据显示方便，如果不喜欢的话，就把数据库Bean都声明了即可。
因为SmallNoteForm Dwr并不认识所以需要将它声明一下才能够使用，像JAVA默认的数据类型就不用声明了
-->
   <convert converter="bean" match="com.redcollar.webapp.form.SmallNoteForm">
    <param name="include" value="theSender,sendTime,receiver,content,checkTime,status" />
   </convert> 
</allow>
</dwr>

 

这个要说明一下，工程是使用SSH框架开发的，所以DWR的类就是用Action代替了。

现在贴上页面上的JS文件来：

  <script src='/redcollar/dwrUser/interface/SmallNote.js'></script>
  <script src='/redcollar/dwrUser/engine.js'></script>
  <script src='/redcollar/dwrUser/util.js'></script>

 

这个是必须导入的，DWR所需要的JS文件。

//传入分页页数，调用DWR返回分页结果
   function getSmallNote(page)
   {
//获取用户的小纸条信息，ListSmallNote为DWR回调函数
    SmallNote.getSmallNoteByCustomer(page, ListSmallNote);
   }

//DWR返回参数展示
   function ListSmallNote(data)
   {
    DWRUtil.removeAllRows("SmallNoteList");//SmallNoteList是tbody的Id
    DWRUtil.addRows("SmallNoteList", data, cellSmallNote, {
     cellCreator:function(options) {
      var td = document.createElement("td");
      td.className="td";
      return td;
     },
     escapeHtml:false
    });
    pageUrl.innerHTML=data.page;//这一个是分页信息（我是在业务逻辑层进行封装的，大家可以根据需要进行封装。）
   }

//DWR展示所需要的样式，在这里
   var cellSmallNote = [
    function(data) { return "<input type='checkbox' name='DelIds' id='DelIds' value='"+data.theSender+","+data.sendTime+"' />"; },
    function(data) { return "<a href='#' onclick='New_SmallNoteReply(\""+data.theSender+"\")'>"+data.theSender+"</a>" },
    function(data) {
     var url = "";
     if(data.status=="0") url="unRd2.gif";
     if(data.status=="1") url="unRd1.gif";
     if(data.status=="2") url="replied2.gif";
     
     return "<img src='/redcollar/FrontStage/CustomerStage/SmallNote/"+ url +"' id='img_"+data.theSender+data.sendTime+"' title='小纸条状态'/>"; 
    },
    function(data) {
     return "<a href='#' onclick='show_SmallNote(\""+data.theSender+","+data.sendTime+"\")'>"+data.content+"</a>"; 
    },
    function(data) { return (data.sendTime).substring(0,19);},
   ];