Templating with Facelets

• Create folder template
• Rightclick on folder and choose New -> HTML file. Choose a filename e.g. appTemplate.xhtml and click Next. Select New Facelet Template as template and click finish. Customize file.
• Use New Facelet Footer (or Header) and create files to be inserted by the template.
• Finally create other web-pages using the New Facelet Composition Page in their resp. folders.

Templates and tags are explained below.

• Create a file template file in (a subfolder template of) WEB-INF. For an example see templateApp.xhtml. To define logical areas and to add content from files use the ui:include and ui:insert tags:

  <div id="left">
    <ui:insert name="navigation" >
      <ui:include  src="/WEB-INF/template/navigation.xhtml">
        <ui:param name="viewBean" value="#{applicationBean}" />
      </ui:include>   
    </ui:insert>
  </div>
  

The ui:include tag is combined with the ui:param tag to enable paramterized inclusion of pages. The css-style class left is used for the layout of the div-tag.

• To create the files included in the template use the ui:component tag.

  <ui:component
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">  
    <h:panelGroup id="infoPanel" layout="block" style="clear: both; padding: 20px;">
      <p:menubar>
        <p:submenu label="New" url="#{viewBean.newURL}"/>
        <p:submenu label="Edit" url="#{viewBean.editURL}"/>
        <p:submenu label="Delete" url="#{viewBean.deleteURL}"/>
        <p:submenu label="Properties" url="#{viewBean.propertiesURL}"/>
      </p:menubar>
    </h:panelGroup>
  </ui:component>
  

• Create a (many) page(s) that call the template. For an example see webpageApp.xhtml The page defines one or more logical areas, here the title and content. Note everything outside the composition tag is ignored.

  <ui:composition template="/WEB-INF/path/to/templateApp.xhtml">
    <ui:define name="title">Templates with Facelets</ui:define>
  
    <ui:define name="content"> 
       <!-- use the form tag and define your  page--> 
       <h:form id="contentForm"> 
          <!-- content goes here -->
       </h:form> 
    </ui:define>
  </ui:composition>