Dwr入門操作手冊(cè)
DWR配置和使用
設(shè)置DWR的使用是簡(jiǎn)單的:將DWR的jar文件拷入Web應(yīng)用的WEB-INF/lib目錄中，在web.xml中增加一個(gè)servlet聲明，并創(chuàng)建DWR的配置文件。
DWR的分發(fā)中需要使用一個(gè)單獨(dú)的jar文件。你必須將DWR servlet加到應(yīng)用的WEB-INF/web.xml中布署描述段中去。
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
一個(gè)可選的步驟是設(shè)置DWR為調(diào)試模式—象上面的例子那樣—在servlet描述段中將debug參數(shù)設(shè)為true。當(dāng)DWR在調(diào)試模式時(shí)，你可以從HTMl網(wǎng)頁(yè)中看到所有的可訪問(wèn)的Java對(duì)象。包含了可用對(duì)象列表的網(wǎng)頁(yè)會(huì)出現(xiàn)在/WEBAPP/dwr這個(gè)url上，它顯示了對(duì)象的公共方法。所列方法可以從頁(yè)面中調(diào)用，允許你，第一次，運(yùn)行服務(wù)器上的對(duì)象的方法。下圖顯示了調(diào)試頁(yè)的樣子:
調(diào)試頁(yè)
現(xiàn)在你必須讓DWR知道通過(guò)XMLHttpRequest對(duì)象，什么對(duì)象將會(huì)接收請(qǐng)求。這個(gè)任務(wù)由叫做dwr.xml的配置文件來(lái)完成。在配置文件中，定義了DWR允許你從網(wǎng)頁(yè)中調(diào)用的對(duì)象。從設(shè)計(jì)上講，DWR允許訪問(wèn)所有公布類的公共方法，但在我們的例子中，我們只允許訪問(wèn)幾個(gè)方法。下面是我們示例的配置文件:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<!-- javascript的對(duì)象是TestDWR,create="new"是DWR自己創(chuàng)建類,通過(guò)new關(guān)鍵字創(chuàng)建java類的實(shí)例 -->
<create creator="new" javascript="TestDWR">
<param name="class" value="com.yd.colbean.TestDWR"></param>
<!-- include表示客戶端通過(guò)TestDWR可以調(diào)用服務(wù)器對(duì)象的那些方法
如果不寫則代表可以調(diào)用該類的所有公有(public)方法
-->
<include method="getHello"/>
</create>
</allow>
</dwr>
上面的文件實(shí)現(xiàn)了我們例子中的兩個(gè)目標(biāo)。首先，<convert>標(biāo)記告訴DWR將com.yd.pojos.Userss對(duì)象的類型轉(zhuǎn)換為聯(lián)合數(shù)組，因?yàn)椋鲇诎踩脑颍珼WR默認(rèn)的不會(huì)轉(zhuǎn)換普通bean。第二，<create>標(biāo)記讓DWR暴露出com.yd.imp.UserCol類給JavaScript調(diào)用;我們?cè)陧?yè)面中使用JavaScript文件被javascript屬性定義。我們必須注意<include>標(biāo)記，它指明了com.yd.imp.UserCol類的哪些方法可用。
1: 基本的客戶端發(fā)送值和接受值
過(guò)程：
1：導(dǎo)入包dwr.jar
2: 修改web。Xml文檔
3：編寫java處理類（代碼從簡(jiǎn)）
package com.yd.colbean;
public class TestDWR {
public String getHello(String name){
return "你好: "+name;
}
}
4：編寫Dwr.xml，在其中暴露可以腳本中間調(diào)用的方法。其中javascript="TestDWR"指在 客戶端腳本中調(diào)用的名字。<include method="getHello"/> 暴露的方法
<dwr>
<allow>
<create creator="new" javascript="TestDWR">
<param name="class" value="com.yd.colbean.TestDWR"/>
<include method="getHello"/>
</create>
</allow>
</dwr>
5：下面編寫Test1.jsp
先在jsp頁(yè)面中間增加下面的代碼。這個(gè)可以在上面提到的測(cè)試頁(yè)面中間找到，復(fù)制過(guò)來(lái)即可
<script type='text/javascript' src='/TestDWR1/dwr/interface/TestDWR.js'></script>
<script type='text/javascript' src='/TestDWR1/dwr/engine.js'></script>
<script type='text/javascript' src='/TestDWR1/dwr/util.js'></script>
<!--這里的代碼是從前面的調(diào)試頁(yè)面復(fù)制過(guò)來(lái)的。à
<!—下面的代碼自己編寫，進(jìn)行業(yè)務(wù)處理-->
<SCRIPT type='text/javascript'>
function test1(){
//通過(guò)方法得到值
var s=DWRUtil.getValue("username"); //使用getvalue方法得到id為username的值
TestDWR.getHello(s,del)//調(diào)用getHello方法，第一個(gè)參數(shù)為傳遞的值，最后一個(gè)參數(shù)為回調(diào)程序
}
//回調(diào)程序，參數(shù)為返回的結(jié)果
function del(data){
//將值保存在頁(yè)面的變量中間
DWRUtil.setValue("a",data); //調(diào)用setValue方法來(lái)設(shè)置值
DWRUtil.setValue("rst",data);
}
</SCRIPT>
使用DWRUtil必須注意的事項(xiàng)：必須在web.xml中配置DWR Servlet在web服務(wù)器啟動(dòng)時(shí)就加載實(shí)例化即 配置
<load-on-startup>1</load-on-startup>
</head>
<body>
<INPUT type="text" id="username">
<INPUT type="button" value="提交" onclick="test1()">
<INPUT type="text" id="rst">
<div id="a">
</div>
下面點(diǎn)擊按鈕就可以通過(guò)ajax向服務(wù)器發(fā)請(qǐng)求。
2: 對(duì)表格數(shù)據(jù)進(jìn)行操作
剛才我們?cè)诳蛻舳耸褂梦谋究蚝蚫iv塊來(lái)輸入數(shù)據(jù)可接受數(shù)據(jù)，在這個(gè)中間可以使用下面的方法來(lái)處理數(shù)據(jù)。
DWRUtil.getValue(“username”); //這個(gè)方法得到頁(yè)面中間id為username的值
DWRUtil.setValue(“rst”,”你好”); //這個(gè)方法設(shè)置頁(yè)面中間id為username的值
在客戶端顯示數(shù)據(jù)還有其他的方式，其中使用比較多的有表格顯示數(shù)據(jù)集合，下拉框顯示多條數(shù)據(jù)。
在dwr中間可以使用方法來(lái)比較方便的再客戶端操作顯示數(shù)據(jù)
先看基本的方法
DWRUtil.removeAllOptions('rst');//刪除列表中的所有option
DWRUtil.addOptions('rst', goods,"id","msg");
//添加option對(duì)象，goods是對(duì)象數(shù)組，其屬性id作為option的value值。其屬性msg作為option的text的值
DWRUtil.removeAllRows("rst");//刪除tbody中間所有的行
DWRUtil.addRows("rst", goods,[getid, getmsg]);//添加表的行，goods數(shù)組
下面例子說(shuō)明：
先看后臺(tái)bean：
Message.java封裝基本的消息
package com.yd.colbean;
public class Message {
private Integer id;
private String msg;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
控制類
package com.yd.colbean;
import java.util.ArrayList;
import java.util.List;
public class UserCol {
private static List ls=new ArrayList();
//模擬得到所有的的消息集合,
public List getUserMessage(){
if(ls.size()<2){//如果消息數(shù)量太少，就刪除，另外增加，在實(shí)際中應(yīng)該從數(shù)據(jù)庫(kù)中取值
ls.clear();
for(int i=0;i<6;i++){
Message msg=new Message();
msg.setId(new Integer(i));
msg.setMsg("消息內(nèi)容"+i);
ls.add(msg);
}
}
return ls;
}
}
配置文件
Web.xml同上
dwr.xml
<dwr>
<allow>
<!-- convert將Message的集合變成javascript中間的對(duì)象數(shù)組-->
<convert converter="bean" match="com.yd.colbean.Message"/>
<create creator="new" javascript="userAction" scope="session">
<param name="class" value="com.yd.colbean.UserCol"></param>
<include method="getUserMessage" />
</create>
</allow>
</dwr>
注意在服務(wù)器返回集合到客戶端時(shí)，需要進(jìn)行轉(zhuǎn)換位javascript的對(duì)象。需要定義convert
下面是
Test1.jsp
同樣需要復(fù)制
<script type='text/javascript' src='/TestDWR2/dwr/interface/userAction.js'/>
<script type='text/javascript' src='/TestDWR2/dwr/engine.js'></script>
<script type='text/javascript' src='/TestDWR2/dwr/util.js'></script>
到頁(yè)面中間
<SCRIPT type='text/javascript'>
//這個(gè)函數(shù)在點(diǎn)擊按鈕的時(shí)候調(diào)用。首先刪除rst這個(gè)tbody中間的內(nèi)容。然后請(qǐng)求服務(wù)器的方法
function test1() {
DWRUtil.removeAllRows("rst");
userAction.getUserMessage(fillTable);
}
//這里定義對(duì)數(shù)據(jù)的轉(zhuǎn)化規(guī)則，轉(zhuǎn)換規(guī)則是用對(duì)象數(shù)據(jù)中的每一個(gè)對(duì)象來(lái)進(jìn)行轉(zhuǎn)換，返回一個(gè)字符串或其他對(duì)象，顯示在表格的td中間
var getid = function(unit) {
if (unit.id % 2 == 0)
return "<font color=red>"+unit.id+"</font>";
else
return "<font color=green>"+unit.id+"</font>";
};
var getmsg = function(unit) { return unit.msg};
var bt=function(unit) {
return "<input type='button' value='delete' onclick='alert(\""+unit.id+"\");'/>";
};
//回調(diào)函數(shù) ，在這里會(huì)對(duì)返回的goods對(duì)象集合，循環(huán)調(diào)用對(duì)應(yīng)的轉(zhuǎn)化規(guī)則來(lái)得到?jīng)]一行的內(nèi)容來(lái)顯示
function fillTable(goods) {
//對(duì)于dwr2，我們需要增加下面這個(gè)語(yǔ)句
//這個(gè)方法用來(lái)設(shè)置dwr是不是轉(zhuǎn)化對(duì)應(yīng)的html標(biāo)簽
DWRUtil.setEscapeHtml(false);
DWRUtil.addRows("rst", goods,[getid, getmsg,bt]);
}
</SCRIPT>
</head>
<body>
<INPUT type="button" value="得到消息" onclick="test1()">
<table>
<thead> <!—這個(gè)是表格的頭 -->
<th>id</th>
<th>msg</th>
<th>aa</th>
</thead>
<tbody id="rst"> <!—這個(gè)是表格的主體，使用ajax來(lái)動(dòng)態(tài)的修改 -->
</tbody>
</table>
</body>
最后顯示結(jié)果
點(diǎn)擊按鈕
