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>

Use Cases

Documentation

pe:layout
pe:layoutPane

Attributes (move mouse over the names to see data types)

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
fullPage	Full page layout mode.Default is true.
id	Unique identifier of the component in a namingContainer.Default is generated.
maskPanesEarly	Mask panes early during init.Default is false.
options	Layout options (object or JSON string).
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
resizerTip	Resizer tooltip.
sliderTip	Slider tooltip.
state	Serialized layout state for server-side persistence.
stateCookie	Persist state in cookie.Default is false.
style	Inline style of the component.
styleClass	Style class of the component.
togglerTipClosed	Tooltip when toggler is closed.
togglerTipOpen	Tooltip when toggler is open.
widgetVar	Name of the client side widget.

Attributes (move mouse over the names to see data types)

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
closable	Whether the pane is closable.Default is true.
combinedPosition	Combined position path (set by renderer).Default is center.
id	Unique identifier of the component in a namingContainer.Default is generated.
initClosed	Pane initially closed.Default is false.
initHidden	Pane initially hidden.Default is false.
maskContents	Mask pane contents.Default is false.
maskObjects	Mask pane objects.Default is false.
maxHeight	Maximum pane height.
maxSize	Maximum pane size.
maxWidth	Maximum pane width.
minHeight	Minimum pane height.
minSize	Minimum pane size.
minWidth	Minimum pane width.
paneSelector	Custom pane selector.
position	Pane position: north, south, west, east, or center.Default is center.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
resizable	Whether the pane is resizable.Default is true.
resizeWhileDragging	Resize while dragging.Default is false.
resizerTip	Resizer tooltip.
size	Pane size.
slidable	Whether the pane is slideable.Default is true.
sliderTip	Slider tooltip.
spacingClosed	Spacing when pane is closed.Default is 6.
spacingOpen	Spacing when pane is open.Default is 6.
styleClassContent	Style class for the pane content.
styleClassHeader	Style class for the pane header.
styleContent	Inline style for the pane content.
styleHeader	Inline style for the pane header.
togglerTipClosed	Tooltip when toggler is closed.
togglerTipOpen	Tooltip when toggler is open.