首先,我們把wiki上的文檔"使用"一下: 原文地址http://wiki.opensymphony.com/display/WW/Remote+DIV+Tag
Remote DIV 標簽和普通的Html的DIV標簽工作方式是一樣的,但是它可以通過標簽內指定的一個網址來裝載它的內容.
屬性
| 名稱 | 描述 |
| id (必有) |
DIV的ID |
| href (必有) |
用來獲取內容的網址 |
| delay |
第一次裝載內容需要延遲多長時間 (毫秒) |
| updateFreq |
多長時間重新取一次內容 (毫秒) |
| loadingText |
裝載內容中對用戶顯示的文字 (特別是取內容的時候要花費很長的時間 |
| errorText |
如果取內容時發生了錯誤,向用戶顯示的提示 |
| showErrorTransportText |
true/false - 當獲取內容有問題的時候,是否把錯誤信息當作內容顯示 |
| listenTopics |
監聽的Topic名稱(多個逗號分割), 將會導致此DIV重新獲取內容 |
| afterLoading |
獲取內容后要執行的Javascript代碼 |
其他功能
使用javascript代碼我們還可以刷新內容,停止或者開始刷新組件.例如一個id是"remotediv1"的div組件:
開始刷新的javascript代碼:
remotediv1.start();
停止刷新的javascript代碼:
remotediv1.stop();
刷新內容的javascript代碼:
remotediv1.bind();
翻譯完畢(注:原文是會被隨時修改的,請以原文為主)
其中href的地址會自動加上Web App的前綴,如果你已經自己寫上了,就不會在加了,所以要避免子目錄和web app同名.
Remote DIV標簽我覺得最值得關注的特性包括:
- 可以自己重新裝載自己的內容
- 可以監聽Topic,也就是別的動作可以引發更新內容的行為
- JavaScript代碼可以控制它的行為
首先我們來看Remote Div標簽的最簡單的一個例子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這個文件,內容非常簡單,使用了一個ww:div標簽,設置了一個id,使用的是ajax這個模板(如果你想定義自己的模板,請務必參考ajax模板的編寫方法),設置讀取內容的url為"/AjaxTest.action",設置延遲5000毫秒后讀取內容,裝載內容時顯示的文本設置為"loading...",div顯示時的初始內容時"Initial Content".
是的,很簡單,在打開網頁5秒后,標簽會自動去訪問"/AjaxTest.action",并把獲取的內容設置為Div的內容.
我們再來看一個定時自動刷新的例子:
<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> |
這個標簽產生的結果每3秒鐘刷新一次DIV的內容,和上面的差不多,只是多了一個updateFreq設置.
此標簽還有一個afterLoading屬性,使用方法如下:
| <ww:div ...... afterLoading=’alert("done")’>Initial Content</ww:div> |
或者
| <ww:div ...... afterLoading="alert(\"done\")">Initial Content</ww:div> |
注意:目前使用afterLoading="alert(’done’)"的方法好像有點問題,好像是dojo內部處理引發的問題.
監聽Topic是通過JavaScript代碼或者其他部件來觸發的,使用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> |
這個Div標簽將監聽Topic為"scud1"的事件.
我們可以使用一個普通按鈕來觸發事件:
<script type="text/javascript">
function scud1() { dojo.event.topic.publish( "scud1", "alert(’test’);" ); }
</script>
<INPUT type="button" onclick="scud1()" value="click"> |
點擊這個按鈕,將會導致Div標簽重新裝入內容. 注意一個Div標簽可以監聽多個Topic,用逗號分割即可.
至于使用其他部件觸發事件的代碼,我們將會在使用Remote A Tag時用到.