DWR 2.0RC1应用

最新推荐文章于 2024-09-22 11:17:00 发布

iteye_6794

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量83

点赞数

文章标签： javascript web.xml java ViewUI

1.概述

DWR(http://getahead.ltd.uk/dwr/) 是一种新的Ajax方式，有别于访问URL的传统模式，DWR自己在服务端作了一个通用的Service层Gateway(Proxy)，使得客户端的 Javascript 可以直接操作远程的服务器端的Service层，再配合TrimPath JSTemplate 以Template而不是Dom Builder的方式将Service层返回的POJO渲染成复杂的页面，创造一种新的纯Ajax编程模式。

时至今日，DWR的应用讲解已经很多，大家可以自己google。这里只讲几个重点：

标准的安装与使用；
TrimPath JSTemplate的应用；
DWR2.0 推技术的应用。

SpringSide在BookStore示例的图书管理--封面图片Ajax上传中，用DWR获取已上传部分的大小。

2. 安装与使用

2.1 下载DWR

官方网站上最新版本2.0RC1，另外有时候最新版本需要到dwr.dev.java.net 下载。

2.2 配置文件

使用springside构建件安装的话会自动生成配置文件，并修改WEB-INF/web.xml文件

如果要手工编写，见examples/bookstore/webapp/WEB-INF 目录中的范例文件

修改web.xml，增加dwr-invoker servlet

增加dwr.xml，配置导出的service服务及要转换到客户端javascript 的bean.

如果安全要求不严格，可以很简单就配完，如果严格就麻烦一点，见dwr.xml的注释。

2.3 客户端调用

1.引入DWR一个动态生成的JavaScript及两个标准的Utils.js:

Bookservice.js的名字在服务端dwr.xml里已定义

<script class="code-quote" src="&lt;span" type="text/javascript">"<c:url value="</span>/dwr/<span class="code-keyword">interface</span>/BookService.js<span class="code-quote">"/>"</span> type=<span class="code-quote">"text/javascript"</span>></script>
<script class="code-quote" src="&lt;span" type="text/javascript">"<c:url value="</span>/dwr/engine.js<span class="code-quote">"/>"</span> type=<span class="code-quote">"text/javascript"</span>></script>
<script class="code-quote" src="&lt;span" type="text/javascript">"<c:url value="</span>/dwr/util.js<span class="code-quote">"/>"</span> type=<span class="code-quote">"text/javascript"</span>></script>

2.使用BookService对象：

在其后的Javascript里，就可以用象在Java里面一样使用Bookservice对象和他的方法，如

 BookService.findBooksByCategory(category, drawBooks);

其中第一个参数是服务端findBookByCategory的参数，第2个参数是返回时进行处理的函数。

3.使用TrimPath JSTemplate渲染返回的POJO：

TrimPath JSTemplate 是DWR绝配的返回结果(javascript object，not html or xml) 渲染方法。

在官方网站http://trimpath.com/project/wiki/JavaScriptTemplates下载并拷贝template.js到任意目录，然后在页面加入

<script class="code-quote" src="&lt;span" type="text/javascript">"<c:url value="</span>/scripts/template.js<span class="code-quote">"/>"</span> type=<span class="code-quote">"text/javascript"</span>></script>

然后按照Trimpath的类似freemarker简单语法在里编写模版并把JS POJO放到模版里渲染.

{for b in mybooks}
 <p>${b.name}</p>
{/for}

具体演示在1.0m3的bookstore前台WebServcie页面。

4. 推技术

DWR2.0.x的推技术以推发送消息，适用于ChatRoom，股票信息显示等场景，优于现在JS定时轮询服务端的策略，大大节省服务端的资源（数据无变化时不需要应答客户端的定时查询）。

4.1. 推消息的接收页

设置接收由服务端推送过来的消息的JavaScript

 1. <script type='text/javascript' src='<c:url value="/dwr/engine.js"/>'></script>

    <script type='text/javascript' src='<c:url value="/dwr/util.js"/>'></script>
    <script type='text/javascript' src='<c:url value="/dwr/interface/orderNotice.js"/>'></script>


  2. <script language="javascript">
  function receiveMessages(id) {
 $('orderNotice').innerHTML = "收到id为" + id + "的新订单!";
 $('orderNotice').show();
  }
    </script>
 3.<body οnlοad="DWREngine.setReverseAjax(true);">

    <div id="orderNotice"/>

第一，引入dwr及那个负责执行推操作的Java类(OrderNotice)的js

第二，编写任意的接收信息的js函数

第三，在body的onload里设定ReverseAjax=true，开始侦听信息

4.2 负责推送消息的Java类

public class OrderNotice {
public void noticeNewOrder(int id) { WebContext wctx = WebContextFactory.get();
 ScriptBuffer script = new ScriptBuffer();
script.appendScript("receiveMessages(").appendData(id).appendScript(");");
 ServerContext sctx = ServerContextFactory.get(wctx.getServletContext());
 Collection pages = sctx.getScriptSessionsByPage("/springside/admin/top.jsp");
for (ScriptSession session : pages) {
 session.addScript(script);
 }
 }
}