The new components <rich:page> and <rich:layout> provide a very flexble way to create layout and template pages. The <rich:page> component is a useful tool to create nearly everything related to html/xtml page: parameters like title, meta tags  etc, basic layout: header, side bar and footer. The <rich:layout> is a great addition to <rich:page>  , you can use it to make layout inside the areas you create with r<rich:page>.

Moreover, you can use Facelets to insert the content you use on every page of your app like menu, header and footer.

So, let’s make a simple example of how you can create a template.

<f:view xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:rich="http://richfaces.org/rich"
     xmlns:ui="http://java.sun.com/jsf/facelets">
     <rich:page sidebarPosition="left" sidebarWidth="300"
          pageTitle="This is a demo template">
          <f:facet name="header">
               <ui:include src="/layout/header.xhtml" />
               <!--Header-->
          </f:facet>
          <f:facet name="sidebar">
               <ui:include src="/layout/mainMenu.xhtml" />
               <!--Side panel-->
          </f:facet>
          <rich:layout>
               <rich:layoutPanel position="top">
        Top
    </rich:layoutPanel>
               <rich:layoutPanel position="left">
       Left
    </rich:layoutPanel>
               <rich:layoutPanel position="center">
        Center
    </rich:layoutPanel>
               <rich:layoutPanel position="right">
       Right
    </rich:layoutPanel>
               <rich:layoutPanel position="bottom">
       Bottom
    </rich:layoutPanel>
          </rich:layout>
          <f:facet name="footer">
<!--Footer-->footer
         </f:facet>
     </rich:page>
</f:view>