PrimeFaces Extensions Showcase

Layout

This example demonstrates a full page layout with nested panes, layout's AJAX events and client-side state management. Three events are possible: open, close, resize. The client-side state management is activated by setting stateCookie="true".

Furthermore, you can see client-side widget's methods for pane manipulation in action. These are sizePane(), sizeContent() toggle(), close() and open(). They expect pane position as parameter. Nested panes are separated by the _ sign. Example: sizePane("center_north", 300); Attention: "center" pane can not be manipulated, so that e.g. toggle("center") or sizePane("west_center", 300) are invalid calls.

In this example, the entire layout is defined by LayoutOptions which are bound to the "options" attribute of pe:layout. LayoutOptions is optional, it also possible to create a layout by options defined as attributes of pe:layoutPane. Note: LayoutOptions created as Java model takes precedence over layout options as tag attributes. It is up to you if you would like to use all available options via LayoutOptions or a limited set of options in pe:layoutPane.

Show full page layout

Source

XHTML page
Managed bean


<p:growl id="growl" showDetail="true" showSummary="true"/>

<h:form id="mainForm">
    <pe:layout id="fullPage" options="#{fullLayoutController.layoutOptions}"
               stateCookie="true" widgetVar="fpLayoutWidget">
        <p:ajax event="open" listener="#{fullLayoutController.handleOpen}" update="msg"/>
        <p:ajax event="close" listener="#{fullLayoutController.handleClose}" update="msg"/>
        <p:ajax event="resize" listener="#{fullLayoutController.handleResize}" update=":growl"/>

        <pe:layoutPane position="north">
            North            
            <h:panelGrid columns="6" style="margin-left:80px;">
                <p:commandButton value="Toggle South" type="button"
                                 onclick="PF('fpLayoutWidget').toggle('south')"/>
                <p:commandButton value="Toggle West-North" type="button"
                                 onclick="PF('fpLayoutWidget').toggle('west_north')"/>
                <p:commandButton value="Close Center-North" type="button"
                                 onclick="PF('fpLayoutWidget').close('center_north')"/>
                <p:commandButton value="Open Center-North" type="button"
                                 onclick="PF('fpLayoutWidget').open('center_north')"/>
                <p:commandButton value="Size East Pane" type="button"
                                 onclick="PF('fpLayoutWidget').sizePane('east', 350)"/>
                <p:commandButton value="Size West-South Pane" type="button"
                                 onclick="PF('fpLayoutWidget').sizePane('west_south', 80)"/>
            </h:panelGrid>
        </pe:layoutPane>
        <pe:layoutPane position="center">
            <pe:layoutPane position="north">
                <f:facet name="header">
                    <h:outputText value="Center-North"/>
                </f:facet>
                Refresh this page to see that the state of all panes is preserved
            </pe:layoutPane>
            <pe:layoutPane position="center">
                <f:facet name="header">
                    <h:outputText value="Center-Center"/>
                </f:facet>
                <p:messages id="msg" showDetail="true" showSummary="true">
                    <p:effect type="pulsate" event="load" delay="0">
                        <f:param name="mode" value="'show'"/>
                        <f:param name="times" value="'1'"/>
                    </p:effect>
                </p:messages>
            </pe:layoutPane>
        </pe:layoutPane>
        <pe:layoutPane position="west">
            <pe:layoutPane position="north">
                West-North
            </pe:layoutPane>
            <pe:layoutPane position="center">
                West-Center
            </pe:layoutPane>
            <pe:layoutPane position="south">
                West-South
            </pe:layoutPane>
        </pe:layoutPane>
        <pe:layoutPane position="east">
            East
        </pe:layoutPane>
        <pe:layoutPane position="south">
            South
        </pe:layoutPane>
    </pe:layout>
</h:form>

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


@Named
@ViewScoped
public class FullLayoutController implements Serializable {

    private static final long serialVersionUID = 20120925L;

    private LayoutOptions layoutOptions;

    @PostConstruct
    protected void initialize() {
        layoutOptions = new LayoutOptions();

        // options for all panes
        final LayoutOptions panes = new LayoutOptions();
        panes.addOption("slidable", false);
        panes.addOption("resizeWhileDragging", false);
        layoutOptions.setPanesOptions(panes);

        // options for center pane
        final LayoutOptions center = new LayoutOptions();
        layoutOptions.setCenterOptions(center);

        // options for nested center layout
        final LayoutOptions childCenterOptions = new LayoutOptions();
        center.setChildOptions(childCenterOptions);

        // options for center-north pane
        final LayoutOptions centerNorth = new LayoutOptions();
        centerNorth.addOption("size", "50%");
        childCenterOptions.setNorthOptions(centerNorth);

        // options for center-center pane
        final LayoutOptions centerCenter = new LayoutOptions();
        centerCenter.addOption("minHeight", 60);
        childCenterOptions.setCenterOptions(centerCenter);

        // options for west pane
        final LayoutOptions west = new LayoutOptions();
        west.addOption("size", 200);
        layoutOptions.setWestOptions(west);

        // options for nested west layout
        final LayoutOptions childWestOptions = new LayoutOptions();
        west.setChildOptions(childWestOptions);

        // options for west-north pane
        final LayoutOptions westNorth = new LayoutOptions();
        westNorth.addOption("size", "33%");
        childWestOptions.setNorthOptions(westNorth);

        // options for west-center pane
        final LayoutOptions westCenter = new LayoutOptions();
        westCenter.addOption("minHeight", "60");
        childWestOptions.setCenterOptions(westCenter);

        // options for west-south pane
        final LayoutOptions westSouth = new LayoutOptions();
        westSouth.addOption("size", "33%");
        childWestOptions.setSouthOptions(westSouth);

        // options for east pane
        final LayoutOptions east = new LayoutOptions();
        east.addOption("size", 200);
        layoutOptions.setEastOptions(east);

        // options for south pane
        final LayoutOptions south = new LayoutOptions();
        south.addOption("size", 80);
        layoutOptions.setSouthOptions(south);
    }

