SiteMesh Tutorial with Examples
SiteMesh is a web layout framework for Java. It differs from from frameworks such as Tiles in that it utilizes the decorator pattern. For example, you create a number of pages and then you tell SiteMesh that you’d like to add the same header, footer, and menus to each of those pages. This tutorial will give you a simple example of how SiteMesh can be used to give you a cleaner layout architecture and speed development times.
Start by downloading SiteMesh and adding sitemesh-2.3.jar to your WEB-INF/lib directory. Then add the SiteMesh filter to your web.xml file like so:
<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>
This will call the SiteMesh filter whenever a page on your site is accessed. Now we’ll need to create a /WEB-INF/decorators.xml file:
<decorators defaultdir="/WEB-INF/decorators">
<decorator name="main" page="main.jsp">
<pattern>/WEB-INF/pages/*</pattern>
</decorator>
<decorators>This will decorate all of the pages located under /WEB-INF/pages/ with the decorator /WEB-INF/decorators/main.jsp, which we’ll create next:
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<head>
<title>
Lumidant.com - <decorator:title default="SiteMesh Tutorial Example" />
</title>
<style type="text/css">@import "css/global.css";</style>
<decorator:head />
<body>
<div id="header">
<h2><a href="http://www.lumidant.com/">Lumidant.com</a> Tutorials</h2>
</div>
<div id="content">
<decorator:body />
</div>
</body>
</html>This decorator does a couple of things. First off, it create an HTML title tag, which starts as “Lumidant.com – ” and then appends the title of the page that is being decorated. If that page does not have a title tag, then a default is used to render “Lumidant.com – SiteMesh Tutorial Example”. It then adds a global style sheet to every page being decorated and appends whatever is in that page’s head tag, which is useful for page-specific JavaScript, etc. The decorator continues by adding a header to each page reading “Lumidant.com Tutorials” followed by the decorated page’s content.
Pretty cool, right? If anyone is familiar with a similar decorator framework in PHP, please let me know.
Buy Me a Beer
maxwell said,
September 30, 2008 at 5:23 am
yeah sitemesh is great
Selcuk said,
October 14, 2008 at 2:07 pm
/WEB-INF/pages/*
How do you close “decorator” tag there? How do you define a decorator for each page?
Thanks for the post, a good start to sitemesh… (at least for me)
Ben said,
October 14, 2008 at 9:22 pm
Thanks for pointing out the mistake Selcuk. I’ve updated the post, so hopefully it makes more sense now.
Dave Norris said,
March 17, 2009 at 7:43 am
Is there a way that we can use sitemesh to give one application multiple skins all based on the domain in the URL?
Also, how is the weather out there? I have some Xellerate questions for you too.
-Dave
Ben said,
March 17, 2009 at 8:23 am
Hey Dave,
Great to hear from you! You should be able to create a DecoratorMapper that will do that.
Dave Norris said,
March 17, 2009 at 10:36 am
Do you have a good example of a CookieDecoratorMapper?
Ben said,
March 17, 2009 at 1:15 pm
I haven’t actually used DecoratorMappers before, so I don’t have a good example to share. The CookieDecoratorMapper is a pretty small file, so hopefully it’s not too hard to figure out what it’s doing from the source: http://fisheye5.cenqua.com/browse/~raw,r=1.2/sitemesh/src/java/com/opensymphony/module/sitemesh/mapper/CookieDecoratorMapper.java