★☆

   DWR是一个框架，简单的说就是能够在javascript直接调用java方法，而不必去写一大堆的javascript代码。它的实现是基于ajax的，可以实现无刷新效果。

    网上有不少DWR的例子，但大都只是某种方法的调用，本文只在使用层面上介绍DWR，并不涉更多的技术与设计，其目的是让初学者能够很快的学会各种java方法在javascript中是如何调用的。

    本文以DWR 1.1 为基础，对于DWR 2.0，因为还没有正式发布版，故不做介绍。
一、 dwr配置篇之web.xml
  1 、最小配置
<servlet>
 <servlet-name>dwr-invoker</servlet-name>
 <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
</servlet>
<servlet-mapping>
 <servlet-name>dwr-invoker</servlet-name>
 <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
2、当我们想看DWR自动生成的测试页（Using debug/test mode）时，可在servlet配置中加上
<init-param>
 <param-name>debug</param-name>
 <param-value>true</param-value>
</init-param>
这个参数DWR默认是false。如果选择true，我们可以通过 http://localhost:port/app/dwr看到你部署的每个DWR class。并且可以测试java代码的每个方法是否运行正常。为了安全考虑，在正式环境下你一定把这个参数设为false。
3、多个dwr.xml文件的配置
可能有几种情况，我们一一列举。一个servlet，多个dwr.xml配置文件；多个servlet，每个servlet对应一个或多个dwr.xml配置文件。
3.1、一个servlet，多个dwr.xml配置文件
<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
      <param-name>config-1</param-name>
      <param-value>WEB-INF/dwr1.xml</param-value>
    </init-param>
    <init-param>
      <param-name>config-2</param-name>
      <param-value>WEB-INF/dwr2.xml</param-value>
    </init-param>
</servlet>
在这种配置下，param-name的值必须以config开头。param-name可以有>=0个。如果没有param-name，那么将会读取 WEB-INF/dwr.xml。如果有大于零个param-name，那么WEB-INF/dwr.xml文件将不会被读取。
3.2 、多个 servlet ，每个 servlet 对应一个或多个 dwr.xml
<servlet>
   <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
