PrimeFaces Extensions Showcase

Layout

It is possible to create a layout by options defined as attributes in pe:layoutPane. This example demonstrates how to do it. Default tooltips, when a pane gets resized, is open or closed, can be redefined by pe:layout via proper attributes. Custom tooltips are demonstrated as well.

Note: Layout pane has a limited set of options in comparison to "generic" approach when creating by model (LayoutOptions class).

Show layout created by pane options

Source

XHTML page


<h:form>
    <pe:layout resizerTip="Resize Default" togglerTipClosed="Close Default" togglerTipOpen="Open Default" sliderTip="Slide Default">
        <pe:layoutPane position="north" size="80" closable="false">
            North
        </pe:layoutPane>
        <pe:layoutPane position="center">
            <pe:layoutPane position="north" size="50%" resizerTip="Resize North" togglerTipClosed="Close North" togglerTipOpen="Open North" sliderTip="Slide North">
                <f:facet name="header">
                    <h:outputText value="Center-North"/>
                </f:facet>
            </pe:layoutPane>
            <pe:layoutPane position="center" minHeight="60" resizerTip="Resize North" togglerTipClosed="Close North" togglerTipOpen="Open North" sliderTip="Slide North">
                <f:facet name="header">
                    <h:outputText value="Center-Center"/>
                </f:facet>
            </pe:layoutPane>
        </pe:layoutPane>
        <pe:layoutPane position="west" size="200">
            <pe:layoutPane position="north" size="33%" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
                West-North
            </pe:layoutPane>
            <pe:layoutPane position="center" minHeight="60" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
                West-Center
            </pe:layoutPane>
            <pe:layoutPane position="south" size="33%" initClosed="true" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
                West-South
            </pe:layoutPane>
        </pe:layoutPane>
        <pe:layoutPane position="east" size="200" resizeWhileDragging="true">
            East
        </pe:layoutPane>
        <pe:layoutPane position="south" size="80">
            South
        </pe:layoutPane>
    </pe:layout>
</h:form>

<h:outputStylesheet library="css" name="global.css"/>
   
<h:outputStylesheet id="layoutCSS">
    body {
        margin: 4px !important;
    }
</h:outputStylesheet>