PrimeFaces Extensions Showcase

Layout

Example of layout with iframe. You can use an iframe as layout pane without to worry about resizing issues, etc. To use an iframe as layout pane, simple put the iframe as direct child of the layout pane.

Note: If you use an iframe, it is recommended to set maskContents="true" to overcome resizing issues with iframes. If you use objects like applets, Google maps, etc. inside layout panes, it is recommended to set maskObjects="true". Also consider the option maskPanesEarly="true" on pe:layout if you are dealing with iframes or objects like applets, Google maps, etc. inside layout panes (see documentation). Please also see the styles for the class .ui-layout-mask in this example. This is the style class the iframe is masked with.

Show full page layout with iframe

Source

XHTML page


<h:form>
        <pe:layout maskPanesEarly="true">
            <pe:layoutPane position="north" size="85">
                North
            </pe:layoutPane>
            <pe:layoutPane position="center" maskContents="true">
                <iframe id="iframeCenter"
                        src="http://primefaces-extensions.github.io"
                        title="PFE Layout"
                        width="100%"
                        height="100%">
                </iframe>
            </pe:layoutPane>
            <pe:layoutPane position="west" size="250" resizeWhileDragging="false"
                           maxSize="500" minSize="100" resizable="true" closable="true">
                West
            </pe:layoutPane>
        </pe:layout>
    </h:form>

    <h:outputStylesheet library="css" name="global.css"/>

    <h:outputStylesheet id="layoutCSS">
        body {
            margin: 4px !important;
        }

        /* masks are usually transparent, but we make them visible here */
        .ui-layout-mask {
            background: #C00 !important;
            opacity: .20 !important;
            filter: alpha(opacity=20) !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.