Struts2 Help & Reference

Creating a cascading application menu using Struts2 and YUI

Saturday, January 19th, 2008

Yahoo User Interface (YUI) library is a set of Javascript based client side components for building highly interactive Web applications. All the YUI components work on the client side data. It also has built in Ajax support.

By integrating YUI to your Struts2 application, you can create cutting edge Web 2.0 rich client applications. In this post, I will show you how the YUI Menu component can be used along with Struts2 to create a cascading application menu.

Following are the components used in this sample project.

1. struts.xml - Struts2 action mappings.

2. web.xml - Configuration file for the sample web application

3. Menu.java - This encapsulates a Menu object. Can contain sub menus.

4. MenuDemoAction.java - Controller class for Menu demo. Contains code to populate sample Menu data. In real projects, you will populate this from database.

package yuimenudemo.action;

import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.interceptor.ServletRequestAware;
import yuimenudemo.dto.Menu;
import com.opensymphony.xwork2.ActionSupport;

public class MenuDemoAction extends ActionSupport implements ServletRequestAware{
	HttpServletRequest request;
	public void setServletRequest(HttpServletRequest req) {
		request = req;
	}
	public String execute() throws Exception {
		
		List<Menu> menuList = createAppMenu();
		request.setAttribute("menu", menuList);
		return SUCCESS;
    }
	
	List<Menu> createAppMenu() {
		Menu m = new Menu();
		m.setId("1");
		m.setLabel("Search Engines");
		m.setUrl("");
		
		Menu n = new Menu();
		n.setId("2");
		n.setLabel("Internet Mail");
		n.setUrl("");	
		
		Menu m1 = new Menu();
		m1.setId("3");
		m1.setLabel("Google");
		m1.setUrl("http://www.google.com");
		
		Menu m2 = new Menu();
		m2.setId("4");
		m2.setLabel("Yahoo");
		m2.setUrl("http://www.yahoo.com");
		
		Menu n1 = new Menu();
		n1.setId("5");
		n1.setLabel("Gmail");
		n1.setUrl("http://gmail.com");	
		
		m.addMenu(m1);
		m.addMenu(m2);
		n.addMenu(n1);
		
		List<Menu> l = new ArrayList<Menu>();
		l.add(m);
		l.add(n);
		return l;
		
	}
	
}

5. menudemo.jsp - This is a sample application screen with application menu at the top.

6. AppMenuTag.java - This is a custom tag library which renders a YUI based Menu bar.

package yuimenudemo.tag;

import java.util.List;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;

import yuimenudemo.dto.Menu;

public class AppMenuTag extends TagSupport {

public int doEndTag() throws JspException {
		List<Menu> l = (List<Menu>) pageContext.getRequest().getAttribute(
				"menu");
       JspWriter out = pageContext.getOut();
        try {
            out.println("<script>");
            out.println("var str_jSon= '"+getMenuDataScript(l)+"';");
            out.println(getMenuCodeScript());
            out.println("</script>");
        }catch(Exception ex) {
            ex.printStackTrace();
        }
		return (EVAL_PAGE);
	}

private String getMenuDataScript(List<Menu> l) {
		StringBuffer jSon = new StringBuffer();
		jSon.append("[");
		menuToJSon(l, jSon);
		jSon.append("]");
		return jSon.toString();
	}
	
	private String getMenuCodeScript() {
	       return " YAHOO.util.Event.onDOMReady(function () { "
           + " var jSon = YAHOO.lang.JSON.parse(str_jSon); "
           + " var menuBar = new YAHOO.widget.MenuBar('sample_menubar',{ autosubmenudisplay: true }); "
           + " YAHOO.util.Dom.addClass(menuBar.element, 'yuimenubarnav');  "
           + " menuBar.addItems(jSon); "
           + " menuBar.render('menu_div'); "
           + "}); "; 
	}

public void menuToJSon(List<Menu> l, StringBuffer jSon) {
		for (int i = 0; i < l.size(); i++) {
			Menu menu = (Menu) l.get(i);
			String s1 = menu.getLabel();
			jSon.append("{\"text\":");
			jSon.append("\"" + s1 + "\"");

if (menu.getUrl() != null
					&& !menu.getUrl().equals("")) {
				jSon.append(",\"url\":");
				jSon.append("\"" + menu.getUrl() + "\"");
			}

if (menu.getSubmenus() != null
					&& menu.getSubmenus().size() > 0) {
				jSon.append(",\"submenu\":{\"id\":\"" + menu.getId() + "\", \"itemdata\":[");
				menuToJSon(menu.getSubmenus(), jSon);
				jSon.append("]}");
			}

jSon.append("}");
			if (i != (l.size() - 1)) {
				jSon.append(",");
			}
		}
	}

}

