dwr的一个实例(参考蓝杰--胡东峰相关资料)

欢迎访问: www.ptcms.cn

第一：新建项目

第二:加载dwr.jar包

第三:修改web.xml文件

---------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
 xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <!-- dwr -->
  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

    <!-- This should NEVER be present in live -->
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>

    <!-- Remove this unless you want to use active reverse ajax -->
    <init-param>
      <param-name>activeReverseAjaxEnabled</param-name>
      <param-value>true</param-value>
    </init-param>

    <!-- By default DWR creates application scope objects when they are first
    used. This creates them when the app-server is started -->
    <init-param>
      <param-name>initApplicationScopeCreatorsAtStartup</param-name>
      <param-value>true</param-value>
    </init-param>

    <!-- This enables full streaming mode. It's probably better to leave this
    out if you are running across the internet -->
    <init-param>
      <param-name>maxWaitAfterWrite</param-name>
      <param-value>-1</param-value>
    </init-param>

    <!--
    For more information on these parameters, see:
    - http://getahead.org/dwr/server/servlet
    - http://getahead.org/dwr/reverse-ajax/configuration
    -->

    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
 
 <!-- /dwr -->
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

--------------------------

第四:在WEB-INF目录下 新建dwr.xml文件 配置如下:

-------------------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>

  <allow>

    <!-- intro - for the test on index.html -->
    <create creator="new" javascript="UserManager2">
      <param name="class" value="cn.lh.dwr.UserManager2"/>
    </create>
    <convert match="cn.lh.bean.dwr.UserInfo" converter="bean" />
 
  </allow>

</dwr>
---------------------------------

第五:建立后台代码:

-------------bean------------

package cn.lh.bean.dwr;

public class UserInfo {

     private int id;
     private int areaID;
     private String name;
     private int fixFee;
    
     public int getId() {
   return id;
  }
  public void setId(int id) {
   this.id = id;
  }
  public int getAreaID() {
   return areaID;
  }
  public void setAreaID(int areaID) {
   this.areaID = areaID;
  }
  public String getName() {
   return name;
  }
  public void setName(String name) {
   this.name = name;
  }
  public int getFixFee() {
   return fixFee;
  }
  public void setFixFee(int fixFee) {
   this.fixFee = fixFee;
  }
  //for debug
     public String toString(){
       return "id: "+id+" areaID:"+areaID+" name:"+name+" fixFee:"+fixFee;
     }

----------------------------

--------逻辑代码被dwr暴露的代码---------

package cn.lh.dwr;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Random;

 

import cn.lh.bean.dwr.UserInfo;

public class UserManager2 {

 //用于生成用户唯一的ID
 private static int userID = 0 ;
 //区域列表在装载类时 初始化
 private static Map area = new HashMap() ;
 static{
  for(int i=0;i<4;i++){
   area.put(1, "a") ;
   area.put(2, "b") ;
   area.put(3, "c") ;
   area.put(4, "d") ; 
  }
 }
 //返回区域列表
 public Map getArea(){
  return area ;
 }
 /*
  * 根据地区代号提取用户列表
  */
    // 根据地区代号提取用户列表
 public List<UserInfo> getUserByAreaID(int areaID){
  System.out.println("AreaID : "+areaID);
  List<UserInfo> userList=new ArrayList();
  //模拟生成用户列表
  int count=new java.util.Random().nextInt(5)+4;
  for(int i=1;i<=count;i++){
   userID++;
   UserInfo us=new UserInfo();
   
   us.setId(userID);
   us.setAreaID(areaID);
   us.setName("第"+userID+"个用户");
   us.setFixFee(100*i);
   userList.add(us);
  }
  return userList;
 }
 //修改用户信息
 public boolean updateUser(UserInfo userinfor){
   return true ;
 }
 public static void main(String args[]){
  
  
 }
}
------------------------------------

第六: 建立jsp文件和相关js文件 及 添加 dwr 相关js文件---直接看jsp文件

--------------------

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">

  <title>My JSP 'userinfor_manager.jsp' starting page</title>

  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <!--引入dwr的js脚本-->
  <script src="dwr/interface/UserManager2.js"></script>
  <script src="dwr/engine.js" /></script>
  <script src="dwr/util.js" /></script>

