dwr学习

util.js包含一些有用的函数function,用于在客户端页面调用，它可以和dwr分开，独立营用于你的系统中。

主要功能如下：
1、$() 获得页面参数值
2、addOptions and removeAllOptions 初始化下拉框
3、addRows and removeAllRows 填充表格
4、getText 取得text属性值
5、getValue 取得form表单值
6、getValues 取得form多个值
7、onReturn
8、selectRange
9、setValue
10、setValues
11、toDescrīptiveString
12、useLoadingMessage
13、Submission box

***************************************************************************************
//////////////////////////////////////////////////////////////////////////////////////
****************************************************************************************
1、$()函数
IE5.0 不支持
$ = document.getElementById
取得form表单值
var name = $("name");
***************************************************************************************
//////////////////////////////////////////////////////////////////////////////////////
****************************************************************************************
2、用于填充 select 下拉框 option
a、如果你想在更新select 时，想保存原来的数据，即在原来的select中添加新的option：
   

 var sel = DWRUtil.getValue(id);
     DWRUtil.removeAllOptions(id);
     DWRUtil.addOptions(id,...);
     DWRUtil.setValue(id,sel);
     demo:比如你想添加一个option：“--请选择--”
DWRUtil.addOptions(id,["--请选择--"]); 

    DWRUtil.addOptions()有5中方式：
   
    @ Simple Array Example: 简单数组
      例如:
     

Array array = new Array[ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ]；
      DWRUtil.addOptions("demo1",array);

    @ Simple Object Array Example 简单数组,元素为beans
      这种情况下,你需要指定要显示 beans 的 property 以及 对应的 bean 值
      例如:
     

 public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
       }

      

DWRUtil.addOptions("demo2",array,'id','name');

       其中id指向及bean的id属性，在optiong中对应value，name指向bean的name属性，对应下拉框中显示的哪个值.

     @ Advanced Object Array Example 基本同上

DWRUtil.addOptions( "demo3", 
                [{ name:'Africa', id:'AF' },
                 { name:'America', id:'AM' },
                 { name:'Asia', id:'AS' },
                 { name:'Australasia', id:'AU' },
                 { name:'Europe', id:'EU' }
   ],'id','name');

    
     @ Map Example 用制定的map来填充 options:
       如果 server 返回 Map,呢么这样处理即可：
       DWRUtil.addOptions( "demo3",map);
       其中 value 对应 map keys，text 对应 map values；

     @ <ul> and <ol> list editing
    
       DWRUtil.addOptions() 函数不但可以填出select,开可以填出<ul>和<ol>这样的heml元素


****************************************************************************************
3、addRows and removeAllRows 填充表格
   DWR 提供2个函数来操作 table；
   ----------------------------
   DWRUtil.addRows(); 添加行
   ----------------------------
   DWRUtil.removeAllRows(id); 删除指定id的table
   ----------------------------
   下面着重看一下 addRows() 函数：
  
   DWRUtil.addRows(id, array, cellfuncs, [options]);
    其中id 对应 table 的 id(更适合tbodye，推荐使用 tbodye)
    array 是server端服务器的返回值，比如list，map等等
    cellfuncs 及用返回值来天春表格
    [options] 用来设置表格样式，它有2个内部函数来设置单元格样式(rowCreator、cellCreator)。

    比如: server端返回list，而list中存放的是下面这个 bean：
   

    public class Person {
private String name;
private Integer id;
pirvate String address;
public void set(){……}
public String get(){……}
       }

        
    下面用 DWRUtil.addRows();
   /**************************************************************************************/

   function userList(data){
    //var delButton = "<input type='button'/>";
    //var editButton = "<input type='button'/>";
var cellfuncs = [
   function(data){return data.id;},
   function(data){return data.userName;},
   function(data){return data.userTrueName;},
   function(data){return data.birthday;},
   function(data){
      var idd = data.id;
    var delButton = document.createElement("<INPUT TYPE='button' ōnclick='delPerson("+ idd +")'>");
    delButton.setAttribute("id","delete");
    delButton.setAttribute("value","delete");
    return delButton;
   },
   function(data){
    var idd = data.id;
    var editButton = document.createElement("<INPUT TYPE='button' ōnclick='editPerson("+ idd +")'>");
    editButton.setAttribute("name","edit");
    editButton.setAttribute("value","edit");   
    return editButton;
   }
];
DWRUtil.removeAllRows('tabId'); 
DWRUtil.addRows('tabId', data,cellfuncs,{
rowCreator:function(options) {
    var row = document.createElement("tr");
    var index = options.rowIndex * 50;
    row.setAttribute("id",options.rowData.id);
    row.style.collapse = "separate";
    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.backgroundColor = "menu";
    td.style.fontWeight = "bold";
    td.style.align = "center";
    return td;
}  
});
document.getElementById("bt").style.display = "none";
     }

