A Facelets template is a reusable component, which includes one or more JSF pages as different, sections of the template that may be used in multiple Facelets composition pages thus precluding the inclusion of each of the JSF pages that comprise the common sections of Facelets composition pages separately. We will use a Facelets template to include a header JSF page and a footer JSF page. The Facelets templates are to be created in the WEB-INF/templates
directory for which you need to add a templates
directory. Right-click on the WEB-INF
folder in Project Explorer and select New | Folder, as shown in the following screenshot:
In the New Folder wizard, select the webapp
| WEB-INF
folder and specify Folder name as templates
, as shown in the following screenshot:
To create a Facelets template, select File | New | Other. In New, select JBoss Tools Web | XHTML Page and click on Next, as shown in the following screenshot:
In New XHTML Page wizard, select the folder as webapp/WEB-INF/templates
and specify File name as BasicTemplate.xhtml
. Click on Next, as shown in the following screenshot:
In Select XHTML Template, select the Common Facelet Page template and click on Finish, as shown in the following screenshot:
The
BasicTemplate.xhtml
Facelet template gets created in the WEB-INF/templates
folder. In the template, create <div/>
elements for header, content, and footer sections of a Facelet composition page. The <ui:insert/>
Facelets tag is used as a placeholder for a composition page section. As common header and footer sections are required in the input and output composition pages, you need to include a header JSF page in the header div
and a footer JSF page in the footer <div>
using the <ui:include/>
tag. Keep the <ui:insert/>
element for the content div
empty for the composition page to include the page section. For example, include a header.xhtml
JSF page as follows:
<ui:insert name="header"> <ui:include src="/WEB-INF/templates/header.xhtml" /> </ui:insert>
We will create the header.xhtml
and footer.xhtml
JSF pages in the next section. The BasicTemplate.xhtml
template is listed as follows:
<!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="title">JSF 2.0 Facelets</ui:insert></title> </head> <body> <div id="header"> <ui:insert name="header"> <ui:include src="/WEB-INF/templates/header.xhtml" /> </ui:insert> </div> <div id="content"> <ui:insert name="content"> </ui:insert> </div> <div id="footer"> <ui:insert name="footer"> <ui:include src="/WEB-INF/templates/footer.xhtml" /> </ui:insert> </div> </body> </html>
Copy the listing to the BasicTemplate.xhtml
file in Eclipse IDE. The BasicTemplate.xhtml
file is shown in the following screenshot: