Creating complex layouts

The layout component introduces a customizable border layout model that could easily be used for creating complex layouts.

How to do it...

Layout 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">  
        <h:outputText value="Layout content for West" />  
    </p:layoutUnit>  
  
    ...