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.
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
Manmohan said,
December 11, 2009 at 3:40 am
Hello, I am very new to sitemesh. I have one question, how can exclude this sitemesh settings from some of the pages for example popup windows. I want to open a popup window but without any header or footer which are including automatically by sitemesh.
Thanks in advance.
Manmohan
Ben said,
December 11, 2009 at 2:37 pm
Manmonhan, the pages your decorators are applied to are specified by your decorators.xml file. As an example, one thing you could do is create a directory called popups that is not mapped to your decorator.
danny said,
February 1, 2010 at 7:55 am
Hi.
Thanks, thanks for scaled-down intro.
Note- there is a typo in your code. In your decorators.xml last is missing its closer- e.g.
veggen said,
February 24, 2010 at 12:54 am
It seems to me that the “decorator” namespace is really a misnomer. It should be “template” as this represents facelets templates more than anything else.
But that has nothing to do with the article, which was pretty useful
Ben said,
February 24, 2010 at 8:29 am
veggen,
The reason for calling it a decorator is that it follows the Decorator design pattern (http://en.wikipedia.org/wiki/Decorator_pattern) since the common portions of the page are placed around the content.
raghu said,
March 12, 2010 at 2:25 pm
Hello Ben,
I am using sitmesh with struts 2. It seems like sitmesh doesn’t work with struts.xml results. for example
i have dowloaded latest version of struts-2.1.8.1.war.
first i have clicked on http://localhost:8080/struts2-showcase-2.1.8.1/showcase.jsp
and
http://localhost:8080/struts2-showcase-2.1.8.1/showcase.action, the results are same.
i included below code in decorator.xml
/showcase.jsp
now the
http://localhost:8080/struts2-showcase-2.1.8.1/showcase.jsp excludes the header and footer but
http://localhost:8080/struts2-showcase-2.1.8.1/showcase.action includes the header and footer.
do you have any solution for this. if not then i need to change back to tiles.
thanks in advance,
Sincerely yours,
raghu N M
raghu said,
March 13, 2010 at 12:09 pm
what i mean was, including the below tag in exclude tag of decorator.xml /showcase.jsp