jackyrong

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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如何做增,删,改

posted on 2009-04-05 21:37  jackyrong的世界  阅读(1728)  评论(0编辑  收藏  举报