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.
yeah sitemesh is great 🙂
/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)
Thanks for pointing out the mistake Selcuk. I’ve updated the post, so hopefully it makes more sense now.
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
Hey Dave,
Great to hear from you! You should be able to create a DecoratorMapper that will do that.
Do you have a good example of a CookieDecoratorMapper?
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
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
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.
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.
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 🙂
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.
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
what i mean was, including the below tag in exclude tag of decorator.xml /showcase.jsp
you need to exclude the /showcase.action also.
for me, it’s something like requestDispatcher.include(), so the URL is still /showcase.actiom; as for sitemesh, it’s using filter, based on the urls.
Interesting, will definitely give this a try!
A couple of ‘/’ missing from the XML elements in the web.xml filter configuration example
Can you plz help me out i dont have a proper directory structure for my application means i don’t have webinf folder in such case where can i place my folder of decorator and related files
i am using sitemesh with spring. I have included CSS links in main.jsp created within decorators folder. It works fine when @RequestMapping annotation doesn’t contain nested path. But when nested path is being used, then stylesheet doesn’t get applied. For e.g
@RequestMapping(“/Spring/Sitemesh”)
Stylessheets work fine when the path is like @RequestMapping(“/Sitemesh”)
Hello McCann i have a question.
Can sitemesh help me to put a single url in all my application ?