7. menu.tld - The tag library configuration file inside WEB-INF folder.

In addition, this example uses the following css and JavaScript files provided as part of YUI. In real projects, these also must be part of your project.

8. http://yui.yahooapis.com/2.4.1/build/menu/assets/skins/sam/menu.css

9. http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js
10. http://yui.yahooapis.com/2.4.1/build/container/container_core-min.js
11. http://yui.yahooapis.com/2.4.1/build/menu/menu-min.js
12. http://yui.yahooapis.com/2.4.1/build/json/json-beta-min.js

Now let us see how the code works.

When user accesses http://localhost:8080/struts2demo/MenuDemoAction.action, MenuDemoAction’s execute is invoked. This prepares the Menu data. A list of Menu objects is created. Each of this in turn can contain sub menus. After this control is passed to menudemo.jsp. In real applications, this will be fed from an XML file or from database tables.

menudemo.jsp contains AppMenuTag and it is invoked during JSP rendering. This converts the Menu object structure to a JSON structure using a YUI library. This JSON structure is given as input to the YUI menu control which renders the CSS based menu on the screen! Can it be any simpler? This whole project took me about 20 minutes to implement and test.

Now using similar techniques you can implement a wide range of controls available in YUI. These include tree, grid etc. which are frequently required in Web applications. YUI also contains utility functions such as a JSON library and methods for AJax interaction (YUI Connect).

Posted in Ajax, Howto, Struts2 Tips, YUI Integration | No Comments »

Struts2 - Java on Rails?

Thursday, January 17th, 2008

Ruby on Rails is a Web application framework based on Ruby language. In many respects, Struts2 is very similar to Ruby on Rails but at the same time is better suited to large enterprise applications. Being J2EE based, Struts2 can leverage the entire Java API along with J2EE API such as EJBs for distributed processing.

Let us see if Struts2 compares to RoR when it comes to strong points of Ruby on Rails.

1. Minimal configuration - Like RoR, Struts2 requires minimal configuration. The both assume “intelligent defaults” for most of the configuration.

2. Automatic data transfer between controller and view - Struts2 achieves transparent data transfer between controller and view component using value stack concept. OGNL support in Struts2 makes it very simple!

3. ORM Mapping - Hibernate is an ideal open source tool that supports complex ORM mapping requirements. This can be easily used along with Struts2. In RoR, equivalent is the ActiveRecord. Another option for Java developers is the Spring DAO.

In addition to these, Struts2 has other very important features which makes it the ideal choice for any large scale Web application development. These are,

1. Talent Pool - A lot of Java talent is available in the job market. You cannot hire a 100 member RoR team in a day!

2. Scalability - J2EE has been evolving for almost 10 years now and offers pretty good scalability.

3. Out of the box portlet support - This is a must have for a large enterprise application composed of multiple Web applications.

4. Advanced Ajax support - The Dojo based Ajax support can be leveraged to create highly responsive Web applications.

5. Validation support - Client side and server side validations can be applied declaratively.

Pretty soon Struts2 will turn out to be “Java on Rails”…

Posted in Struts2 Tips | No Comments »

Struts2 in production - beware of experimental features

Thursday, January 17th, 2008

Struts2 is a production quality Web framework. Many architects including me have been using it on many production Web systems across the world. But you need to be careful when using experimental features in Struts2 in a production system. They are undergoing rapid changes and when you upgrade, you might have to change your code!

