PrimeFaces Extensions Showcase

Layout

To place any custom content between layout panes there are three alternative ways:

Place a nested layout pane (pe:layoutPane) within a div element with the class "ui-layout-content". This approach is applied in this example.
Add the option "containerSelector" to child options (see LayoutOptions class). The value of "containerSelector" points to a wrapper-div element which acts as a container for nested layout panes.
Use the header facet (f:facet name="header") for any custom content. This is very handy. For instance, if you place messages there, they will be always visible because only pane's inner "content container" gets scrollbars. The header facet always stays fixed. This approach is demonstrated in this example.

Note: Use the widget's method sizeContent(pane) to manually trigger a resize from your own code when the custom content between layout panes gets updated and changes its size. sizeContent(pane) resizes the "content container" inside the specified pane (e.g. sizeContent('center_west')). Content is resized automatically when the pane is resized or opened, so this method only needs to be called manually if something "changes the height" of a header or footer element in the pane.

Please refer examples on the plugin homepage to see how it works in detail.

Show full page layout with custom content

Source

XHTML page
Managed bean


<h:form id="mainForm" prependId="false">    
    <pe:layout id="fullPage" options="#{customContentLayoutController.layoutOptions}"
               widgetVar="fpLayoutWidget">
        <pe:layoutPane position="north">
            North
        </pe:layoutPane>
        <pe:layoutPane position="center">
            
            <div style="padding:10px; margin-bottom:6px; border:1px solid red;"
                 class="ui-widget-content ui-corner-all">
                 This is a custom content between layout panes.
                 <br/><br/>
                 Any elements can be placed here.
            </div>
            
            <div class="ui-layout-content">
                <!-- ui:include -->
                <ui:include src="#{customContentLayoutController.src}"/>
            </div>
        </pe:layoutPane>
        <pe:layoutPane position="west" styleHeader="background:none; border:none; padding:0;">
            <f:facet name="header">
                <p:outputPanel id="msgPanel">
                    <p:autoUpdate />
                    <p:messages id="messages" showSummary="true" showDetail="false"/>
                    
                    <script type="text/javascript">
                    /* <![CDATA[ */
                        if (#{facesContext.partialViewContext.ajaxRequest}) {
                            $(function() {
                                PF('fpLayoutWidget').sizeContent('west');
                            });
                        }
                    /* ]]> */
                    </script>    
                </p:outputPanel>
            </f:facet>
            
            Click on the buttons to see that scrollbars in the west pane are well adjusted and messages preserve their place when scrolling.
            
            <h:panelGrid columns="2" style="margin:15px">
                <p:commandButton value="Show messages" process="@this" style="margin-right:5px;"
                                 action="#{customContentLayoutController.showMessages}"/>
                <p:commandButton value="Hide messages" process="@this"
                                 action="#{customContentLayoutController.hideMessages}"/>
            </h:panelGrid>
            
            <p:dataTable id="dataTable" var="message" value="#{dataTableController.messages}" paginator="true"
                         rows="30" rowsPerPageTemplate="20,30,40">
                <p:column sortBy="#{message.subject}" headerText="Subject">
                    <h:outputText value="#{message.subject}"/>
                </p:column>
                <p:column sortBy="#{message.text}" headerText="Text">
                    <h:outputText value="#{message.text}"/>
                </p:column>
                <p:column sortBy="#{message.subject}" headerText="Subject">
                    <h:outputText value="#{message.subject}"/>
                </p:column>
                <p:column sortBy="#{message.text}" headerText="Text">
                    <h:outputText value="#{message.text}"/>
                </p:column>
                <p:column sortBy="#{message.subject}" headerText="Subject">
                    <h:outputText value="#{message.subject}"/>
                </p:column>
                <p:column sortBy="#{message.text}" headerText="Text">
                    <h:outputText value="#{message.text}"/>
                </p:column>
            </p:dataTable>            
        </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;
    }
    
    body > form > .ui-layout-north {
        background: none;
        border: none;
        color: #000000;
        padding: 4px;
        overflow: hidden;
    }
    
    body > form > .ui-layout-south {
        background: none;
        border: none;
        color: #000000;
        overflow: hidden;
        vertical-align: middle;
    }
    
    .ui-datatable thead th,
    .ui-datatable tbody td,
    .ui-datatable tfoot td {
        white-space: nowrap;
    }
    
    .ui-messages-info,
    .ui-messages-warn,
    .ui-messages-error,
    .ui-messages-fatal {
        margin: 0;
    }
    
    #messages > div {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        -moz-border-radius-bottomleft: 0;
        -moz-border-radius-bottomright: 0;
    }
</h:outputStylesheet>
                
// Included page with nested child layout
                
<pe:layoutPane position="north">
    Center-North
</pe:layoutPane>
<pe:layoutPane position="center">
    Center-Center
</pe:layoutPane>


@Named
@ViewScoped
public class CustomContentLayoutController implements Serializable {

    private static final long serialVersionUID = 20120925L;

    private final String src = "/sections/layout/example-customContentOne.xhtml";
    private LayoutOptions layoutOptions;

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

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

        // north pane
        final LayoutOptions north = new LayoutOptions();
        north.addOption("resizable", false);
        north.addOption("closable", false);
        north.addOption("size", 60);
        north.addOption("spacing_open", 0);
        layoutOptions.setNorthOptions(north);

        // south pane
        final LayoutOptions south = new LayoutOptions();
        south.addOption("resizable", false);
        south.addOption("closable", false);
        south.addOption("size", 28);
        south.addOption("spacing_open", 0);
        layoutOptions.setSouthOptions(south);

        // west pane
        final LayoutOptions west = new LayoutOptions();
        west.addOption("size", 340);
        west.addOption("minSize", 150);
        west.addOption("maxSize", 500);
        layoutOptions.setWestOptions(west);

        final LayoutOptions center = new LayoutOptions();
        center.addOption("resizable", false);
        center.addOption("closable", false);
        center.addOption("minWidth", 200);
        center.addOption("minHeight", 60);
        layoutOptions.setCenterOptions(center);

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

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

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

    public LayoutOptions getLayoutOptions() {
        return layoutOptions;
    }

    public String getSrc() {
        return src;
    }

    public void showMessages() {
        final FacesContext fc = FacesContext.getCurrentInstance();
        final FacesMessage msg1 = new FacesMessage(FacesMessage.SEVERITY_ERROR, "This is the first error message",
                    null);
        final FacesMessage msg2 = new FacesMessage(FacesMessage.SEVERITY_ERROR, "This is the second error message",
                    null);

        fc.addMessage(null, msg1);
        fc.addMessage(null, msg2);
    }

    public void hideMessages() {
        // nothing to do
    }
}