Web templates allow us to create portions of pages that can be included several times in other pages. The common uses for them are the header and the footer of a website. We looked at the pages of Rubia Forums earlier. Here's the category page:

The breadcrumbs at the top are a header that can be shown on several pages. The same thing goes for the Powered by image at the bottom. Now, see how to implement the header with the breadcrumbs starting with the category page:

<div
...
xmlns:ui="http://java.sun.com/jsf/facelets"
...
>
  <ui:composition template="/views/common/common.xhtml">
     <ui:define name="mainContent">
        <h:form>
           ...
        </h:form>
     </ui:define>
  </ui:composition>
</div>

The ui namespace declared through the xmlns attribute is used to create the templates. In this page, we started a composition based on a template declared on an external JSF page.

This template defines a piece of the page called mainContent. The category page calls the mainContent, where it is implemented as a part of markup to render. We don't know where the mainContent will be put in the page. This information is on the template page.

Now see how the common.xhtml template is declared:

...
<ui:composition>
   <h:head>
      ...
   </h:head>
   <h:body class="bodyStyle">
      <h:form>
         <div class="forumsectionhdr">
            <ul>
              <li><h:commandLink value="${resourcebundle.Home}" action="viewCategory" /></li>
              ...
              <li>  |   <h:commandLink action="adminPanel" value="${resourcebundle.Admin_panel}" />
              </li>
            </ul>
         </div>
      </h:form>
      <div class="forumscontainer">
          <ui:insert name="mainContent" />
      </div>
      <div class="PoweredBy">
${resourcebundle.Powered_by} <a href="https://github.com/flashboss/rubia-forums"><img border="0" src="${themeHelper.getURL('resourceIconForumsLogoURL')}" /></a>
      </div>
   </h:body>
</ui:composition>
...

This page, being included in all the pages, will be the only page declaring a head and a body tag in all the web applications. As you can see on this page, there are three important declarations:

• The breadcrumbs (Home | Administration in the image over) represented by the forumsectionhdr CSS class.
• The Powered by at the bottom represented by the PoweredBy CSS class.
• The mainContent section included the previous page. It is declared through the insert UI component. In this part of the code, all pages including the section, can implement our HTML markup.

Templates work hierarchically. We can make the template even more modular, ensuring that the template also includes other templates. In this case, we do not need it because we only represent a page with headers and footers; however, there are many other cases that use more pages. In this way, code reuse becomes high, and we will always get a more readable code for our applications.