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
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.