Content Blocks

Content blocks are a way to mark blocks of content for later use in a Sitemesh template. This gives you finer-grained control over how to lay out the page. In your Sitemesh template, you can arrange components within the body, instead of treating the entire body as an indivisible block. To define a block, enclose it in <content> tags, with tag=name the name you'll use to refer to it later:

<content tag="navbar">
... draw the navbar here...
</content>

Then you can reference these blocks in your Sitemesh template like this:

<decorator:usePage id="pageContent" />
....
<%	String navbar = pageContent.getProperty("page.navbar");
	if (navbar != null) {
%>
		<td class="nav"><%= navbar %></td>
<%	} %>

This is very useful because it allows you define the layout for your pages in one (or a few) Sitemesh templates, instead of in multiple jsp pages. Your jsp pages just output the content, and let the Sitemesh template(s) handle layout.

For example, say you have dozens of jsp page that look like this:

1	<%@ page
2		contentType="text/html"
3		errorPage="error.jsp"
4
5	%>
6	<content tag="header"><%@ include file="components/header.jsp" %></content>
7	<content tag="nav"><%@ include file="components/nav.jsp" %></content>
8	<content tag="bodyContent">... body content here ...</content>
9	<content tag="portlets"><%@ include file="components/portlets.jsp" %></content>

This page defines four content blocks: header, nav, bodyContent, and portlets. To create a page layout that looks like this:

header goes here
navbar goes here	content body goes here	portlets go here

create a Sitemesh template like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<decorator:usePage id="pageContent" />
<head>
	<title>Sample Website</title>
	<decorator:head />
</head>
<body>
... static header goes here ...
<%= pageContent.getProperty("page.header") %>
<table width="800" border="0">
<tr>
	<td class="left-nav"><%= pageContent.getProperty("page.navbar") %></td>
	<td class="content"><%= pageContent.getProperty("page.bodyContent") %></td>
	<td class="portlets"><%= pageContent.getProperty("page.portlets") %></td>
</tr>
</table>
... static footer goes here ...
</body>
</html>

But what happens someone decides that page is too wide, and the portlets should go below the content instead of on the right?

header goes here
navbar goes here	content body goes here
portlets go here

If you'd put the layout in the jsp files, you'd have to change it in every file. But with the layout in the Sitemesh template, you only need to change the single template file.

Change the Sitemesh template to this, and you're done:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<decorator:usePage id="pageContent" />
<head>
	<title>Sample Website</title>
	<decorator:head />
</head>
<body>
... static header goes here ...
<%= pageContent.getProperty("page.header") %>
<table width="600" border="0">
<tr>
	<td class="left-nav" rowspan=2><%= pageContent.getProperty("page.navbar") %></td>
	<td class="content"><%= pageContent.getProperty("page.bodyContent") %></td>
</tr>
<tr>
	<td class="portlets"><%= pageContent.getProperty("page.portlets") %></td>
</tr>
</table>
... static footer goes here ...
</body>
</html>