Thursday, 14 April 2016

How to use Sitemesh and decorator with Struts2 ?


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.

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.
SiteMesh works with Servlet filters to achieve this.


Setup SiteMesh

1. Make a sample struts application into Eclipse.
2. Download the latest version of SiteMesh (v2.3).
3. Copy sitemesh-2.2.1.jar and struts2-sitemesh-plugin-2.0.6.jar to the WEB-INF/lib folder of your web application.
4. Add sitemesh.xml, sitemesh-decorator.tld and sitemesh-page.tld in the WEB-INF directory.
5. Add a filter mapping for sitemesh to web.xml file. You need to add the ActionContextCleanup filter too.
Note: The filters should be defined in web.xml in correct order.

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


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.

decorators.xml
<?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>


After defining the decorators in the decorators.xml file, create the decorators themselves.

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>

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>

paneldata.html
<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html; 
         charset=ISO-8859-1">
  </head>
  <body>
     <!-- Panel data goes here. -->
  </body>
</html>


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.



Tiles vs. Sitemesh

Whereas in tiles, you have to push the pages into the template file, SiteMesh pulls the requested page into the template.

While tiles, which works with templates, SiteMesh acts as a decorator around your HTML pages that go through the web-server.

No comments:

Post a Comment

Note: only a member of this blog may post a comment.