<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pe="http://primefaces.org/ui/extensions">
    <!-- EXAMPLE-SOURCE-START -->
<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>
    <!-- EXAMPLE-SOURCE-END -->
</ui:composition>