dwr官方地址：http://getahead.ltd.uk/dwr
先简单介绍一下什么是DWR
DWR - Direct Web Remoting   ajax是一种提高web站点吸引力和实用性的书写web页面的方法。它从服务器端更新web页面的特殊区域，从而增强用户的交互性。它允许信息在短时间的延迟或不用刷新页面的情况下更新。  
DWR减少了开发时间，也减少了一些可能的错误，这些错误是在提供常用的方法函数并消除一些与高交互性web站点有关的重复性代码的时候产生的。  
DWR是作为开源软件(ASL verssion 2.0)而可以免费得到的。它凭借它的广阔的库、例子和指南非常易于实现。把它结合到一个现有的站点是非常简单的，同样它也可以简单地与大多数java框架结合。
util.js  
util.js包含了一些使用的方法，从而帮助你利用javascript(可能)从服务器端更新你的web数据。   你可以在DWR之外的地方使用它，因为它并不依赖与DWR而实现。  
它包含四个页面处理函数：
getValue[s]()、setValue[s]()作用于除tables、lists和images以外的大多数html元素。getText()作用于select lists。 
addRows()和removeAllRows()用于编辑tables。addOptions()和removeAllOptions()用于编辑lists(如：select lists、ul、ol)。
$()   $函数(在javascript中，他的名字是合法的)的思想是从prototype引进的。
一般说来，$ = document.getElementById。
在以后你花大量时间进行ajax编程的时候，在合适的地方使用这种格式是很有益的。   '$'通过给定的ID在当前HTML页面找到元素，如果多于一个的参数被提交，它就会返回一个包含已找到元素的数组。这个函数从prototype的library中得到的灵感，而且，它还能更好的工作在不同的浏览器中。
Generating Lists  
DWR的一个功能可以给一个下拉列表(select list)添加选项，只需使用DWRUtil.addOptions()。   如果你在更新列表之前，希望保留一些选项，你需要写以下一些代码：     

 var sel = DWRUtil.getValue(id);
       DWRUtil.removeAllOptions(id);
       DWRUtil.addOptions(id, ...);
       DWRUtil.setValue(id, sel);   

如果你想有个初始化选项，如：“please select”，你可以直接使用：       DWRUtil.addOptions(id, ["Please select"]);
DWRUtil.addOptions 有5种调用方法：
Array: DWRUtil.addOptions(selectid, array) 。
selectid为目标ID,array为每一项的text。
Array of objects (option text = option value):
DWRUtil.addOptions(selectid, data, prop) 用text和value的集合来为每一个数组元素创建一个选项，pro参数指定text和value的值。
Array of objects (with differing option text and value): DWRUtil.addOptions(selectid, array, valueprop, textprop) 用text和value的集合来为每一个数组元素创建一个选项，valueprop确定value，textprop确定text。Object: DWRUtil.addOptions(selectid, map, reverse) 为map中每一个属性(property)创建一个选项，属性名作为选项的value，属性的value作为选项的text。这样做看起来是错的，但实际上这种做法的确是正确的。如果reverse参数被设置为true，则属性的value还是被用做选项的value。Map of objects: DWRUtil.addOptions(selectid, map, valueprop, textprop) 为map中的每一个对象创建一个选项，valueprop指定选项的value，textprop指定选项的text。Generating TablesDWRUtil.addRows() 从一个数组(第二个参数)取得值，创建table的每一行。从另一个数组(第三个参数)去得值，为table的每一行创建若干列。DWRUtil.getText(id)可以根据id取得text的值，这个方法只能用于select listDWRUtil.getValue(id)可以根据id取得value，使用这个方法，你不必在意div和select list的不同。DWRUtil.getValues()getValues() is similar to getValue() except that the input is a Javascript object that contains name/value pairs. The names are assumed to be the IDs of HTML elements, and the values are altered to reflect the contents of those IDs. This method does not return the object in question, it alters the value that you pass to it.这个方法和getValue()一样，只是它传入的是一个包含名字和数值的javascript对象.这个名字就是HTML元素的ID。这个方法不会返回任何对象，它只会将ID的value映射给传入的value。例：

function doGetValues() {   var text= "{
   div:null,
   textarea:null,
   select:null,
   text:null,
   password:null,
   formbutton:null,
   button:null
}";
   var object = objectEval(text);     //javascript对象
   DWRUtil.getValues(object);
   var reply = DWRUtil.toDescriptiveString(object, 2);    //toString
   reply = reply.replace(/\n/g, "<br/>");                         //转意
   DWRUtil.setValue("getvaluesret", reply);                      //显示
}DWRUtil.onReturn贴一段代码，暂时不理解，用onReturn和不用有什么区别<script>
function submitFunction()
{
     $("alert").style.display = "inline";
     setTimeout("unsubmitFunction();", 1000);
}
function unsubmitFunction()
{
     $("alert").style.display = "none";
}
</script><p><input type="text" onkeydown="DWRUtil.onReturn(event, submitFunction)"/>
<input type="button" onclick="submitFunction()" value="GO"/>
<span id="alert" style="display:none; background:#FFFFDD; font-weight:bold;">submitFunction called</span>
</p>

DWRUtil.selectRange在一个input box里选一个范围DWRUtil.selectRange("sel-test", $("start").value, $("end").value);DWRUtil.setValue(id, value)用ID找到元素，并更新valueDWRUtil.setValues()和setValue(id,value)一样，只是它需要的参数是个javascript对象，如：

