Tutorial

Turning a web page into a JSF 2.0 template with Facelets

How do you take a web page and turn it into a template using Facelets as the template engine? It takes some JSF, some HTML, maybe some CSS, and lots of JSF UI tags, but overall, it's an easy and simple process if you follow this tutorial.

Cameron McKenzie
By
Published: 19 Jul 2014

The first thing one needs to accomplish when building an enterprise application based upon a Facelets based template is to get the basic page designed using HTML and CSS, as was accomplished in the previous tutorial. The next step is to copy this content into a new page, which we will call layout.xhtml, and then locate each of the sections of the page that might get updated with new content at some point in time. Those sections are then wrapped with ui:insert tags.

Page templates with Facelets tags

For example, the header area of the original template looks like this:

<div id="header">
	<p>Header</p>
</div>

 

To make the header an area that can have its content switched in and out by the Facelets templating engine, we update it by wrapping it with ui:insert tags, and giving those tags a meaningful name attribute. For the header section, the meaningful name attribute would simply be the word header, as shown below.

<div id="header">
	<ui:insert name="header">
		<p>Header</p>
	</ui:insert>
</div>

The portion of the page wrapped up within the ui:insert tags becomes a pivot point in which new pages using this layout can change the content that goes into it.

Completing the Facelets template

The completely updated layout.xhtml page looks as follows:

<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
	<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</h:head>
<h:body>
	<div id="page">
		<div id="header-container">
			<div id="header">
				<ui:insert name="header">
					<p>Header</p>
				</ui:insert>
			</div>
		</div>
		<div id="messages-container">
			<div id="messages">
				<ui:insert name="messages">
					<p>Messages</p>
				</ui:insert>
			</div>
		</div>
		<div id="content-container">
			<div id="content">
				<ui:insert name="content">
					<p>Main content</p>
				</ui:insert>
			</div>
			<div id="sidebar">
				<ui:insert name="rightnav">
					<p>Sidebar/Right-nav</p>
				</ui:insert>
			</div>
		</div>
		<div id="footer-container">
			<div id="footer">
				<ui:insert name="footer">
					<p>Footer</p>
				</ui:insert>
			</div>
		</div>
	</div>
</h:body>
</html>

When run on the server, this page looks exactly the same as the original page that contained no Facelets tags, which is exactly what we want. We have recreated the original page, with its original layout, but we have decorated the plain HTML and CSS page with Facelets tags.

When the template is done, it's time to create some new pages based upon it. But that's the next step. For now, bask in the glow of a well built, Facelets based template. And when you're done basking, move on to the next tutorial that actually creates some pages based on this.

 

What problems have you encountered when using other template engines? Let us know.

Dig Deeper on Application performance measurement and Java performance