JavaServer Faces technology provides the tools to implement user
interfaces that are easy to extend and reuse. Templating is a useful
Facelets feature that allows you to create a page that will act as the
base, or template, for the other pages in an application. By using
templates, you can reuse code and avoid recreating similarly constructed
pages. Templating also helps in maintaining a standard look and feel in
an application with a large number of pages.
Table 8-2 lists Facelets tags that are used for templating
and their respective functionality.
Table 8-2 Facelets Templating Tags
Tag |
Function |
ui:component
|
Defines a component that is created and added to the
component tree. |
ui:composition
|
Defines a page composition that optionally uses a
template. Content outside of this tag is ignored. |
ui:debug
|
Defines a debug component that is created and added to the
component tree. |
ui:decorate
|
Similar to the composition tag but does not disregard
content outside this tag. |
ui:define
|
Defines content that is inserted into a page by a
template. |
ui:fragment
|
Similar to the component tag but does not disregard
content outside this tag. |
ui:include
|
Encapsulates and reuses content for multiple pages. |
ui:insert
|
Inserts content into a template. |
ui:param
|
Used to pass parameters to an included file. |
ui:repeat
|
Used as an alternative for loop tags, such as c:forEach
or h:dataTable. |
ui:remove
|
Removes content from a page. |
For more information on Facelets templating tags, see the
JavaServer Faces Facelets Tag Library documentation.
The Facelets tag library includes the main templating tag ui:insert
. A
template page that is created with this tag allows you to define a
default structure for a page. A template page is used as a template for
other pages, usually referred to as client pages.
Here is an example of a template saved as 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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">Top Section</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left Section</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Main Content</ui:insert>
</div>
</div>
</h:body>
</html>
The example page defines an XHTML page that is divided into three
sections: a top section, a left section, and a main section. The
sections have style sheets associated with them. The same structure can
be reused for the other pages of the application.
The client page invokes the template by using the ui:composition
tag.
In the following example, a client page named templateclient.xhtml
invokes the template page named template.xhtml
from the preceding
example. A client page allows content to be inserted with the help of
the ui:define
tag.
<!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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:body>
<ui:composition template="./template.xhtml">
<ui:define name="top">
Welcome to Template Client Page
</ui:define>
<ui:define name="left">
<h:outputLabel value="You are in the Left Section"/>
</ui:define>
<ui:define name="content">
<h:graphicImage value="#{resource['images:wave.med.gif']}"/>
<h:outputText value="You are in the Main Content Section"/>
</ui:define>
</ui:composition>
</h:body>
</html>