</servlet>
<servlet>
   <servlet-name>dwr-invoker1</servlet-name>
   <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
   <init-param>
     <param-name>config-admin</param-name>
     <param-value>WEB-INF/dwr1.xml</param-value>
   </init-param>
   <init-param>
     <param-name>debug</param-name>
     <param-value>true</param-value>
   </init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
   <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
   <servlet-name>dwr-invoker1</servlet-name>
   <url-pattern>/dwr1/*</url-pattern>
</servlet-mapping>
在这种情况下，我们可以根据 J2EE security 来控制权限，针对不同 url, 加不同的角色。
 
 
二、 dwr使用篇
1、调用没有返回值和参数的JAVA方法
1.1、dwr.xml的配置
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value= "com.dwr.TestClass" />
<include method="testMethod1"/>
</create>
</allow>
</dwr>
<allow> 标签中包括可以暴露给 javascript 访问的东西。
<create> 标签中指定 javascript 中可以访问的 java 类，并定义 DWR 应当如何获得要进行远程的类的实例。 creator="new" 属性指定 java 类实例的生成方式， new 意味着 DWR 应当调用类的默认构造函数来获得实例，其他的还有 spring 方式，通过与 IOC 容器 Spring 进行集成来获得实例等等。 javascript=" testClass " 属性指定 javascript代码访问对象时使用的名称。
<param> 标签指定要公开给 javascript 的 java 类名。
<include> 标签指定要公开给 javascript 的方法。不指定的话就公开所有方法。
<exclude> 标签指定要防止被访问的方法。
1.2、javascript中调用
首先，引入 javascript 脚本
<script src='dwr/interface/ testClass.js'></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
其中 TestClass.js 是 dwr 根据配置文件自动生成的， engine.js 和 util.js 是 dwr 自带的脚本文件。
其次，编写调用 java 方法的 javascript 函数
Function callTestMethod1(){
      testClass.testMethod1();
}
2、调用有简单返回值的java方法
2.1、dwr.xml的配置
配置同1.1
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value= "com.dwr.TestClass" />
<include method="testMethod2"/>
</create>
</allow>
</dwr>
2.2、javascript中调用
首先，引入 javascript 脚本
其次，编写调用 java 方法的 javascript 函数和接收返回值的回调函数
Function callTestMethod2(){
      testClass.testMethod2(callBackFortestMethod2);
}
Function callBackFortestMethod2(data){
     // 其中 date 接收方法的返回值
     // 可以在这里对返回值进行处理和显示等等
alert("the return value is " + data);
}
其中 callBackFortestMethod2 是接收返回值的回调函数
3、调用有简单参数的java方法
3.1、dwr.xml的配置
配置同1.1
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value= "com.dwr.TestClass" />
<include method="testMethod3"/>
</create>
</allow>
</dwr>
3.2、javascript中调用
首先，引入 javascript 脚本
其次，编写调用 java 方法的 javascript 函数
Function callTestMethod3(){
                 // 定义要传到 java 方法中的参数
      var data;
      // 构造参数
      data = “test String”;
      testClass.testMethod3(data);
}
4、调用返回JavaBean的java方法
4.1、dwr.xml的配置
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value= "com.dwr.TestClass" />
<include method="testMethod4"/>
</create>
<convert converter="bean" match=" "com.dwr.TestBean">
                  <param name="include" value="username,password" />
</convert>
</allow>
</dwr>
<creator> 标签负责公开用于 Web 远程的类和类的方法， <convertor> 标签则负责这些方法的参数和返回类型。 convert 元素的作用是告诉 DWR 在服务器端 Java 对象表示和序列化的 JavaScript 之间如何转换数据类型。 DWR 自动地在 Java 和 JavaScript 表示之间调整简单数据类型。这些类型包括 Java 原生类型和它们各自的封装类表示，还有 String 、 Date 、数组和集合类型。 DWR 也能把 JavaBean 转换成 JavaScript 表示，但是出于安全性的原因，要求显式的配置， <convertor> 标签就是完成此功能的。 converter="bean" 属性指定转换的方式采用 JavaBean 命名规范， match=""com.dwr.TestBean" 属性指定要转换的 javabean 名称， <param> 标签指定要转换的 JavaBean 属性。
4.2 、javascript中调用
首先，引入 javascript 脚本
其次，编写调用 java 方法的 javascript 函数和接收返回值的回调函数
Function callTestMethod4(){
      testClass.testMethod4(callBackFortestMethod4);
}
Function callBackFortestMethod4(data){
     // 其中 date 接收方法的返回值
// 对于 JavaBean 返回值，有两种方式处理
             // 不知道属性名称时，使用如下方法
           for(var property in data){
              alert("property:"+property);
              alert(property+":"+data[property]);
           }
// 知道属性名称时，使用如下方法
           alert(data.username);
           alert(data.password);
}
其中 callBackFortestMethod4 是接收返回值的回调函数
5、调用有JavaBean参数的java方法
5.1、dwr.xml的配置
配置同4.1
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value= "com.dwr.TestClass" />
<include method="testMethod5"/>
</create>
<convert converter="bean" match=" com.dwr.TestBean">
                  <param name="include" value="username,password" />
</convert>
</allow>
</dwr>
5.2 、javascript中调用
首先，引入 javascript 脚本
其次，编写调用 java 方法的 javascript 函数
Function callTestMethod5(){
                 // 定义要传到 java 方法中的参数
      var data;
      // 构造参数， date 实际上是一个 object
      data = { username:"user", password:"password" }
      testClass.testMethod5(data);
}
6、调用返回List、Set或者Map的java方法
6.1、dwr.xml的配置
配置同4.1
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value= "com.dwr.TestClass" />
<include method="testMethod6"/>
</create>
<convert converter="bean" match= "com.dwr.TestBean ">
<param name="include" value="username,password" />
</convert>
</allow>
</dwr>
注意：如果 List 、 Set 或者 Map 中的元素均为简单类型（包括其封装类）或 String 、 Date 、数组和集合类型，则不需要<convert>标签。
6.2 、javascript中调用(以返回List为例，List的元素为TestBean)
首先，引入 javascript 脚本
其次，编写调用 java 方法的 javascript 函数和接收返回值的回调函数
Function callTestMethod6(){
      testClass.testMethod6(callBackFortestMethod6);
}
Function callBackFortestMethod6(data){
     // 其中 date 接收方法的返回值
// 对于 JavaBean 返回值，有两种方式处理
             // 不知道属性名称时，使用如下方法
           for(var i=0;i<data.length;i++){
for(var property in data){
                  alert("property:"+property);
                  alert(property+":"+data[property]);
               }
}
// 知道属性名称时，使用如下方法
for(var i=0;i<data.length;i++){
               alert(data.username);
               alert(data.password);
}
}
7、调用有List、Set或者Map参数的java方法
7.1、dwr.xml的配置
<dwr>
<allow>
<create creator="new" javascript="testClass" >
<param name="class" value= "com.dwr.TestClass" />
<include method="testMethod7"/>
</create>
<convert converter="bean" match= "com.dwr.TestBean ">
<param name="include" value="username,password" />
</convert>
</allow>
<signatures>
<![CDATA[
import java.util.List;
import com.dwr.TestClass;
import com.dwr.TestBean;
TestClass.testMethod7(List<TestBean>);
]]>
</signatures>
</dwr>
<signatures> 标签是用来声明 java 方法中 List 、 Set 或者 Map 参数所包含的确切类，以便 java 代码作出判断。
7.2 、javascript中调用(以返回List为例，List的元素为TestBean)
首先，引入 javascript 脚本
其次，编写调用 java 方法的 javascript 函数
Function callTestMethod7(){
// 定义要传到 java 方法中的参数
      var data;
      // 构造参数， date 实际上是一个 object 数组，即数组的每个元素均为 object
data = [
                      {
                         username:"user1",
                         password:"password2"
                      },
                      {
                         username:"user2",
                         password:" password2"
                     }
                  ];
      testClass.testMethod7(data);
}
注意：
1、 对于第 6 种情况，如果 java 方法的返回值为 Map ，则在接收该返回值的 javascript 回调函数中如下处理：
function callBackFortestMethod(data){
           // 其中 date 接收方法的返回值
           for(var property in data){
                  var bean = data[property];
                  alert(bean.username);
                  alert(bean.password);
              }
}
2、 对于第 7 种情况，如果 java 的方法的参数为 Map （假设其 key 为 String ， value 为 TestBean ），则在调用该方法的 javascript 函数中用如下方法构造要传递的参数：
function callTestMethod (){
              // 定义要传到 java 方法中的参数
              var data;
              // 构造参数， date 实际上是一个 object ，其属性名为 Map 的 key ，属性值为 Map 的 value
              data = {
                         "key1":{
                             username:"user1",
                            password:"password2"
                         },
                         "key2":{
                            username:"user2",
                            password:" password2"
                         }
                     };
              testClass.testMethod(data);
}
并且在 dwr.xml 中增加如下的配置段
<signatures>
<![CDATA[
import java.util.List;
import com.dwr.TestClass;
import com.dwr.TestBean;
TestClass.testMethod7(Map<String,TestBean>);
]]>
</signatures>
3、 由以上可以发现，对于 java 方法的返回值为 List(Set) 的情况， DWR 将其转化为 Object 数组，传递个 javascript ；对于 java 方法的返回值为 Map 的情况， DWR 将其转化为一个 Object ，其中 Object 的属性为原 Map 的 key 值，属性值为原 Map 相应的 value 值。
4、 如果 java 方法的参数为 List(Set) 和 Map 的情况， javascript 中也要根据 3 种所说，构造相应的 javascript 数据来传递到 java 中。
     为了方便大家学习，可以邮件到 minisun2000@163.com ，我可以将整套的源代码公开给大家学习用^_^。


















util.js: Tables Manipulation

DWR helps you to manipulate tables using 2 functions: dwr.util.addRows() and dwr.util.removeAllRows(). The first parameter to both is the id of the table, tbody, thead or tfoot to edit. Generally it makes sense to use tbody because it enables you to keep header and footer rows unaltered, and it is a neat work-around to some hard to track-down Internet Explorer bugs.

For details in the individual function calls, see the pages for removeAllRows() and addRows().
Demo

For simplicity in this demo we will be using a simple array of strings, but you can have anything in your array. It's most powerful when used with an array of objects.

For demo purposes, we have a table with a tbody element with id="demo1":
Unaltered  Altered     Button Count

var cellFuncs = [
 function(data) { return data; },
 function(data) { return data.toUpperCase(); },
 function(data) {
    return "<input type='button' value='Test' onclick='alert(""Hi"");'/>";
 },
 function(data) { return count++; }
];

var count = 1;
dwr.util.addRows( "demo1", , cellFuncs, { escapeHtml:false });

dwr.util.removeAllRows('demo1');

The cellFuncs can return either an HTML string, or a DOM object to populate more complex controls. Generally HTML strings are a better choice because creating them is more compact, and it's a great workaround to some Internet Explorer bugs. However if a pure XHTML model ever becomes more predominant, DOM manipulation may become required.
Advanced Options

The options object is new in DWR version 1.1

We can use the options object to pass a cell creator function or a row creator function.

By default DWR provides these creator functions for you. They look something like this:

function defaultRowCreator(options) {
 return document.createElement("tr");
};

function defaultCellCreator(options) {
 return document.createElement("td");
};

The options object passed to you by DWR is the same options object that you passed in originally (containing the rowCreator and cellCreator functions). The following fields will have been altered:

    * rowData: the element value from the array (the same for all cells in a row)
    * rowIndex: the key (if map) or index (if array) from the collection
    * rowNum: The row number counting from 0 in this section (so if you are using tbody, it counts rows in the tbody and not the whole table)
    * data: The 'computed' data value for the cell (cellCreators only)
    * cellNum: The cell number that we are altering counting from 0 (cellCreators only)

But you can provide your own versions like this:
Unaltered  Altered     Button Count

dwr.util.addRows("demo2", , cellFuncs, {
 rowCreator:function(options) {
    var row = document.createElement("tr");
    var index = options.rowIndex * 50;
    row.style.color = "rgb(" + index + ",0,0)";
    return row;
 },
 cellCreator:function(options) {
    var td = document.createElement("td");
    var index = 255 - (options.rowIndex * 50);
    td.style.backgroundColor = "rgb(" + index + ",255,255)";
    td.style.fontWeight = "bold";
    return td;
 },
 escapeHtml:false
});

dwr.util.removeAllRows('demo2');