Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
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.
Source

<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>
            
Components and more
Documentation
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
openfires after a layout pane gets opened
closefires after a layout pane gets closed
resizefires after a layout pane gets resized
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01