首先,我們把wiki上的文檔"使用"一下: 原文地址http://wiki.opensymphony.com/display/WW/Remote+DIV+Tag
Remote DIV 標(biāo)簽和普通的Html的DIV標(biāo)簽工作方式是一樣的,但是它可以通過標(biāo)簽內(nèi)指定的一個(gè)網(wǎng)址來裝載它的內(nèi)容.
屬性
| 名稱 | 描述 |
| id (必有) |
DIV的ID |
| href (必有) |
用來獲取內(nèi)容的網(wǎng)址 |
| delay |
第一次裝載內(nèi)容需要延遲多長時(shí)間 (毫秒) |
| updateFreq |
多長時(shí)間重新取一次內(nèi)容 (毫秒) |
| loadingText |
裝載內(nèi)容中對(duì)用戶顯示的文字 (特別是取內(nèi)容的時(shí)候要花費(fèi)很長的時(shí)間 |
| errorText |
如果取內(nèi)容時(shí)發(fā)生了錯(cuò)誤,向用戶顯示的提示 |
| showErrorTransportText |
true/false - 當(dāng)獲取內(nèi)容有問題的時(shí)候,是否把錯(cuò)誤信息當(dāng)作內(nèi)容顯示 |
| listenTopics |
監(jiān)聽的Topic名稱(多個(gè)逗號(hào)分割), 將會(huì)導(dǎo)致此DIV重新獲取內(nèi)容 |
| afterLoading |
獲取內(nèi)容后要執(zhí)行的Javascript代碼 |
其他功能
使用javascript代碼我們還可以刷新內(nèi)容,停止或者開始刷新組件.例如一個(gè)id是"remotediv1"的div組件:
開始刷新的javascript代碼:
remotediv1.start();
停止刷新的javascript代碼:
remotediv1.stop();
刷新內(nèi)容的javascript代碼:
remotediv1.bind();
翻譯完畢(注:原文是會(huì)被隨時(shí)修改的,請以原文為主)
其中href的地址會(huì)自動(dòng)加上Web App的前綴,如果你已經(jīng)自己寫上了,就不會(huì)在加了,所以要避免子目錄和web app同名.
Remote DIV標(biāo)簽我覺得最值得關(guān)注的特性包括:
- 可以自己重新裝載自己的內(nèi)容
- 可以監(jiān)聽Topic,也就是別的動(dòng)作可以引發(fā)更新內(nèi)容的行為
- JavaScript代碼可以控制它的行為
首先我們來看Remote Div標(biāo)簽的最簡單的一個(gè)例子example1.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="ww" uri="/webwork" %>
<html>
<head>
<title>Ajax Examples</title>
<jsp:include page="../commonInclude.jsp"/>
</head>
<body>
<ww:div id="once" theme="ajax" cssStyle="border: 1px solid yellow;"
href="/AjaxTest.action" delay="5000" loadingText="loading...">Initial Content</ww:div>
</body></html> |
注:了解commonInclude.jsp,請閱讀"AJAX之介紹".
我們再來看example1.jsp這個(gè)文件,內(nèi)容非常簡單,使用了一個(gè)ww:div標(biāo)簽,設(shè)置了一個(gè)id,使用的是ajax這個(gè)模板(如果你想定義自己的模板,請務(wù)必參考ajax模板的編寫方法),設(shè)置讀取內(nèi)容的url為"/AjaxTest.action",設(shè)置延遲5000毫秒后讀取內(nèi)容,裝載內(nèi)容時(shí)顯示的文本設(shè)置為"loading...",div顯示時(shí)的初始內(nèi)容時(shí)"Initial Content".
是的,很簡單,在打開網(wǎng)頁5秒后,標(biāo)簽會(huì)自動(dòng)去訪問"/AjaxTest.action",并把獲取的內(nèi)容設(shè)置為Div的內(nèi)容.
我們再來看一個(gè)定時(shí)自動(dòng)刷新的例子:
<ww:div id="twoseconds" cssStyle="border: 1px solid yellow;" href="/AjaxTest.action"
theme="ajax" delay="2000" updateFreq="3000" errorText="There was an error">Initial Content</ww:div> |
這個(gè)標(biāo)簽產(chǎn)生的結(jié)果每3秒鐘刷新一次DIV的內(nèi)容,和上面的差不多,只是多了一個(gè)updateFreq設(shè)置.
此標(biāo)簽還有一個(gè)afterLoading屬性,使用方法如下:
| <ww:div ...... afterLoading=’alert("done")’>Initial Content</ww:div> |
或者
| <ww:div ...... afterLoading="alert(\"done\")">Initial Content</ww:div> |
注意:目前使用afterLoading="alert(’done’)"的方法好像有點(diǎn)問題,好像是dojo內(nèi)部處理引發(fā)的問題.
監(jiān)聽Topic是通過JavaScript代碼或者其他部件來觸發(fā)的,使用JavaScript的示例如下:
<ww:div id="once" theme="ajax" cssStyle="border: 1px solid yellow;" href="/ajax/test1.jspa"
delay="5000" loadingText="loading..." listenTopics="scud1" >Initial Content</ww:div> |
這個(gè)Div標(biāo)簽將監(jiān)聽Topic為"scud1"的事件.
我們可以使用一個(gè)普通按鈕來觸發(fā)事件:
<script type="text/javascript">
function scud1() { dojo.event.topic.publish( "scud1", "alert(’test’);" ); }
</script>
<INPUT type="button" onclick="scud1()" value="click"> |
點(diǎn)擊這個(gè)按鈕,將會(huì)導(dǎo)致Div標(biāo)簽重新裝入內(nèi)容. 注意一個(gè)Div標(biāo)簽可以監(jiān)聽多個(gè)Topic,用逗號(hào)分割即可.
至于使用其他部件觸發(fā)事件的代碼,我們將會(huì)在使用Remote A Tag時(shí)用到.