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