    public LayoutOptions getLayoutOptions() {
        return layoutOptions;
    }

    public void handleClose(final CloseEvent event) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Layout Pane closed",
                    "Position:" + ((LayoutPane) event.getComponent()).getPosition());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void handleOpen(final OpenEvent event) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Layout Pane opened",
                    "Position:" + ((LayoutPane) event.getComponent()).getPosition());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void handleResize(final ResizeEvent event) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Layout Pane resized",
                    "Position:" + ((LayoutPane) event.getComponent()).getPosition() + ", new width = " + event.getWidth()
                                + "px, new height = " + event.getHeight() + "px");

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

Use Cases

Documentation

pe:layout
pe:layoutPane

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

Name	Description
id	Unique identifier of the component in a namingContainer.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
fullPage	Specifies whether layout should span all page or not. Default value is true.
options	Layout options as an instance of the class LayoutOptions or an JSON String representing serialized LayoutOptions. LayoutOptions created as Java model takes precedence over layout options as tag attributes. Serializing of layout options to an JSON string can increase the time of layout building when the layout is built during application startup in an application scoped bean (LayoutOptions gets always serialized to JSON to be able to be used in the underlying widget). Use the method toJson() in the LayoutOptions if you want to serialize all options to an JSON string.
style	Style of the main Layout container element. Default value is null.
styleClass	Style class of the main Layout container element. Default value is null.
state	Indicates server-side state management. A hash (JSON string) containing all dimensions and close, open state of existing layout panes. It can be bound to a bean.
stateCookie	Indicates client-side state management. When set to true the current layout state will be stored in HTML5 LocalStorage on window unload and restored during layout build-up when user enters the same page. Default is false.
resizerTip	Tip when resizer-bar can be dragged to resize a pane. Default is 'Resize'.
sliderTip	Tip when the resizer-bar will trigger 'sliding open'. Default is 'Slide Open'.
togglerTipOpen	Tip on toggler when pane is 'open'. Default is 'Close'.
togglerTipClosed	Tip on toggler when pane is 'closed'. Default is 'Open'.
maskPanesEarly	Useful flag if you are dealing with iframes or objects like applets inside layout panes. This option triggers masking each time the mouse moves over a resizer - instead of waiting until your 'grab it' with your mouse. This is done just in case you are about to grab & drag the resizer. Enabling this avoids the slight delay that sometimes occurs when you quickly grab a resizer and try to drag over an iframe or object. Default is false.

Events (move mouse over the names to see classes)

Name	Description
open	fires after a layout pane gets opened
close	fires after a layout pane gets closed
resize	fires after a layout pane gets resized

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

Name	Description
id	Unique identifier of the component in a namingContainer.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
position	Position of a pane. Possible values are 'north', 'south', 'west', 'east', 'center'. Default value is 'center'.
styleHeader	Style of the pane's header. Default value is null.
styleClassHeader	Style class of the pane's header. Default value is null.
styleContent	Style of the pane's content. Default value is null.
styleClassContent	Style class of the pane's content. Default value is null.
resizable	Makes a pane resizable. Default is true.
closable	Makes a pane closable. Default is true.
slidable	When closed, can a pane 'slide open' over adjacent panes. Default is true.
size	Specifies the initial size of a pane in px or %. Default value is null.
minSize	Specifies the minimum-size limit in px or % when resizing a pane. Default value is null.
maxSize	Specifies the maximum-size limit in px or % when resizing a pane. Default value is null.
minWidth	Specifies the minimum-width limit in px or % when resizing a pane. Default value is null - as small as pane can go.
maxWidth	Specifies the maximum-width limit in px or % when resizing a pane. Default value is null - as large as pane can go.
minHeight	Specifies the minimum-height limit in px or % when resizing a pane. Default value is null - as small as pane can go.
maxHeight	Specifies the maximum-height limit in px or % when resizing a pane. Default value is null - as large as pane can go.
spacingOpen	Spacing in px between pane and adjacent pane - when pane is 'open'. Default value is 6.
spacingClosed	Spacing in px between pane and adjacent pane - when pane is 'closed'. Default value is 6.
resizerTip	Tip when resizer-bar can be dragged to resize a pane. Default is 'Resize'.
sliderTip	Tip when the resizer-bar will trigger 'sliding open'. Default is 'Slide Open'.
togglerTipOpen	Tip on toggler when pane is 'open'. Default is 'Close'.
togglerTipClosed	Tip on toggler when pane is 'closed'. Default is 'Open'.
initClosed	If true, then pane is 'closed' when layout is created. Default is false.
initHidden	If true, then pane is hidden when layout is created - no resizer or spacing is visible, as if the pane does not exist. Default is false.
resizeWhileDragging	If true, then pane gets resized live while it is dragging. If false, only helper element shows resizing. Default is false.
maskContents	Useful flag if you are dealing with iframes inside layout panes. If true, this option adds a DIV-mask over-or-inside this pane, so user can drag (resize) the pane over iframe. Default is false.
maskObjects	Useful flag if you are dealing with objects like applets inside layout panes. If true, this option add IFRAME-mask over-or-inside this pane to cover objects / applets - content-mask will overlay this mask. Default is false.