作者:
beauty9235
链接：
http://beauty9235.javaeye.com/blog/229632
发表时间: 2008年07月04日
声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！
dwr动态载入小结
笔记在实际开发中用到dwr框架，一直以来，常为加载中提示用户等待这问题困扰，经笔者研究，摸索出一个切实可行的方案，供大家参考。
实例如下:
<a style="cursor:hand" onclick="changeStatus(this);Test.invoke('${parameters}','${pageId}',callBack);"><img src='/icon.gif'></a>
函数说明:
changeStatus我们将用来改变提示状态值
Test类的invoke函数将触发从台数据库取出值
然后通过回调函数callBack负责在页面显示出来
页面配置
<script type='text/javascript' src='/dwr/interface/Test.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>
<script type='text/javascript' src="/js/prototype-1.4.0.js"></script>
dwr.xml
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="Test">
<param name="class" value="pakage.Test"/>
</create>
<convert converter="bean" match="pakage.Test"/>
</allow>
</dwr>
回调函数
var callBack=function(data){
var pageId=data.pageId;
var list=data.listEntityBean;
if ($(pageId).style.display == "none") {
$(pageId).style.display="block";
var htmlStr = "";
for (var i = 0; i < list.length; i++) {
htmlStr +=...//这里是将list中的值取出来给一个字符串
}
$(pageId).innerHTML = htmlStr;
return;
}
$(pageId).style.display="none";
}
pakage.Test类
public class Test {
private String pageId;
private List list;
public String getPageId() {
return pageId;
}
public void setPageId(String pageId) {
this.pageId = pageId;
}
public String getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
static Log log= LogFactory.getLog(Test.class);
public void invoke(String parameter,String pageId){
this.setPageId(pageId);
this.list=...//这里根据参数从数据库里取出值来
return this;
}
至些我们完成的dwr的编写。
function changeStatus(obj){
var htmlStr = "";
var oPopup = window.createPopup();
DWREngine.setPreHook(function() { //这是正在加载的代码
htmlStr = "<img src=\"/loading.gif\">";
obj.innerHTML = htmlStr;//这里是改变传入对象的值，是dwr正在加载时的提示,如loading,我这里是用的是图片
var oPopupBody = oPopup.document.body;
oPopupBody.innerHTML = "<img src='/admin/images/spinner.gif'>";
oPopup.show((Math.abs(Math.round((document.body.clientWidth-50) / 2))), Math.abs(Math.round((document.body.clientHeight-50)/ 2)), 100, 100, document.body);
});
DWREngine.setPostHook(function() { //这是加载完成的代码
htmlStr = "<img src=\"/loadok.gif\">";//这里是改变传入对象的值，是dwr加载时完成的提示,如load ok,我这里是用的是图片
obj.innerHTML = htmlStr;
oPopup.hide();
});
}
以上代码，是我在项目中抽取出来的一部份。
小说明一下：
var oPopup = window.createPopup();这个函数用于创建浮动页面的loading载入提示，加载完成后将对象进行oPopup隐藏处理oPopup.hide();
如果不须要，changeStatus这个函数完全可以这样写
function changeStatus(obj){
DWREngine.setPreHook(function() { //这是正在加载的代码
obj.innerHTML = "<img src=\"/loading.gif\">";//这里是改变传入对象的值，是dwr正在加载时的提示,如loading,我这里是用的是图片
});
DWREngine.setPostHook(function() { //这是加载完成的代码
obj.innerHTML = "<img src=\"/loadok.gif\">";//这里是改变传入对象的值，是dwr加载时完成的提示,如load ok,我这里是用的是图片
});
}
至此我们完美的完成了dwr加载时的提示问题，这样也使用户体更强，更具人性化.
本文的讨论也很精彩，浏览讨论>>
JavaEye推荐