How it works...

The explanation is as simple as possible—layout.xhtml is our template. As long as you name each section (in our case, its header, content, and footer), whatever JSF page uses it will inherit its layout.

Any page using this layout and wanting to customize some of those defined sections should just describe the desired section as we did in the user.xhtml file, as follows:

<ui:composition template="/template/layout.xhtml">
    <ui:define name="content">
        <h1><font color="red">User content. Timestamp: #
            {userBean.timestamp}
        </font></h1>
    </ui:define>
</ui:composition>