Templating is a useful feature available with Facelets that allows you to create a page that will act as the template for the other pages in an application (something like Struts tiles). The idea is to obtain portions of reusable code without repeating the same code on different pages. In this recipe, you will learn the main aspects of templating and you will see how to develop a JSF application based on this feature.
We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.
Before developing and using some Facelets templates, let's say that the Facelets namespace is http://java.sun.com/jsf/facelets and it is usually prefixed with the ui prefix. Now, let's have a look at the Facelets tags that are used for templating:
|
Parameter |
Value |
|---|---|
|
|
Defines a component in the component tree. |
|
|
Defines a page composition that can use a template (any content outside of this tag is ignored). |
|
|
Defines a debug component in the component tree. |
|
|
Defines content that is inserted into a page by a template. |
|
|
Similar to the |
|
|
Similar to |
|
|
Used to encapsulate and reuse content for multiple pages. |
|
|
Inserts content into a template. |
|
|
Passes parameters to an included file. |
|
|
Used as an alternative for loop tags such as |
|
|
Removes content from a page. |
The previous list contains two tags that are commonly used together for creating and using a template. These tags are ui:insert and ui:define. The first one inserts content into a template, while the second one defines the content that is inserted into a page by a template.
Now, let's create a template page, named template.xhtml:
<!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" xmlns:ui="http://java.sun.com/jsf/facelets"> <head> <title> <ui:insert name="page_title"> Place here page title </ui:insert> </title> </head> <body> <table width="50%" style="height:150px;border:5px solid #000000;" bgcolor="white" align="left" cellpadding="0" cellspacing="0"> <tbody> <tr style="height:20px;border:5px solid #000000;" bgcolor="green"> <th> <ui:insert name="table_header"> Place here table header </ui:insert> </th> </tr> <tr> <td align="center" width="100%" valign="middle"> <ui:insert name="page_body"> Place here page body </ui:insert> </td> </tr> </tbody> </table> </body> </html>
As you can see, the reusable parts of the template are marked by the ui:insert tag, and these parts represents the page title, a table header, and the page body. Now, the client page invokes the template by using the ui:composition tag and fills up the reusable parts by invoking the ui:define tag. Here it is a possible use of our template:
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="/template/template.xhtml">
<ui:define name="page_title">
Facelets template example-page 1
</ui:define>
<ui:define name="table_header">
Provide your name below!
</ui:define>
<ui:define name="page_body">
<h:message showSummary="true" showDetail="false" for="name" />
<form jsfc="h:form" id="helloForm">
Your name:
<input jsfc="h:inputText" required="true" id="name"
value="#{person.name}" />
<input type="submit" jsfc="h:commandButton" id="submit"
action="greeting" value="Say Hello" />
</form>
</ui:define>
</ui:composition>
</html>
When the form defined in the previous page is submitted, a greeting page is displayed. This page is also built over the previous template, as shown next:
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="template/template.xhtml">
<ui:define name="page_title">Facelets template example - page 2
</ui:define>
<ui:define name="table_header">Greeting for you!</ui:define>
<ui:define name="page_body">
Hello #{person.name}!
</ui:define>
</ui:composition>
</html>
First, Facelets locates the template to use by analyzing the value of the template attribute of the ui:composition tag. Second, it correlates the ui:insert tags with ui:define tags, by inspecting the value of the name attribute, which is common to both the tags. When the values of two name attributes are equal, the portions of the template marked by ui:insert are filled with the code defined by ui:define.
The code bundled with this book contains a complete example of this recipe. The project can be opened with NetBeans 6.8 and it is named: Facelets_templating.
More details about the Facelets tags are at the following location: http://java.sun.com/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/.