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的形式返回,
这里item其实可以理解为后端返回的结果集了。观察
DWRUtil.addRows("recordData",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",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如何做增,删,改