2015-10-14 59 views
0

我正在使用分成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> 
+0

也许我错了,但JSF模板仅仅是一个系统,与普通元素(菜单,页眉,页脚,对话......)不重复他们的工作执行(一次且仅一次!)。您的想法面向SPA(单页面应用程序),并且JSF无法支持它(至少在本机中)。你将不得不使用面板或div来实现你自己的“布局”系统,并用ajax操作来填充它们。 – Miguel

+1

这只是页面装饰使用JSF模板与facelets,而不是SPA。这里没什么不好:) - 完全没有。 –

+0

@miguel:这是不正确的。部分更新页面由jsf支持。 – Kukeltje

回答

0

有两个技巧在这里:

1)检查您的菜单模型bean范围:

  • 如果你的菜单与用户,那么我想它应该@SessionScoped
  • 您还可以创建菜单中的每个时间上的即时(内getMenuModel()代替豆构造函数)。效率较低但至少工作。

2)如果你想在菜单被刷新,您必须将id属性设置为你的菜单栏组件

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

然后使用Primefaces的更新功能,例如,当用户点击一个特定的菜单项(Java方面:请参阅您的菜单Bean)。

item.setUpdate("menuBar1"); 
+0

我认为OP的主要问题是如何更新主“面板”。 – Kukeltje