Struts2 and AJAX - Using Dojo Div

LibraryPKU 2013-11-19

展开全文

Important : This example uses Struts 2.0.11. Struts2 Ajax support is experimental is undergoing rapid changes. I will update this example once Struts 2.1 is released.

One of the biggest improvements in Struts2 compared to Struts is its first class AJAX support. All the core Struts2 components are developed with a view of deploying in a highly responsive AJAX mode. In this post, I will look at the Struts2 div tag which can be used to render Ajax content. This component internally uses Dojo library for Ajax functionality.

To demonstrate this, I will create a very simple use case. The use case consists of a single screen which lists a number of users in a table. When a userid link is clicked, user details is shown at the bottom. For displaying user details we will use Ajax.

Following are the files used in this sample Struts2 project. The code listing is also given below.

1. web.xml
J2EE configuration file

Xml代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java./xml/ns/javaee" xmlns:xsi="http://www./2001/XMLSchema-instance" xsi:schemaLocation="http://java./xml/ns/javaee http://java./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>
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java./xml/ns/javaee" xmlns:xsi="http://www./2001/XMLSchema-instance" xsi:schemaLocation="http://java./xml/ns/javaee http://java./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>

2. struts.xml
Mvc configuration for struts

Xml代码

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts./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>

Xml代码

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts./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>

3. userlisting.jsp

Displays list of users

Jsp代码

<%@ 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>

Displays list of users

Jsp代码

<%@ 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>

4. userdetail.jsp
This displays user details and is loaded using Ajax from userlisting.jsp

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>

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>

5. UserListingAction.java (under package ajaxdemo/action)
Prepares data for user listing and dispatches to userlisting.jsp. In a real application, this will connect to datasource through a business layer.

Java代码

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;
}
}

Java代码

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;
}
}

6. UserDetailAction.java (under package ajaxdemo/action)
This loads the data when a userid is selected in userlisting.jsp. This is called via Dojo Ajax.

Java代码

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;
}
}

Java代码

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;
}
}

7. UserListDTO.java (under package ajaxdemo/dto
This encapsulates details of a single user displayed in the list. Contains id and name. DTO stands for Data Transfer Object.

Java代码

package ajaxdemo.dto;
public class UserListDTO {
private String id;
private String name;
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;
}
}

Java代码

package ajaxdemo.dto;
public class UserListDTO {
private String id;
private String name;
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;
}
}

8. UserDetailDTO.java (unser package ajaxdemo/dto)
This encapsulates the complete details of a specific user.

Java代码

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;
}
}

Java代码

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;
}
}

When you access the URL http://localhost:8084/ajaxdemo/UserListingAction.action, UserListingAction prepares the data and it forwards to the userlisting.jsp. For Ajax, we use div tag in Struts2 tag library. Whenever a userid is clicked in the list, JavaScript function notifies the div tag to dynamically load content from a URL. In this case it is UserDetailAction which in turn gets data corresponding to the selected userid and dispatches to userdetail.jsp. The content returned by userdetail.jsp is loaded under Struts div tag.

As you can see the entire Ajax plumbing is hidden from the application developer and it is possible to quickly build highly responsive Web applications using this simple technique.

This sample application is hosted here. Check out to see the beauty of Struts2 Ajax. You can also download the entire source as a war file.

Note: We don’t want the user details to be loaded initially. But as of Struts 2.0.11, it is not possible to prevent the initial Ajax call. It seems that Struts 2.1 has introduced an attribute “preload” for preventing initial Ajax load. The work around here is to check the userid before returning any content.

In the next part we will look at each of the files in detail.