» » Using Sitemesh with Struts 2.0

Using Sitemesh with Struts 2.0

Bookmark and Share
SiteMesh is a web-page layout and decoration framework and web-application integration framework like Tiles that can be used to give a consistent look and feel to your site. While tiles, which works with templates, SiteMesh acts as a decorator around your HTML pages that go through the web-server. SiteMesh can also include entire HTML pages as a Panel within another page. Using this feature, Portal type web sites can be built very quickly and effectively. As one might expect, SiteMesh works with Servlet filters to achieve this. The following example demonstrates the use of SiteMesh with Struts 2.0. I am just going to use the struts-blank application and add SiteMesh decorator to the welcome page.

Setup SiteMesh

  1. Import struts-blank.war into Eclipse and rename it.
  2. Download the latest version of SiteMesh (v2.3) from here.
  3. Copy sitemesh-2.3.jar to the WEB-INF/lib folder of your web application.
  4. Add a filter mapping for sitemesh to web.xml file. As discussed in the previous post (Struts 2.0 controller), you need to add the ActionContextCleanup filter too. Your web.xml filter descriptions should look like this:
    <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.FilterDispatcher
</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>

This completes the setup of your web application for using sitemesh.

Creating Decorators
Once your web application is setup for SiteMesh, you can start writing your decorators. For this, first create a decorators.xml file in your WEB-INF directory. For this example we will define a single decorator layout.jsp. The decorators.xml file is shown below
<?xml version="1.0" encoding="ISO-8859-1"?>
<decorators defaultdir="/decorators">
<decorator name="main" page="layout.jsp">
<pattern>/*</pattern>
</decorator>
<decorator name="panel" page="panel.jsp" />
</decorators>


Once we define the decorators in the decorators.xml file, we have to create the decorators themselves. The following is the code for layout.jsp
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator"
prefix="decorator"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page"
prefix="pages"%>
<html>
<head>
<title>My Site - <decorator:title default="Welcome!" /></title>
<decorator:head />
</head>

<body>
<table>
<tr>
<td bgcolor="skyblue"><pages:applyDecorator page="/paneldata.html"
name="panel" title="Left Panel" /></td>
<td><decorator:body /></td>
<td bgcolor="gray"><pages:applyDecorator page="/paneldata.html"
name="panel" title="Right Panel" /></td>
</tr>
</table>
</body>
</html>
The following is the code for panel.jsp
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>

<table border="0" cellpadding="1px" cellspacing="2px">
<tr>
<th class="panelTitle">
<decorator:title default="Panel Title here" />
</th>
</tr>
<tr>
<td class="panelBody">
<decorator:body />
</td>
</tr>
</table>

The paneldata.html is a simple html page shown below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
Panel data goes here.
</body>
</html>

If you know tiles, this page is quite self explanatory. The main difference is the way in which this works. The decorator:body tag holds the actual page that is requested. This is made possible by the filter mapping in web.xml and the mapping of "/*" to main layout in decorators.xml file. Whereas in tiles, you have to push the pages into the template file, SiteMesh pulls the requested page into the template (this is not true in the case of applyDecorator though).
- Tags: , -

{ 0 comments... Views All / Send Comment! }


Post a Comment