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);
    }
}