Struts2 Help & Reference

Creating a cascading application menu using Struts2 and YUI

January 19th, 2008 | by Admin |

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

Creating a cascading application menu using Struts2 and YUI

Post a Comment

Sponsors

Pages

Links

Archives

Categories

Recent Comments

Recent Post

Popular This Month

Random Stats