title: Change content part using dynamic menu in JSF Primefaces
body: <p>I am using a JSF template that is split into 4 parts - Header, Menubar, Content and Footer. Header contains application name, version, user name, last login, etc. details retrieved from the DB. Menu section contains a dynamic menu populated from the DB w.r.t. the user role and access. Based on the menu item, I need only the content part to be refreshed without reloading/refreshing the header, menu bar and footer. So if the menu contains a URL to SomePage.xhtml, when the menu item is clicked, SomePage.xhtml should get loaded in the content. I have checked a lot of links and solutions on the net but was not able to get this to work. Can someone please me here?</p>
  
  <p>All the backing bean references in below code are to retrieve data from the DB.</p>
  
  
  
  <p><strong>BaseTemplate.xhtml</strong>
      
      
      </p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;h:head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /&gt;
      &lt;h:outputStylesheet name="css/override.css" /&gt;
      &lt;h:outputStylesheet name="css/style.css" /&gt;
  &lt;/h:head&gt;
  &lt;h:body&gt;
      &lt;f:loadBundle basename="messages" var="msg" /&gt;
      &lt;f:event type="preRenderView" listener="#{homePageBean.init}" /&gt;
      &lt;h:panelGroup id="header" layout="block"&gt;
          &lt;ui:insert name="header"&gt;
              &lt;ui:include src="/pages/header.xhtml" /&gt;
          &lt;/ui:insert&gt;
      &lt;/h:panelGroup&gt;
      &lt;h:panelGroup id="menu" layout="block"&gt;
          &lt;ui:insert name="menu"&gt;
              &lt;ui:include src="/pages/menu.xhtml" /&gt;
          &lt;/ui:insert&gt;
      &lt;/h:panelGroup&gt;
      &lt;h:panelGroup id="content"&gt;
          &lt;ui:insert name="content" /&gt;
      &lt;/h:panelGroup&gt;
      &lt;h:panelGroup id="footer" layout="block"&gt;
          &lt;ui:insert name="footer"&gt;
              &lt;ui:include src="/pages/footer.xhtml" /&gt;
          &lt;/ui:insert&gt;
      &lt;/h:panelGroup&gt;
  &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>header.xhtml</strong></p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"&gt;
  &lt;body&gt;
      &lt;ui:composition&gt;
          &lt;h:form id="frmHeader"&gt;
              &lt;table class="hdrMainTbl"&gt;
                  &lt;tr&gt;
                      &lt;td width="10%"&gt;
                          &lt;h:graphicImage value="images/logo.png" width="180 px"
                              height="40 px" /&gt;
                      &lt;/td&gt;
                      &lt;td width="65%"&gt;
                          &lt;table class="hdrAppNmTbl"&gt;
                              &lt;tr&gt;
                                  &lt;td align="center"&gt;
                                      &lt;h:outputText styleClass="appNameText"
                                          value="#{homePageBean.appName}" /&gt; &lt;br/&gt;
                                      &lt;h:outputText styleClass="appVersionText"
                                          value="#{msg['appVersion']} #{homePageBean.appVersion}" /&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                      &lt;td width="20%"&gt;
                          &lt;table class="hdrUserDtlsTbl"&gt;
                              &lt;tr&gt;
                                  &lt;td align="right"&gt;&lt;h:outputText styleClass="baseFontStyle"
                                          value="#{msg['welcome']}" /&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;h:outputText styleClass="baseFontStyle"
                                          value="#{homePageBean.userName}" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td align="right"&gt;&lt;h:outputText styleClass="baseFontStyle"
                                          value="#{msg['lastLogin']}" /&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;h:outputText styleClass="baseFontStyle"
                                          value="#{homePageBean.lastLogin}" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                      &lt;td width="5%"&gt;
                          &lt;h:commandLink action="#{homePageBean.logoutUser}"&gt;
                              &lt;h:graphicImage id="logoutImg" value="images/logout.png" width="40 px"
                                  height="40 px" title="Logout" alt="Logout" /&gt;
                          &lt;/h:commandLink&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/h:form&gt;
      &lt;/ui:composition&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>menu.xhtml</strong></p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"&gt;
  &lt;body&gt;
      &lt;ui:composition&gt;
          &lt;h:form&gt;
              &lt;p:menubar model="#{homePageBean.menubar}" /&gt;
          &lt;/h:form&gt;
      &lt;/ui:composition&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>footer.xhtml</strong></p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"&gt;
  &lt;body&gt;
      &lt;ui:composition&gt;
          &lt;table class="footerTbl"&gt;
              &lt;tr&gt;
                  &lt;td align="center"&gt;
                      &lt;h:outputText value="#{msg['copyright']}" /&gt; 
                      &lt;h:outputLink target="_blank" value="http://www.google.com/"&gt;
                          &lt;h:outputText value="#{msg['website']}" /&gt;
                      &lt;/h:outputLink&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/ui:composition&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>SomePage.xhtml</strong></p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"&gt;
  &lt;body&gt;
      &lt;ui:composition template="BaseTemplate.xhtml"&gt;
          &lt;ui:define name="content"&gt;
              &lt;h:form&gt;
                  This is in Content section populated when one of the menu item is clicked.
              &lt;/h:form&gt;
          &lt;/ui:define&gt;
      &lt;/ui:composition&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>