PrimeFaces Extensions Showcase

Layout

Element layout is defined via "fullPage" attribute. Setting "fullPage" to false causes an element layout. An example below shows two element layouts with server-side state management. Try to resize, open or close panes and switch between layouts.

The entire layout is described by options (class LayoutOptions) which are bound to the "options" attribute of pe:layout. They are created like a Tree with parent-child relation. 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.

Left

Center

Source

XHTML page
Managed bean


<h:panelGroup id="layoutsContainer">
    <p:commandButton value="Switch between element layouts" actionListener="#{elementLayoutController.toogleLayout}"
                     process="layoutsContainer" update="layoutsContainer" icon="ui-icon-newwin"/>

    <h:panelGrid id="layoutsGrid" columns="2" style="margin-top: 15px;" cellpadding="0" cellspacing="0">
        <pe:layout fullPage="false" style="width:450px; height:220px;"
                   options="#{elementLayoutController.layoutOptionsOne}"
                   rendered="#{elementLayoutController.layoutOneShown}"
                   state="#{elementLayoutController.stateOne}">
            <pe:layoutPane position="west">
                Left
            </pe:layoutPane>
            <pe:layoutPane position="center">
                Center
            </pe:layoutPane>
        </pe:layout>

        <pe:layout fullPage="false" style="width:450px; height:220px;"
                   options="#{elementLayoutController.layoutOptionsTwo}"
                   rendered="#{!elementLayoutController.layoutOneShown}"
                   state="#{elementLayoutController.stateTwo}">
            <pe:layoutPane position="east">
                <pe:layoutPane position="center">
                    <f:facet name="header">
                        Header East-Center
                    </f:facet>
                    East-Center
                </pe:layoutPane>
                <pe:layoutPane position="south">
                    <f:facet name="header">
                        Header East-South
                    </f:facet>
                    East-South
                </pe:layoutPane>
            </pe:layoutPane>
            <pe:layoutPane position="center">
                Center
            </pe:layoutPane>
        </pe:layout>
    </h:panelGrid>
</h:panelGroup>


@Named
@ViewScoped
public class ElementLayoutController implements Serializable {

    private static final long serialVersionUID = 20120925L;

    private String stateOne;
    private String stateTwo;
    private boolean layoutOneShown = true;

    private LayoutOptions layoutOptionsOne;
    private LayoutOptions layoutOptionsTwo;

    @PostConstruct
    protected void initialize() {
        // 1. set options for first layout
        layoutOptionsOne = new LayoutOptions();

        // options for all panes (center and west)
        LayoutOptions panes = new LayoutOptions();
        panes.addOption("slidable", false);
        panes.addOption("resizeWhileDragging", true);
        layoutOptionsOne.setPanesOptions(panes);

        // options for west pane
        final LayoutOptions west = new LayoutOptions();
        west.addOption("size", 150);
        west.addOption("minSize", 40);
        west.addOption("maxSize", 300);
        layoutOptionsOne.setWestOptions(west);

        // 2. set options for second layout
        layoutOptionsTwo = new LayoutOptions();

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

        // options for east pane
        final LayoutOptions east = new LayoutOptions();
        panes.addOption("resizable", false);
        panes.addOption("closable", false);
        east.addOption("size", "50%");
        layoutOptionsTwo.setEastOptions(east);

        // options for nested east layout
        final LayoutOptions childEastOptions = new LayoutOptions();
        east.setChildOptions(childEastOptions);

        // options for east-south pane
        final LayoutOptions eastSouth = new LayoutOptions();
        eastSouth.addOption("size", "50%");
        childEastOptions.setSouthOptions(eastSouth);
    }

    public String getStateOne() {
        return stateOne;
    }

    public void setStateOne(final String stateOne) {
        this.stateOne = stateOne;
    }

    public String getStateTwo() {
        return stateTwo;
    }

    public void setStateTwo(final String stateTwo) {
        this.stateTwo = stateTwo;
    }

    public void toogleLayout(final ActionEvent event) {
        layoutOneShown = !layoutOneShown;
    }

    public boolean isLayoutOneShown() {
        return layoutOneShown;
    }

    public LayoutOptions getLayoutOptionsOne() {
        return layoutOptionsOne;
    }

    public LayoutOptions getLayoutOptionsTwo() {
        return layoutOptionsTwo;
    }
}