For example, out of the box portlet support is one of the major experimental features. If your application is designed keeping the portal enviornment in mind (separate render and action requests) you can easily port your Struts2 application to portlet environment such as JetSpeed and JBoss portal. But portlet usage is different between 2.0.9 and 2.0.11 versions of Struts2! That means you will have to rework some of the code written in Struts 2.0.9 to get it working in 2.0.11.

Similar is the case with Ajax tags such as the Ajax div tag which uses Dojo. These are undergoing rapid changes and new attributes and behavior is added to these tags. So be prepared for some migration effort if you are using them in Struts 2.0.9/2.0.11 and want to move to Struts 2.1.

Main experimental features as of Struts 2.0.11 are cookie interceptor, portlet support, ajax theme, SEO friendly URL support and new plugins such as Tiles plugin. Hopefully most of these will stabilize by Struts 2.1 release.

Posted in Migrating, Portlet Support, Struts2 Tips | 2 Comments »

Struts2 and AJAX - Using Dojo Div - Part I

Wednesday, January 16th, 2008

Download Source | View Demo

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.

Posted in Ajax, Struts 2.0.11, Tutorials | 3 Comments »

Getting started with Struts2 using NetBeans as IDE

Monday, January 14th, 2008

In this post, I will look at how Web application development can be started with Struts2. I am using Ubuntu. If you are using other operating systems such as Windows follow similar steps for the platform.

1. Install Java - The first step is to install latest production release of Java. Download J2SE 1.6 from Sun’s Java site - http://java.sun.com/. On Ubuntu, you can use apt-get as given below.

sudo apt-get install sun-java6-bin

After installation, verify the Java version by running the following in the command prompt,

javac -version

2. Install IDE for development - For Web application development there are a lot of IDEs out there. My favorites are Eclipse, NetBeans, JBuilder, WebSphere Application Developer and IntelliJ IDEA. For this example I will use NetBeans since it is free and the download size is reasonable. You can download it from http://www.netbeans.org/

3. Download Struts2 libraries - For developing Struts2 applications, the minimum you need are the base libraries. You can download them from http://struts.apache.org/. Download “Essential Dependencies Only” zip file which is about 5MB.

4. Creating Your first Struts2 Web Application - We will go with a very simple example in which we want the Web application to print “Hello World”. Here are steps required.

(a) Start NetBeans and then create a new Web application. From File->New Project choose Web->Web Application. In the project properties, give the application name as HelloWorld and context name as /HelloWorld. You can either choose Tomcat or Glassfish server. I prefer to use Tomcat. You will get a standard blank Web Application created.

(b) Add Struts2 libraries. For this add a folder “lib” under WEB-INF. Then copy only the following “Essential Dependencies” Jar files from the Struts zip you downloaded. Also add all the jars to compilation path under “project properties”->”libraries”.

Minimum set of jars with which you can start a Struts2 Web project (xxx stands for the latest version number),

commons-logging-xxx.jar
fremarker-xxx.jar
ognl-xxx.jar
struts2-core-2.xx.jar
xwork-xxx.jar

(c) Create web.xml under WEB-INF folder and struts.xml under the root folder for “Source Packages”.

web.xml configures Struts2 to handle all URLs as shown below.

struts.xml configures action classes to URL paths as shown below. It also configures the view component to be invoked after executing controller class.

(d) Create HelloWorld.java under “Source Packages” which is an action class in Struts2 speak. This acts as the controller. The SUCCESS return value points to the view element under default result tag in struts.xml, which in this case is HelloWorld.jsp

(e) Create HelloWorld.jsp under root of Web Content (which is “Web Pages” folder in NetBeans).

(f) “Run the Main Project” from NetBeans and access the URL “http://localhost:8084/HelloWorld/HelloWorld.action” from browser. You should see “Hello World!” in the browser. Now you are all set to start Struts2 Web Application Development!

Posted in Getting Started, Tutorials | 2 Comments »

Archive for January, 2008

Creating a cascading application menu using Struts2 and YUI

Struts2 - Java on Rails?

Struts2 in production - beware of experimental features

Struts2 and AJAX - Using Dojo Div - Part I

Getting started with Struts2 using NetBeans as IDE

Sponsors

Pages

Links

Archives

Categories

Recent Comments

Recent Post

Popular This Month

Random Stats