Sitemesh + Struts 2 – Tutorial

I am planning to replace Tiles with Sitemesh layout for jEDP. I was searching for a good start-up tutorial. I found one, which is incomplete!! Probably I will have this post as a ‘HOWTO’, will write about the differences between Sitemesh and Tiles in my next entry.

Steps to be followed 1 2 & 3

#1 Add site mesh library to your web application

• Go to http://www.opensymphony.com/sitemesh/download.html
• Sitemesh comes with its own blank war, though, I downloaded only the jar file
• Copied the jar file sitemesh-2.4.1.jar to the lib folder of my webapp

#2 Add Sitemesh config to webapp

• Make the following entries to web.xml. Remember, we are adding  ActionContextCleanUp also. I have given the entries for Struts2 plugin as well for better understanding of the position of filter and mapping tags.

<filter>
	<filter-name>struts-cleanup</filter-name>
	<filter-class>org.apache.struts2.dispatcher.ActionContextCleanUp</filter-class>
</filter>
<filter>
	<filter-name>sitemesh</filter-name>
	<filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
</filter>
<filter>
	<filter-name>struts2</filter-name>
	<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
	<filter-name>struts-cleanup</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>
<filter-mapping>
	<filter-name>sitemesh</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>
<filter-mapping>
	<filter-name>struts2</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

#3 Create Decorators

• This is too early to know about decorators. I will write it in my next post. So, just add a decorator.xml in your WEB-INF folder

<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
	<decorator name="main" page="layout.jsp">
		<pattern>/*</pattern>
	</decorator>
	<decorator name="panel" page="panel.jsp">
	</decorator>
</decorators>

This declares a master layout file layout.jsp

#4 Create files

/layout.jsp

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="pages" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SiteMesh Layout - <decorator:title default="Welcome"></decorator:title> </title>
<decorator:head/>
</head>
<body>
<table>
<tr>
<td colspan="3" bgcolor="#FFFF00"><pages:applyDecorator page="/paneldata.html" name="panel" title="header"></pages:applyDecorator></td>
</tr>
<tr>
<td><pages:applyDecorator page="/paneldata.html" name="panel" title="left panel"></pages:applyDecorator></td>
<td><decorator:body/></td>
<td><pages:applyDecorator page="/paneldata.html" name="panel" title="right panel"></pages:applyDecorator></td>
</tr>
<tr><td></td></tr>
</table>
</body>
</html>

/panel.jsp

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<decorator:title default="panel title"></decorator:title>
<decorator:body/>
Panel Content Goes here

/paneldata.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Panel data goes here.
</body>
</html>

Now start the webapp. Try to acess your home page. Here is mine!