Struts2 Help & Reference

Struts2 and AJAX - Using Dojo Div - Part I

January 16th, 2008 | by Admin |

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

2. struts.xml
Mvc configuration for struts

3. 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>

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

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.

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.

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.

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

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.

3 Responses to “Struts2 and AJAX - Using Dojo Div - Part I”

By Pierre Lasante on Jan 20, 2008

I’ve been able to implement this example with struts 2, EJB 3.0, Oracle 10g Express, and Netbeans 6.0 on a Glassfish Java EE 5 server.

It works real good.

Ciao
By Jignesh on Feb 9, 2008

Hey this looks great sample for multiple file upload. But I downloaded your software and found following error on Tomcat 5.5 with JDK 1.6.

org.apache.commons.fileupload.FileUploadBase$IOFileUploadException: Processing o
f multipart/form-data request failed. \var\www\vhosts\sillycoder.com\httpdocs\tm
p\upload__2eff083b_117fbc7d98c__8000_00000000.tmp (The system cannot find the pa
th specified)

What’s wrong in that? Moreover, I am interested how to restrict number of file uploads? How can I be helpful to you to solve this problem.
By Jignesh on Feb 9, 2008

Ok I figured out the problem. Your web.xml points to that directory. You need to change it to point to local dir(something like c:\temp). Otherwise who ever tries to test your code, will not work. But this is great work.

Just few more questions:
1. How do I can fix the number of upload files?
2. Can I upload mp3 files using this tool, i.e. can we upload more then 2 MB file?

Struts2 and AJAX - Using Dojo Div - Part I

3 Responses to “Struts2 and AJAX - Using Dojo Div - Part I”

Post a Comment

Sponsors

Pages

Links

Archives

Categories

Recent Comments

Recent Post

Popular This Month

Random Stats