posts - 23, comments - 0, trackbacks - 0, articles - 3
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

dwr动态载入小结

Posted on 2008-08-18 17:04 beauty9235 阅读(223) 评论(0)  编辑  收藏

作者: 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推荐




只有注册用户登录后才能发表评论。


网站导航: