使用JSF Primefaces中的動態菜單更改內容部分

我正在使用分成4個部分 - 標題，菜單欄，內容和頁腳的JSF模板。標題包含從數據庫中檢索的應用程序名稱，版本，用戶名，上次登錄等詳細信息。菜單部分包含從數據庫w.r.t中填充的動態菜單。用戶角色和訪問權限。根據菜單項，我只需要刷新內容部分而無需重新加載/刷新標題，菜單欄和頁腳。因此，如果菜單包含SomePage.xhtml的URL，當點擊菜單項時，SomePage.xhtml應該加載到內容中。我已經檢查了很多網絡上的鏈接和解決方案，但無法讓這個工作。有人能讓我在這裏嗎？使用JSF Primefaces中的動態菜單更改內容部分

以下代碼中的所有支持bean引用都將從數據庫中檢索數據。

BaseTemplate.xhtml

<h:head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    <h:outputStylesheet name="css/override.css" /> 
    <h:outputStylesheet name="css/style.css" /> 
</h:head> 
<h:body> 
    <f:loadBundle basename="messages" var="msg" /> 
    <f:event type="preRenderView" listener="#{homePageBean.init}" /> 
    <h:panelGroup id="header" layout="block"> 
     <ui:insert name="header"> 
      <ui:include src="/pages/header.xhtml" /> 
     </ui:insert> 
    </h:panelGroup> 
    <h:panelGroup id="menu" layout="block"> 
     <ui:insert name="menu"> 
      <ui:include src="/pages/menu.xhtml" /> 
     </ui:insert> 
    </h:panelGroup> 
    <h:panelGroup id="content"> 
     <ui:insert name="content" /> 
    </h:panelGroup> 
    <h:panelGroup id="footer" layout="block"> 
     <ui:insert name="footer"> 
      <ui:include src="/pages/footer.xhtml" /> 
     </ui:insert> 
    </h:panelGroup> 
</h:body> 
</html>

header.xhtml

<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"> 
<body> 
    <ui:composition> 
     <h:form id="frmHeader"> 
      <table class="hdrMainTbl"> 
       <tr> 
        <td width="10%"> 
         <h:graphicImage value="images/logo.png" width="180 px" 
          height="40 px" /> 
        </td> 
        <td width="65%"> 
         <table class="hdrAppNmTbl"> 
          <tr> 
           <td align="center"> 
            <h:outputText styleClass="appNameText" 
             value="#{homePageBean.appName}" /> <br/> 
            <h:outputText styleClass="appVersionText" 
             value="#{msg['appVersion']} #{homePageBean.appVersion}" /> 
           </td> 
          </tr> 
         </table> 
        </td> 
        <td width="20%"> 
         <table class="hdrUserDtlsTbl"> 
          <tr> 
           <td align="right"><h:outputText styleClass="baseFontStyle" 
             value="#{msg['welcome']}" /></td> 
           <td><h:outputText styleClass="baseFontStyle" 
             value="#{homePageBean.userName}" /></td> 
          </tr> 
          <tr> 
           <td align="right"><h:outputText styleClass="baseFontStyle" 
             value="#{msg['lastLogin']}" /></td> 
           <td><h:outputText styleClass="baseFontStyle" 
             value="#{homePageBean.lastLogin}" /></td> 
          </tr> 
         </table> 
        </td> 
        <td width="5%"> 
         <h:commandLink action="#{homePageBean.logoutUser}"> 
          <h:graphicImage id="logoutImg" value="images/logout.png" width="40 px" 
           height="40 px" title="Logout" alt="Logout" /> 
         </h:commandLink> 
        </td> 
       </tr> 
      </table> 
     </h:form> 
    </ui:composition> 
</body> 
</html>

名爲menu.xhtml

<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"> 
<body> 
    <ui:composition> 
     <h:form> 
      <p:menubar model="#{homePageBean.menubar}" /> 
     </h:form> 
    </ui:composition> 
</body> 
</html>

footer.xhtml

<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"> 
<body> 
    <ui:composition> 
     <table class="footerTbl"> 
      <tr> 
       <td align="center"> 
        <h:outputText value="#{msg['copyright']}" /> 
        <h:outputLink target="_blank" value="http://www.google.com/"> 
         <h:outputText value="#{msg['website']}" /> 
        </h:outputLink> 
       </td> 
      </tr> 
     </table> 
    </ui:composition> 
</body> 
</html>

SomePage.xhtml

<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"> 
<body> 
    <ui:composition template="BaseTemplate.xhtml"> 
     <ui:define name="content"> 
      <h:form> 
       This is in Content section populated when one of the menu item is clicked. 
      </h:form> 
     </ui:define> 
    </ui:composition> 
</body> 
</html>

來源

2015-10-14 Aniket V

也許我錯了，但JSF模板僅僅是一個系統，與普通元素（菜單，頁眉，頁腳，對話......）不重複他們的工作執行（一次且僅一次！）。您的想法面向SPA（單頁面應用程序），並且JSF無法支持它（至少在本機中）。你將不得不使用面板或div來實現你自己的「佈局」系統，並用ajax操作來填充它們。 – Miguel

這只是頁面裝飾使用JSF模板與facelets，而不是SPA。這裏沒什麼不好:) - 完全沒有。 –

@miguel：這是不正確的。部分更新頁面由jsf支持。 – Kukeltje

有兩個技巧在這裏：

1）檢查您的菜單模型bean範圍：

如果你的菜單與用戶，那麼我想它應該@SessionScoped
您還可以創建菜單中的每個時間上的即時（內getMenuModel（）代替豆構造函數）。效率較低但至少工作。

2）如果你想在菜單被刷新，您必須將id屬性設置爲你的菜單欄組件

<p:menubar id="menuBar1" model="#{menuBean.model}" />

然後使用Primefaces的更新功能，例如，當用戶點擊一個特定的菜單項（Java方面：請參閱您的菜單Bean）。

item.setUpdate("menuBar1");

來源

2015-10-15 14:27:27

我認爲OP的主要問題是如何更新主「面板」。 – Kukeltje

使用JSF Primefaces中的動態菜單更改內容部分

回答

相關問題