Creating a Facelets template

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:

Creating a Facelets template

In the New Folder wizard, select the webapp | WEB-INF folder and specify Folder name as templates, as shown in the following screenshot:

Creating a Facelets template

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:

Creating a Facelets template

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:

Creating a Facelets template

In Select XHTML Template, select the Common Facelet Page template and click on Finish, as shown in the following screenshot:

Creating a Facelets template

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:

Creating a Facelets template
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset