Advanced SiteMesh

Suppose you're creating an enterprise-level web site and you have to use more than one technology for building it. For example, you want to add some new content to your web site using J2EE, but parts of your system have already been created using CGI or Microsoft IIS server.

In this case, how do you make sure that you have a consistent look and feel across your site? One option would be to rewrite everything in J2EE and then use a framework such as Struts-Tiles, but this option is not feasible because of the development costs associated with this approach. A second option could be to implement the same look and feel in every web application that is part of your system. This approach becomes a nightmare for anyone maintaining the web site, since any time there is look and feel change in one application, you'll have to make similar changes to the other web applications in the system.

The problem with most of the available frameworks for solving this type of business requirement is that they are either platform- or framework-specific. When you're using Tiles for decoration in Struts, you have to create tiles definition in tiels-defs.xml. Inside of your struts-config.xml while declaring forwards, you will have to use these tiles' definition instead of actual JSP.

The easiest possible solution is to let each of your web applications create plain HTML content without knowing about how it is being decorated, and only then have something else choose and apply appropriate decorators. This is precisely what SiteMesh does.

SiteMesh is an open source framework based on Java, J2EE, and XML. SiteMesh depends on filters, a cool feature introduced in the Servlet specification 2.3.

Installation and Setup

In my experience, the best way to learn any technology or framework is to create a simple sample application using it. So we will start by creating a simple Struts application using SiteMesh. Our application will have three pages:

• A login page
• A help page, which will have a header and footer
• A home page, which will have a header, a footer, and a side menu

Here are the steps to building the simple web application:

1. SiteMesh is based on filters, so we have to inform our web application about the SiteMesh filter. Adding the following lines to web.xml can do this:

   <filter>
   
     <filter-name>sitemesh</filter-name>
   
     <filter-class>
   
         com.opensymphony.module.sitemesh.filter.PageFilter
   
     </filter-class>
   
     <init-param>
   
       <param-name>debug.pagewriter</param-name>
   
       <param-value>true</param-value>
   
     </init-param>
   
   </filter>
   
   <filter-mapping>
   
     <filter-name>sitemesh</filter-name>
   
     <url-pattern>/*</url-pattern>
   
   </filter-mapping>

   Here we are telling the container that all requests to this web application should go through PageFilter. The PageFilter class is part of sitemesh-2.1.jar, which you can download from the SiteMesh downloads page. Once downloaded, you should copy sitemesh-2.1.jar to the /WEB-INF/lib folder.

2. Create a decorators.xml file in the WEB-INF folder like this:

   <decorators defaultdir="/decorators">
   
     <!-- Decorator for pages which need Sidemenu -->
   
     <decorator name="sidemenu" page="sidemenu.jsp">
   
       <pattern>/home.jsp</pattern>
   
     </decorator>
   
     <!-- Decorator for pages which need header and footer -->
   
     <decorator name="headerfooter" page="headerfooter.jsp">
   
       <pattern>/help.jsp</pattern>
   
     </decorator>
   
   </decorators>

   The decorators.xml file is used to define decorators for your application. In this file, each <decorator> element defines one decorator. The name attribute is used to define a name for that decorator, while the page attribute defines the JSP page that should be used for decorating. The <pattern> child element defines when a particular decorator should be applied.

   In our example web application, we want two decorators: headerfooter.jsp, to add a header and footer, and sidemenu.jsp, to add a header, a footer, and a side menu. We want to decorate the help page by adding a header and footer, so we add the /help.jsp path sub-element to headerfooter.jsp.

3. Create headerfooter.jsp in the WebContent/decorators folder:

   <%@ taglib
   
       uri="http://www.opensymphony.com/sitemesh/decorator"
   
       prefix="decorator" %>
   
   <html>
   
     <head>
   
       <title>
   
         My Site - 
   
         <decorator:title default="Welcome!" />
   
       </title>
   
       <decorator:head />
   
     </head>
   
     <body>
   
       <table>
   
         <tr>
   
           <td>
   
             <H1>
   
               SiteMesh Corporation
   
             <H1>
   
           </td>
   
         </tr>
   
         <tr>
   
           <td><decorator:body /></td>
   
         </tr>
   
         <tr>
   
           <td> SiteMesh copyright</td>
   
         </tr>
   
       </table>
   
     </body>
   
   </html>

   A SiteMesh decorator is a JSP page using SiteMesh custom tags. In our web application, when the user requests the help page, SiteMesh will intercept the request and send it to the web application. Once it gets a response from the application, it will parse it and insert the header part of it in headerfooter.jsp in place of <decorator:head/>, and the body part in place of <decorator:body>. Finally, it will return headerfooter.jsp to the client.

4. Create help.jsp in the WebContent folder:

   <HTML>
   
   <HEAD>
   
   <%@ page 
   
   language="java"
   
   contentType="text/html; charset=ISO-8859-1"
   
   pageEncoding="ISO-8859-1"
   
   %>
   
   <TITLE>Help Page</TITLE>
   
   </HEAD>
   
   <BODY>
   
     Help Page 
   
   </BODY>
   
   </HTML>

   This is a very simple help page for our sample web application.

5. Test the SiteMesh installation by requesting the help.jsp page. It should display the help page with header and footer.