DWRUtil.setValues({
   div: "new div content",
   password: "1234567890"
});

DWRUtil.toDescriptiveString带debug信息的toString，第一个为将要debug的对象，第二个参数为处理等级。等级如下：· 0: Single line of debug 单行调试 · 1: Multi-line debug that does not dig into child objects 不分析子元素的多行调试 · 2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二层子元素的多行调试 · And so on. Level 2 and greater probably produce too much output.
总结：DWR不但屏蔽了许多client与server交互的重复且复杂的代码，而且还提供了一些常用的方法，一些思想还是从prototype继承而来，并有一定的改进。同时，它也考虑到了与struts、hibernate、spring的结合问题。需要注意的是，DWR是一种把服务器端的java代码通过javascript直接从浏览器调用的方法(DWR isa way of calling Java code on the server directly from Javascript in the browser.)，而不是一个javascript的库(Generally speaking DWR is not a generic JavaScript library so it does not attempt to provide fill this need. However this is one of these really useful functions to have around if you are doing Ajax work.)能做到怎么多，已经很难得了。DWR自04年11月草案提出到现在的Version 1.1 beta


dwr和session通讯的方式：
1.java类中把session作为参数，如：public void makeChart(String chartType,HttpSession session)
2．页面中调用如下：TestJFreeChartDwr.makeChart(type,show);无需传递session参数，dwr会自动填充到session里
3．再次得到session中的值session.getAttribute(“参数名”);


DWRUtil.getText(id): 用来获得 option 中的文本
      比如：
       <select id="select">
<option value="1"> 苹果 </option>
<option value="2" select> 香蕉 </option>
<option value="3"> 鸭梨 </option>
       </select>
      调用 DWRUtil.getText("select"); 将返回 "香蕉" 字段；
      DWRUtil.getText(id)；仅仅是用来获得 select 文本值，其他不适用。
   /*********************************************************************************/



   5、DWRUtil.getValue(id): 用来获得 form 表单值
     
      有如下几种情况：
Text area (id="textarea"): DWRUtil.getValue("textarea")将返回 Text area的值;
Selection list (id="select"): DWRUtil.getValue("select") 将返回 Selection list 的值;
Text input (id="text"): DWRUtil.getValue("text") 将返回 Text input 的值;
Password input (id="password"): DWRUtil.getValue("text") 将返回 Password input 的值;
Form button (id="formbutton"): DWRUtil.getValue("formbutton") 将返回 Form button 的值;
Fancy button (id="button"): DWRUtil.getValue("formbutton") 将返回 Fancy button 的值;
   /*********************************************************************************/


   6、getValues 取得form多个值
      批量获得页面表单的值,组合成数组的形式,返回 name/value;

      例如: form():
     

<input type="textarea" id="textarea" value="1111"/>
      <input type="text" id="text" value="2222"/>
      <input type="password" id= "password" value="3333"/>
      <select id="select">
<option value="1"> 苹果 </option>
<option value="4444" select> 香蕉 </option>
<option value="3"> 鸭梨 </option>
       </select>
      <input type="button" id="button" value="5555"/>

     
      那么: DWRUtil.getValues({textarea:null,select:null,text:null,password:null,button:null})
      将返回 ^^^^^^^^^^^^^^^^{textarea:1111,select:4444,text:2222,password:3333,button:5555}

   
   /*********************************************************************************/
  
     
   7、DWRUtil.onReturn 防止当在文本框中输入后，直接按回车就提交表单。

   

 <input type="text" ōnkeypress="DWRUtil.onReturn(event, submitFunction)"/>
     <input type="button" ōnclick="submitFunction()"/>

   /*********************************************************************************/


   8、DWRUtil.selectRange(ele, start, end);

      在一个input box里选一个范围

      DWRUtil.selectRange("sel-test", $("start").value, $("end").value);

      比如:

<input type="text" id="sel-test" value="012345678901234567890">

      DWRUtil.selectRange("sel-test", 2, 15); 结果 文本框中的值"2345678901234"将被选中'

   /*********************************************************************************/


   9、DWRUtil.setValue(id,value);
      为指定的id元素,设置一个新值;
   /*********************************************************************************/
   10、DWRUtil.setValues({
name: "fzfx88",
password: "1234567890"
}
       ); 同上,批量更新表单值.
   /*********************************************************************************/

   11、DWRUtil.toDescrīptiveString()

   带debug信息的toString，第一个为将要debug的对象，第二个参数为处理等级。等级如下：

    0: Single line of debug 单行调试
    1: Multi-line debug that does not dig into child objects 不分析子元素的多行调试
    2: Multi-line debug that digs into the 2nd layer of child objects 最多分析到第二层子元素的多行调试

    <input type="text" id="text">
    DWRUtil。toDescrīptiveString("text",0);
   /*********************************************************************************/

   12、DWRUtil.useLoadingMessage();
    当发出ajax请求后,页面显示的提示等待信息;

    function searchUser(){
var loadinfo = "loading....."
try{
   regUser.queryAllUser(userList);
   DWRUtil.useLoadingMessage(loadinfo);  
}catch(e){

}