Saturday, 23 April 2016

How to use Sitemesh and decorator ?


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.
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-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>



Defining 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>


Creating 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 : A simple html page
<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.

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

No comments:

Post a Comment

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