Friday, November 03, 2006

Using Sitemesh with Struts 2.0

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).
Posted by at
Labels: ,

5 comments:

  1. bhaavanaThursday, July 5, 2007 at 2:38:00 PM EDT

    thanks for informative sitemesh tutorial..
    i have a question regd the patterns we define in decorators.xml.

    if i have a test.jsp directly under webapp(not in any subfolder)and i need to define a pattern stipes(stripes.jsp for example)on it..

    decorator name="stripes" page="stripes.jsp"
    pattern /test.jsp /pattern
    /decorator

    but the decorator is not applied to test.jsp..any ideas how to solve this issue?

    ..thanks in advance..
    Mohitha

    ReplyDelete
  2. UnknownThursday, December 20, 2007 at 12:21:00 AM EST

    what is your defaultdir in decorators.xml? try giving path relative to that directory

    ReplyDelete
  3. UnknownFriday, February 22, 2008 at 5:17:00 PM EST

    i have problems mapping to html files when using struts. i can't map directly.
    the only patter which works is /*

    if i do /myPage.html
    which will be mapped to
    /WEB-INF/pages/myPage.jsp

    it will not work

    ReplyDelete
  4. AnonymousWednesday, December 10, 2008 at 5:59:00 AM EST

    Thanks.
    It is a nice one.

    ReplyDelete
  5. VVVMonday, July 13, 2009 at 12:55:00 PM EDT

    can you kindly give a complete example ? i'm not able to get the example working using sitemesh, i'm using TOMCAT 5.5 and struts 2.1.6 for the same

    ReplyDelete

Subscribe to: Post Comments (Atom)

Popular Posts