dojo+dwr+spring快速入门

dojo号称是不错的东西了，但其实要全面用好的确不容易的，很多控件和东西，搞起来

有一定的时间需要。之前公司的一个项目，是boss的网站，客服对　ajax要求比较高，因为要经常操作，

所以ajax是需要的了，特别是无刷新的。用的是dojo+dwr+spring,前端完全是dojo 了，是完全的静态页面，当然还是有点javascript　的，dwr+spring是不错的后端组合，dojo+dwr+spring真的有时候可以
完全代替struts,但究竟效果如后，文后小结之。现在以例子快速讲解之,本文要求先有点dwr的基础知识，看起来就
方便多了。

 

例子是典型的列表，增删改之类的了，先看静态页面bbslist.htm
<script language="JavaScript" type="text/javascript" src="dwr/engine.js"></script>
 <script language="JavaScript" type="text/javascript" src="dwr/util.js"></script>
 <script language="JavaScript" type="text/javascript" src="dwr/interface/bbs.js"></script>

<script language="JavaScript" type="text/javascript" src="dojo.js"></script>

 <script language="JavaScript" type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
  dojo.require("dojo.widget.Dialog");
  
 </script>
首先引入了dwr,dojo的js文件，还有dojo 的对话框效果，

<table〉  
 <thead>
  <!-- 列表头 -->
  <tr>
  <th width="50%" height="13">文章标题</th>
   <th width="12%">作者</th>
   <th width="18%">最新回帖时间</th>
   <th width="14%">最新回复人</th>
   <th width="6%">回复次数</th>
  </tr> 
 </thead>
 <!-- 显示记录内容 -->
 <tbody id="recordData"></tbody> 
 <!-- 显示翻页的信息 -->
 <tbody id="rollPageInfo"></tbody>

<script language="JavaScript" type="text/javascript" src="tousu/bbs/bbslist.js"></script>

这里只给出了列表头，其中recorddata,rollpageinfo都是到时候通过moontools,dojo,dwr等动态填充进去的。

 

好的，现在前端的列表页面先这样了。接下来我们看下dwr，dojo,moontools部分。先看bbslist.js这个辅助文件，它的作用是把接收前端的输入，并用dwr传递到后端spring,

var smsContentConfigQuery = {
 //定义方法:根据用户输入的条件进行查询
 queryByCon:function(){
  setRowEff.oRow = null;  //清空当前行
  pageInfoBean.pageno = 1;  //把页码设为1
    getList();
  
 }
};

 

/查询函数
function getList(){
 useLoadingMsg("");  //显示提示信息"正在加载数据，请稍候......"
 //按用户输入的查询条件进行查询,gotList是回调函数
  BBSLIST=null;
 bbs.getBbsList(.......,gotList);
}

//回调函数
function gotList(item){ 
 DWRUtil.removeAllRows("recordData");  //清除之前的所有记录
  //如果没有返回数据(item == null),则结束程序
 if(item == null){
  return;
 }

 DWRUtil.addRows("recordData", item.bbslist, cellFunctions,options); 
 BBSLIST = item.bbslist;

//页面加载时,
dojo.addOnLoad(
 function(){
  smsContentConfigQuery.queryByCon();  //根据用户输入条件进行查询
 }
);

 这里的意思其实就是dojo先加载smsContentConfigQuery.queryByCon()这个函数，

在querybycon()这里，可以进行些初始设置，之后bbs.getBbsList(.......,gotList);中
其实是通过dwr调用后端的spring进行处理了，比如返回新闻列表，以map的形式返回，

返回后，在通过调用回调函数gotList()进行处理

这里item其实可以理解为后端返回的结果集了。观察
DWRUtil.addRows("recordData", item.bbslist, cellFunctions,options); 
其中item.bbslist是什么？

  其实假设后端spring返回的是一个list,一个map的话，bbslist就是其名称，比如后端这样：

retHashMap.put("bbslist", bbslist);

明白了吧？
cellfuntions,options是什么？这是dwr里规定的了具体可以google.

var cellFunctions = [];  //定义一个数组,保存读取对象中属性的函数名称
cellFunctions = [getTitle,getUsername,getLast_time,getLast_name,getCount];

 
//定义读取对象属性的函数
//读取记录标识
function getSysId(item){
 return item.sysid;
}
//读取工单号
//读取可选地市范围
function getContent(item){
 return item.content;
}
function getUsername(item){
 return item.username;
}

function getTitle(item){
 
 //如果是精华帖
 if (item.is_key==1)
 {
 return  "<img src='/JBilling/images/goodnees.gif'>"+item.title;
 }
 else
 {
 return item.title; 
 }
 
}

function getContent(item){
 return item.content;
}

function getCount(item){
 return item.count;
}
function getWrite_time(item){
 return item.write_time;
}
function getLast_time(item){
 return item.last_time;
}
function getLast_name(item){
 return item.last_name;
}
function getIs_key()
{  return item.is_key;
 
}

 最后，DWRUtil.addRows("recordData", item.bbslist, cellFunctions,options); 
中的"recordData"看到了么？dwr把后端拿过来的数据，填充到静态页面中的
 <tbody id="recordData"></tbody> 
中了，就显示了新闻列表。

 

   小结：dojo+dwr+spring，如果用在某些场合是不错的，但要注意的时，复杂情况的话，比如一对多等
情况，用dwr+dojo这样的处理方式不一定很简单，反而有时直接struts，jstl作前端反而会更好，

起码方便美工去实施，而且这样的处理的话，有时会要动太多的脑子了，为了ajax。所以个人认为 
 dwr最后还是做为一个桥梁，其优点在于把后端的javabean,spring等东西直接暴露为前端的javascript,
减少了写javascript的功夫，但用dwr作本文这样的前端展示，不是太恰当，需要太高的技巧了。
而dojo控件很多，有时做些效果还是不错的，其他的用的太多不一定好，耗费太多内存。
  下次继续讲解dojo+dwr+spring如何做增，删，改