Sitemesh Webapp Tutorial

Sitemesh is a page decorating framework similar to popular Tiles framework. Heres how you can compare these

  1. SiteMesh is much easier to configure and use (less typing and easier to understand)
  2. Using Tiles, you need to have your forwards go to a “tiles page” versus the direct JSP. SiteMesh takes the approach that your page (your JSP) doesn’t even know or care that it’s being decorated.
  3. Using Tiles, each individual page you want to go to has to be associated with a layout – a major point – Every time you create a new JSP that you want to forward to, you have to create another tiles definition and associate it with a layout and forward to the Tile page (versus the JSP). With SiteMesh you can simply set up a URL pattern and all your pages are automatically decorated with the layout you configure.

 
Disadvantages of Sitemesh
SiteMesh stores the entire content of your HTML body into memory before it decorates it. If you have some very large pages, such as might happen in a reporting application where you don’t have pagination implemented and end up with one large page of rows, you could end up with severe memory problems.
 
Example below demonstrates how you can configure sitemesh in your web application.

1. Project Layout

 

2. Web.xml

We configure sitemesh filter com.opensymphony.sitemesh.webapp.SiteMeshFilter in project’s web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

	<display-name>sitemesh-webapp-example</display-name>

	<filter>
		<filter-name>sitemesh</filter-name>
		<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
	</filter>

	<filter-mapping>
		<filter-name>sitemesh</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

</web-app>

3. sitemesh.xml

Create a sitemesh.xml file as below in your web application’s WEB-INF directory next to your web.xml file.

<sitemesh>
	<property name="decorators-file" value="/WEB-INF/decorators.xml" />
	<excludes file="${decorators-file}" />

	<page-parsers>
		<parser content-type="text/html"
			class="com.opensymphony.module.sitemesh.parser.FastPageParser" />
	</page-parsers>

	<decorator-mappers>
		<mapper
			class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
			<param name="config" value="${decorators-file}" />
		</mapper>
	</decorator-mappers>
</sitemesh>

4. decorators.xml

Create another file decorators.xml inside your WEB-INF directory next to sitemesh.xml as below.
Whatever path pattern is provided inside <excludes>...</excludes> is ignored by sitemesh, so paths of static items like images, stylesheet, javascript etc should be put between your excludes tag.
There can be multiple layouts in your website, for example there can be a diffent layout to users that have not logged-in and a different layout for securely logged-in users. So we define multiple decorators for multiple layouts and give them a name and path of the layout jsp page that defines the layout for this decorator. Inside our decorator tag we have a pattern tag that defines url patterns where current layout gets applied.

<?xml version="1.0" encoding="ISO-8859-1"?>
<decorators defaultdir="/WEB-INF/decorators">
	<excludes>
		<pattern>/nodecorate/*</pattern>
		<pattern>/styles/*</pattern>
		<pattern>/assets/*</pattern>
		<pattern>/scripts/*</pattern>
		<pattern>/images/*</pattern>
		<pattern>/index.html</pattern>
		<pattern>/META-INF/*</pattern>
	</excludes>

	<decorator name="layout" page="layout.jsp">
		<pattern>/client/*</pattern>
		<pattern>/*</pattern>
		<pattern>/js/*</pattern>
	</decorator>
	
	<decorator name="fullPage" page="fullPageLayout.jsp">
		<pattern>/home</pattern>
		<pattern>/home.htm</pattern>
		<pattern>/js/registration</pattern>
		<pattern>/js/registration.htm</pattern>
		<pattern>/client/registration</pattern>
		<pattern>/client/registration.htm</pattern>
		<pattern>/rs</pattern>
		<pattern>/rs.htm</pattern>
	</decorator>
	
	<decorator name="headerFooterOnly" page="headerFooterLayout.jsp">
		<pattern>/profile/*</pattern>
	</decorator>
</decorators>

5. layout.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator"
	prefix="decorator"%>

<%@page contentType="text/html; charset=UTF-8"%>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>https://bharatonjava.wordpress.com | <decorator:title
	default="Sitemesh Example" /></title>

<link rel="stylesheet" type="text/css" href="assets/css/styles.css">

<decorator:head />

</head>

<body>
<table class="mainTable" id="page-container" cellpadding="5" cellspacing="0" border="1"
	align="center">
	<tr>
		<td colspan="2" id="page-header"><%@ include
			file="/WEB-INF/includes/header.jsp"%></td>
	</tr>
	<tr>
		<td id="nav-container" colspan="2"><%@ include
			file="/WEB-INF/includes/navigation.jsp"%></td>
	</tr>
	<tr>
		<td id="left-nav-container"><%@ include
			file="/WEB-INF/includes/navigationLeft.jsp"%></td>
		<td id="content-container"><decorator:body /></td>
	</tr>
	<tr>
		<td colspan="2" id="page-footer"><%@ include
			file="/WEB-INF/includes/footer.jsp"%></td>
	</tr>
</table>
<table align="center">
	<tr>
		<td align="center"><br /><a
			href='https://bharatonjava.wordpress.com'>Source code available on Bharat's Blog</a></td>
	</tr>
</table>
</body>
</html>

Above layout.jsp page defines the layout of my output on browser. I have a header, top navigation, left navigation column, footer and the main content area which is defined by <decorator:body/> tag. sitemesh automatically decorates all your pages around your content page (Cool!).
You can have several layout jsp pages defined based on different layouts your maight want in your application.
 
Here is how the output looks on the browser
 

6. Project Source Code

Download Example Source code

Advertisements

, , , ,

  1. #1 by Sheetal on August 16, 2013 - 6:09 am

    Hi When I am trying to work on this source code , I am getting this error
    org.apache.jasper.JasperException: The absolute uri: http://www.opensymphony.com/sitemesh/decorator cannot be resolved in either web.xml or the jar files deployed with this application
    org.apache.jasper.compiler.DefaultErrorHandler.jspError(DefaultErrorHandler.java:51)

    • #2 by Bharat Sharma on August 16, 2013 - 6:35 pm

      this means that the uri could not be found in the jar which is in your classpath.
      There is a source code download link at the end of blog post. download the zip file and import code in eclipse.
      you need to have maven installed to use this code..
      on command prompt goto your project’s root directory and run following commands
      mvn eclipse:eclipse -Dwtpversion=2.0
      mvn clean install

      if you have maven eclipse plugin configured in your eclipse then right click on your project’s root directory and goto maven -> update project.
      and then run project Root -> run – > Maven Install

      to know more about maven installation see this post https://bharatonjava.wordpress.com/2012/09/18/installing-maven/

  2. #3 by Anil KUmar on May 11, 2015 - 10:50 am

    Nice post for Biginners

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: