首先,我们把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时用到.