dwr动态载入小结

dwr动态载入小结

笔记在实际开发中用到dwr框架，一直以来，常为加载中提示用户等待这问题困扰，经笔者研究，摸索出一个切实可行的方案，供大家参考。 实例如下: <a style="cursor:hand"  οnclick="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加载时的提示问题，这样也使用户体更强，更具人性化.