Skip to end of metadata
Go to start of metadata

Introduction

The best approach to understanding SiteMesh is to use it. Assuming that SiteMesh is setup in your web application this tutorial will show you how to master the most powerful aspect of SiteMesh, decorating pages as illustrated below,

Gliffy Zoom Zoom Cafe Mirabeau Figure 1.0

The magic happens at step 2 where the page Menu.jsp is rendered as html. Just before the html page is sent down to the client browser, the page is decorated by a single file, basic-theme.jsp.

In this example, a menu is added, a footer is added without any extra code being added to Menu.jsp.

Demo Website

We will start by creating a simple website about a fictional coffee & cake shop called Café Mirabeau.

In your web folder, usually called WebContent, create a folder called data. Inside of data create or download (menu.jsp hours.jsp) these 2 simple html pages.

menu.jsp

And your second page,

hours.jsp

The key thing to keep in mind is that these are just simple HTML pages which all contain a head and body. The files have a jsp extension to prevent caching issues.

Setup Decorators

The decorators are what define the look and feel of the site.

In your web folder, usually called WebContent, create a folder called decorators. Inside decorators create or download your first decorator basic-theme.jsp,

basic-theme.jsp

Line 2 - the taglib declaration allows the JSP file to use the SiteMesh tag library.

Line 12 - decorator:body places the rendered contents of the decorated pages into the decorator.

Define Decorator and Pattern

The last step is to modify or download WebContent/WEB-INF/decorators.xml to,

  • Reference the decorator basic-theme.jsp
  • Specify the what resources should be decorated
decorator.xml
Icon

Because decorators.xml was modified, the server must be restarted for the changes to take effect.

Start your application server and browse to menu.jsp and hours.jsp to see the results of the pages combined with the decorator.

Icon

Not familiar with Java, JSP or Web Applications? Download the SiteMesh Starter Kit and follow the instructions on how to Launch the Default Example.

Summary

Using SiteMesh you can separate the look and feel from the data. Building on this example, there are more possibilities. For example additional templates could be loaded for,

  • Mobile Devices
  • Printable Web Pages
  • Web Accessibility

In large team this also allows easy enforcement of roles and responsibilities between presentation layer and back-end developers.

Even More!

SiteMesh provides an easy mechanism for page templates and has a wide range of uses beyond what this example shows. Some feature highlights include,

  • Technology agnostic decoration for example, HTML, PHP, Perl etcetera
  • Logic based decorating
  • Parameter passing
  • Integration with other frameworks (Freemarker, WebWorks, Spring, Struts, Velocity etcetera)

If you want to dive right in, read the 10 minute tutorial, SiteMesh Adept, which provides all the necessary leanings to effectively use SiteMesh on your own website.

  • No labels