云自无心水自闲

天平山上白云泉,云自无心水自闲。何必奔冲山下去,更添波浪向人间!
posts - 288, comments - 524, trackbacks - 0, articles - 6
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

Struts2 and Ajax --使用Dojo和Div

Posted on 2008-02-10 20:56 云自无心水自闲 阅读(12229) 评论(8)  编辑  收藏 所属分类: Java心得体会Struts2AjaxDojo

Struts2和Struts相比,一个重大改进就是支持Ajax。 本文主要看一下Struts2中的Div是如何用来输出Ajax结果,其中主要使用了Dojo。

首先,我们先创建一个简单的用例,在这个用例中,将在屏幕上显示一个用户列表,点击列表中的userid时,列表的下方将显示用户的详细信息,显示用户详细信息的这个步骤我们将使用Ajax。

一、创建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  
<filter>
    
<filter-name>struts2</filter-name>
    
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
  
</filter>
  
<filter-mapping>
    
<filter-name>struts2</filter-name>
    
<url-pattern>/*</url-pattern>
  
</filter-mapping>
</web-app>

二、创建struts.xml
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd"
>
<struts>
    
<package name="ajaxdemo" extends="struts-default">
        
<action name="UserListingAction" class="ajaxdemo.action.UserListingAction">
            
<result>/userlisting.jsp</result>
        
</action>
        
<action name="UserDetailAction" class="ajaxdemo.action.UserDetailAction">
            
<result>/userdetail.jsp</result>
        
</action>
    
</package> 
</struts>

三、页面:userlisting.jsp
Displays list of users
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
  
<head>
    
<s:head theme="ajax"/>
    
  
</head>
  
<script>
    function show_user_details(id) {
      document.frm_user.userid.value = id;
      dojo.event.topic.publish("show_detail");
    }
  
</script>
  
<body>
    
<s:form id="frm_user" name="frm_user">
      
<h1>User Listing</h1>
      
<s:if test="userList.size > 0">
        
<table border="1">
          
<s:iterator value="userList">
            
<tr>
              
<td>
                
<s:a href="#" onclick="javascript:show_user_details('%{id}');return false;"><s:property value="id" /></s:a>
              
</td>
              
<td>
                
<s:property value="name" />
              
</td>
            
</tr>
          
</s:iterator>
        
</table>
      
</s:if> 
      
<s:hidden name="userid"/>
      
<s:url id="d_url" action="UserDetailAction" />
      
<s:div  id="user_details" href="%{d_url}" theme="ajax" listenTopics="show_detail" formId="frm_user" >
      
</s:div>
    
</s:form>
  
</body>
</html>


四、页面:userdetail.jsp,用于显示用户详细信息,由userlisting.jsp加载
<%@ taglib prefix="s" uri="/struts-tags" %>
<h1>User Details</h1>
<s:if test="userDetails != null">
    
<table>
      
<tr><td>Id:</td><td><s:property value="userDetails.id" /></td></tr>
      
<tr><td>Name:</td><td><s:property value="userDetails.name" /></td></tr>
      
<tr><td>Email:</td><td><s:property value="userDetails.email" /></td></tr>
      
<tr><td>Address:</td><td><s:property value="userDetails.address" /></td></tr>
    
</table>
</s:if>

五、ajaxdemo.action.UserListingAction.java,生成用户列表数据,交由userlisting.jsp显示,在实际的应用中,这部分的数据一般是从数据库中取得的。
package ajaxdemo.action;

import ajaxdemo.dto.UserListDTO;
import com.opensymphony.xwork2.ActionSupport;
import java.util.ArrayList;
import java.util.List;

/** Populates the user listing data */
public class UserListingAction extends ActionSupport {

    
private List<UserListDTO> userList; // this is available in view automatically!
    public String execute() throws Exception {
        
        
// create 2 user objects and add to a list
        setUserList((List<UserListDTO>new ArrayList());
        UserListDTO user 
= new UserListDTO();
        user.setId(
"gjose");
        user.setName(
"Grace Joseph");
        getUserList().add(user);
        
        user 
= new UserListDTO();
        user.setId(
"peter");
        user.setName(
"PeterSmith");
        getUserList().add(user);
        
return SUCCESS;
    }


    
public List<UserListDTO> getUserList() {
        
return userList;
    }


    
public void setUserList(List<UserListDTO> userList) {
        
this.userList = userList;
    }

}

六、ajaxdemo.action.UserDetailAction.java,当userid被选中时,取得用户详细数据,通过dojo来调用。
package ajaxdemo.action;

import ajaxdemo.dto.UserDetailDTO;
import com.opensymphony.xwork2.ActionSupport;

/* Populates user details for a user id selected */
public class UserDetailAction extends ActionSupport {
    
    
private String userid;
    
private UserDetailDTO userDetails;
    
    
public String execute() throws Exception {
        
// populate only when userid is selected
        if(userid!=null && !userid.equals(""))
            populateDetail(userid);
        
return SUCCESS;
    }

    
    
private void populateDetail(String id) {
        userDetails 
= new UserDetailDTO();
        userDetails.setId(id);
        userDetails.setName(
"The Complete Name");
        userDetails.setEmail(
"admin@struts2.org");
        userDetails.setAddress(
"rich street, lavish road, Struts Land");
    }


    
public String getUserid() {
        
return userid;
    }


    
public void setUserid(String userid) {
        
this.userid = userid;
    }


    
public UserDetailDTO getUserDetails() {
        
return userDetails;
    }


    
public void setUserDetails(UserDetailDTO userDetails) {
        
this.userDetails = userDetails;
    }


}


七、ajaxdemo.action.UserDetailDTO.java、POJO,用于封装用户信息
package ajaxdemo.dto;

public class UserDetailDTO {

    
private String id;
    
private String name;
    
private String email;
    
private String address;

    
public String getId() {
        
return id;
    }


    
public void setId(String id) {
        
this.id = id;
    }


    
public String getName() {
        
return name;
    }


    
public void setName(String name) {
        
this.name = name;
    }


    
public String getEmail() {
        
return email;
    }


    
public void setEmail(String email) {
        
this.email = email;
    }


    
public String getAddress() {
        
return address;
    }


    
public void setAddress(String address) {
        
this.address = address;
    }

}

OK,部署完毕后,输入http://localhost:8080/ajaxdemo/UserListingAction.action来测试一下。
当列表中的userid被点中后,javaScript通知Div标签从URL中动态加载返回内容。这个例子中,UserDetailAction取得用户信息并传递给userdetail.jsp。userdetail.jsp生成最终的展示结果,显示在Div中。


评论

# re: Struts2 and Ajax --使用Dojo和Div  回复  更多评论   

2008-02-27 16:13 by border
大哥:
下次翻译的时候能不能给个连接。
http://www.struts2.org/struts2-and-ajax-using-dojo-div-part-i/

# re: Struts2 and Ajax --使用Dojo和Div[未登录]  回复  更多评论   

2009-02-06 16:09 by gg
哈哈,楼上的太有才了

# re: Struts2 and Ajax --使用Dojo和Div  回复  更多评论   

2009-02-09 19:55 by 无名氏
即使是翻译的也不错,顶博主。

# re: Struts2 and Ajax --使用Dojo和Div  回复  更多评论   

2009-04-04 18:48 by aring
是不是少了个ajaxdemo.dto.UserListDTO。java啊?

# re: Struts2 and Ajax --使用Dojo和Div[未登录]  回复  更多评论   

2009-05-17 04:14 by lfc
package ajaxdemo.dto;

public class UserListDTO {
private String id;
private String name;
private String email;
private String address;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}

# re: Struts2 and Ajax --使用Dojo和Div  回复  更多评论   

2009-06-17 01:55 by 含笑半步癫
2楼的仁兄真逗..谢谢你.给了原装的,使我对这个例子又恢复了信心.哈哈...

# re: Struts2 and Ajax --使用Dojo和Div[未登录]  回复  更多评论   

2010-01-06 15:21 by 初学者
按照楼主提供的源码,在IDE中运行了,在DetailAction处理的时候一直得不到从List页面传递过来的ID值,导致不能显示用户的详细信息。不知道是我拷贝时候出了问题还是代码原本有问题!
最后通过request获取List页面<s:hidden name="userid"></s:hidden>的id值得以解决。

# re: Struts2 and Ajax --使用Dojo和Div  回复  更多评论   

2010-07-19 11:44 by jsq
用不了啊。

只有注册用户登录后才能发表评论。


网站导航: