Facelets Templating in JSF 2.0

One advantage that Facelets has over JSP is its templating mechanism. Templates allow us to specify page layout in one place, then we can have template clients that use the layout defined in the template. Since most web applications have consistent layout across pages, using templates makes our applications much more maintainable, since changes to the layout need to be made in a single place. If at one point we need to change the layout for our pages (add a footer, or move a column from the left side of the page to the right side of the page, for example), we only need to change the template, and the change is reflected in all template clients.

NetBeans provides very good support for facelets templating. It provides several templates "out of the box", using common web page layouts.

facelets-templating-jsf-20-img-0

We can then select from one of several predefined templates to use as a base for our template or simply to use it "out of the box".

facelets-templating-jsf-20-img-1

NetBeans gives us the option of using HTML tables or CSS for layout. For most modern web applications, CSS is the preferred approach. For our example we will pick a layout containing a header area, a single left column, and a main area.

After clicking on Finish, NetBeans automatically generates our template, along with the necessary CSS files.

The automatically generated template looks like this:

<?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

>
<h:head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet"
type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet"
type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>

As we can see, the template doesn't look much different from a regular Facelets file.

Adding a Facelets template to our project

We can add a Facelets template to our project simply by clicking on File | New File, then selecting the JavaServer Faces category and the Facelets Template file type.

Notice that the template uses the following namespace: Java EE 6 Development with NetBeans 7" href="http://java.sun.com" target="_blank">http://java.sun.com/jsf/facelets. This namespace allows us to use the <ui:insert> tag, the contents of this tag will be replaced by the content in a corresponding <ui:define> tag in template clients.

Using the template

To use our template, we simply need to create a Facelets template client, which can be done by clicking on File | New File, selecting the JavaServer Faces category and the Facelets Template Client file type.

facelets-templating-jsf-20-img-2

After clicking on Next >, we need to enter a file name (or accept the default), and select the template that we will use for our template client.

facelets-templating-jsf-20-img-3

After clicking on Finish, our template client is created.

<?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
>
<body>
<ui:composition template="./template.xhtml">
<ui:define name="top">
top
</ui:define>
<ui:define name="left">
left
</ui:define>
<ui:define name="content">
content
</ui:define>
</ui:composition>
</body>
</html>

As we can see, the template client also uses the Java EE 6 Development with NetBeans 7" href="http://java.sun.com" target="_blank">http://java.sun.com/jsf/facelets" namespace. In a template client, the <ui:composition> tag must be the parent tag of any other tag belonging to this namespace. Any markup outside this tag will not be rendered; the template markup will be rendered instead.

The <ui:define> tag is used to insert markup into a corresponding <ui:insert> tag in the template. The value of the name attribute in <ui:define> must match the corresponding <ui:insert> tag in the template.

After deploying our application, we can see templating in action by pointing the browser to our template client URL.

facelets-templating-jsf-20-img-4

Notice that NetBeans generated a template that allows us to create a fairly elegant page with very little effort on our part. Of course, we should replace the markup in the <ui:define> tags to suit our needs.

Here is a modified version of our template, adding markup to be rendered in the corresponding places in the template:

<?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

>
<body>
<ui:composition template="./template.xhtml">
<ui:define name="top">
<h2>Welcome to our Site</h2>
</ui:define>
<ui:define name="left">
<h3>Links</h3>
<ul>
<li>
<h:outputLink value="http://www.packtpub.com">
<h:outputText value="Packt Publishing"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.ensode.net">
<h:outputText value="Ensode.net"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.ensode.com">
<h:outputText value="Ensode Technology,
LLC"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.netbeans.org">
<h:outputText value="NetBeans.org"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.glassfish.
org">
<h:outputText value="GlassFish.org"/>
</h:outputLink>
</li>
<li>
<h:outputLink
value="http://www.oracle.com/technetwork/
java/javaee/overview/index.html">
<h:outputText value="Java EE 6"/>
</h:outputLink>
</li>
<li><h:outputLink value="http://www.oracle.com/
technetwork/java/index.html">
<h:outputText value="Java"/>
</h:outputLink></li>
</ul>
</ui:define>
<ui:define name="content"> <p>
In this main area we would put our main text,
images, forms, etc. In this example we will simply
use the typical filler text that web designers
love to use.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc venenatis, diam nec tempor dapibus, lacus
erat vehicula mauris, id lacinia nisi arcu vitae purus. Nam
vestibulum nisi non lacus luctus vel ornare nibh pharetra.
Aenean non lorem lectus, eu tempus lectus. Cras mattis nibh
a mi pharetra ultricies. In consectetur, tellus sit amet pretium
facilisis, enim ipsum consectetur magna, a mattis ligula massa
vel mi. Maecenas id arcu a erat pellentesque vestibulum at
vitae nulla. Nullam eleifend sodales tincidunt. Donec viverra
libero non erat porta sit amet convallis enim commodo. Cras
eu libero elit, ac aliquam ligula. Quisque a elit nec ligula
dapibus porta sit amet a nulla. Nulla vitae molestie ligula.
Aliquam interdum, velit at tincidunt ultrices, sapien mauris
sodales mi, vel rutrum turpis neque id ligula. Donec dictum
condimentum arcu ut convallis. Maecenas blandit, ante
eget tempor sollicitudin, ligula eros venenatis justo, sed
ullamcorper dui leo id nunc. Suspendisse potenti. Ut vel
mauris sem. Duis lacinia eros laoreet diam cursus nec
hendrerit tellus pellentesque.
</p>
</ui:define>
</ui:composition>
</body>