The layout component introduces a customizable border layout model that could easily be used to create complex layouts. In this recipe, we will create layouts with five distinct regions and a full-page layout that spans the whole page.
This customizable border layout model can be applied either to a full page or to a specific element. A basic definition of a full-page layout would be as follows:
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header=
"Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for North" />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom"
resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for South" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header=
"Left" resizable="true" closable="true" collapsible="true">
...