The Java EE 6 Tutorial, Volume I


JavaServer Faces 2.0 provides the tools to implement user interfaces that are easy to extend and reuse. Templating is a useful feature available with Facelets that allows you to create a page that will act as the base or template for the other pages in a 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.

The following table lists Facelets tags that are used for templating and their respective functionality:

Table 5–2 Facelets Templating Tags




Defines a component that is created and added to the component tree. 


Defines a page composition that optionally uses a template. Content outside of this tag is ignored. 


Defines a debug component that is created and added to the component tree. 


Defines content that is inserted into a page by a template 


Similar to composition tag but does not disregard content outside this tag. 


Similar to component tag but does not disregard content outside this tag. 


Encapsulate and reuse content for multiple pages. 


Inserts content into a template. 


Used to pass parameters to an included file. 


Used as an alternative for loop tags such as c:forEach or h:dataTable.


Removes content from a page. 

For more information on Facelets templating tags, see the PDL at

The Facelets tag library includes the main templating tag <ui:insert>. Atemplate page is created with this tag, it allows defining a default structure for a page. A template page can be reused as a template for other pages, usually referred to as a client pages.

Here is an example of a template saved as template.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns=""
        <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>
        <div id="top" class="top">
            <ui:insert name="top">Top Section</ui:insert>
        <div id="left">
             <ui:insert name="left">Left Section</ui:insert>
        <div id="content" class="left_content">
             <ui:insert name="content">Main Content</ui:insert>

The example page defines a HTML page that is divided into 3 sections, a top section, a left section and a main section. The sections have stylesheets associated with them. The same structure can be reused for the other pages of the application.

The client page invokes the template by using <ui:composition> tag. In the following example, a client page named templateclient.xhtml, invokes the template page from the preceding example named template.xhtml. 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" 
<html xmlns=""
        <ui:composition template="./template.xhtml">
            <ui:define name="top">
                Welcome to Template Client Page

            <ui:define name="left">
                <h:outputLabel value="You are in the Left Section"/>

            <ui:define name="content">
                <h:graphicImage value="#{resource['']}"/>
                <h:outputText value="You are in the Main Content Section"/>


You can use the NetBeans IDE to create Facelets template and client pages. For more information on creating these pages, see