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,
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.
<strong><u><span style="color:#3366ff;">menu.jsp</span></u></strong>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu</title>
</head>
<body>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</body>
</html>
And your second page,
<span style="background-color: rgb(255, 255, 255);"><span style="font-size:24px;color:#3366ff;"><strong>hours.jsp</strong></span></span>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hours</title>
</head>
<body>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</body>
</html>
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,
<strong><span style="font-size:24px;color:#3366ff;">basic-theme.jsp</span></strong>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
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
<span style="font-size:24px;color:#3366ff;"><strong>decorator.xml</strong></span>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>