  <script type="text/javascript">
  //定义一个数组，用以缓存表中的用户信息
    var userCach = { };  
function fill_select_user_area() {
   
 UserManager2.getArea(callback);
}
function callback(data) {
 DWRUtil.removeAllOptions("select_user_area");
 DWRUtil.addOptions("select_user_area", data);
}
function displayselectUserArea(sua) {
   
 UserManager2.getUserByAreaID(sua.value, call_table);
 
}
function call_table(data) {
  
 dwr.util.removeAllRows("userTable");
 var dtable = document.getElementById("userTable");
 
 for (var i = 0; i < data.length; i++) {
    
  var theUser = data[i];
  
  var eltr = dtable.insertRow( -1 );
  var userTableRowId = 1000 * i;
  
  eltr.setAttribute("id",userTableRowId);
  
        var idTd = eltr.insertCell( -1 );
        idTd.innerHTML= theUser.id ;
       
         var areaTd = eltr.insertCell( -1 );
        areaTd.innerHTML=theUser.areaID ;
       
          var nameTd = eltr.insertCell( -1 );
        nameTd.innerHTML=theUser.name ;
       
          var fixFeeTd = eltr.insertCell( -1 );
        fixFeeTd.innerHTML=theUser.fixFee ;
       
        var editor = eltr.insertCell(-1);
        var EditorButton = "<input type=\"button\" value=\"修改\" onclick=\"editoruser("+theUser.id+");\"/>" ;
        var DeleteButton = "<input type=\"button\" value=\"删除\" onclick=\"deleteRowbyid("+theUser.id+","+userTableRowId+");\"/>";
        editor.innerHTML = EditorButton+"  "+DeleteButton ;
       
       userCach[theUser.id] = theUser ;
 }
}

  function deleteRowbyid(userid,rowid){
     var user = userCach[userid] ;
     if(window.confirm("确定删除"+user.name+"?"))
     {
      var rowToDelete = document.getElementById(rowid);
      var t_body = document.getElementById("userTable");
      t_body.removeChild(rowToDelete) ;
     }
  }
  //把要编辑的先显示出来
  function editoruser(userid){
   document.getElementById("editorID").style.visibility ="visible" ;
   var theUser = userCach[userid] ;
   var demoUser = {spanuserid:theUser.id ,iptname:theUser.name,iptarea:theUser.areaID,iptfixFee:theUser.fixFee} ;
   dwr.util.setValues(demoUser);
 
  }
  //修改用户信息
  function updateUser(){
    var userinfor = new Object();
    userinfor.id =dwr.util.getValue("spanuserid");
    userinfor.name = dwr.util.getValue("iptname");
    userinfor.areaID = dwr.util.getValue("iptarea");
    userinfor.fixFee = dwr.util.getValue("iptfixFee");
    UserManager2.updateUser(userinfor,callback_user);
  }
  function callback_user(result){
  
    if(result){
    
     window.alert("修改成功!!");
    
    }
 
  }
     </script>

 </head>
 <body onload="fill_select_user_area();">
  根据区域提取未处理客户:
  <select id="select_user_area" onchange="displayselectUserArea(this)"></select>
  <table border="1">
   <thead>
    <tr>
     <th>
      序号
     </th>
     <th>
      所属地区
     </th>
     <th>
      用户名
     </th>
     <th>
      费用
     </th>
     <th>
      操作
     </th>
    </tr>
   </thead>
   <tbody id="userTable"></tbody>
  </table>
  <!-- 初始不可见 -->
  
  <div id="editorID" style="visibility:hidden" >
  要修改的用户:
  <hr>
   用户序号：<span id="spanuserid"></span><br/>
   用户名字：<input id="iptname" type="text" size="10" /><br/>
          所属地区：<input id="iptarea" type="text" size="10" /> <br/>
          用户额度：<input id="iptfixFee" type="text" size="10" /> <br/>
        <br/>
         <input type="button" value="保存" onclick="updateUser();"/>
  </div>
 </body>
</html>
-------------------------------------------

 

 

 

评论

1 楼 amcucn 2008-11-27  

楼主的代码让人看得眼花，最后在发表文章的时候使用代码格式