如何在jsf中的所有页面中设置菜单栏[重复]

Posted 2023-02-22

【中文标题】如何在jsf中的所有页面中设置菜单栏[重复]

【英文标题】：how to set menubar in all pages in jsf [duplicate]

【发布时间】：2013-12-04 06:38:46

【问题描述】：

我创建了一个菜单栏，我想要它在整个应用程序中的所有页面。当我通过菜单栏状态将文件包含在其他文件中时（即子菜单是展开器）doseent 维护。所以我创建了一个面板并仅单击页面内容刷新并且菜单保持稳定。链接更改即我的主页是单击 menu1 时的菜单栏，我的网址也只是菜单栏。

<h:panelGrid columns="2">
<h:panelGroup id="menu" layout="block">
    <h:form id= "form">

    <h:outputStylesheet name="css/primefaces.css" />

    <p:growl id="messages" autoUpdate="true" />
    <p:panelMenu style="width:200px " styleClass="ui-menubar"
        autoSubmenuDisplay="true">

<p:submenu label="Ajax     Menuitems">                      
<p:menuitem value="Menu1" action ="#menuBar.setPage('menu1.xhtml')" />  

        </p:submenu>    



    </p:panelMenu>


   </h:form>
   </h:panelGroup>

    <h:panelGroup id="content" layout="block" >
   <form id = "contentform">
    <ui:include src="#menuBar.page" />
    </form>
        </h:panelGroup>
      </h:panelGrid>

      <h:panelGroup id="footer" layout="block">
      <h1>Footer</h1>
    </h:panelGroup>

除此之外还有其他的方法吗？

【问题讨论】：

JSF是哪个版本的？

JSF 2.1 primefaces:4.0

“我创建了一个菜单栏，我希望它在整个应用程序的所有页面中都有。” - 那么，我在这里的第一个想法是“会话 bean”和“ui 标签模板”。你目前的设计是什么？

【参考方案1】：

使用facelet page templates。创建一个通用模板，您将在其中放置 p:panelMenu：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

    <h:head />

    <h:body>

        <p:panelMenu style="width:200px " styleClass="ui-menubar"
            autoSubmenuDisplay="true">
                <p:submenu label="Ajax Menuitems">                      
                    <p:menuitem value="Menu1" 
                        action ="#menuBar.setPage('menu1.xhtml')" />  
                </p:submenu>    
        </p:panelMenu>

        <ui:insert name="general_content" />

    </h:body>

</ui:composition>

之后，让您的所有页面都使用该模板：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/templates/general_template.xhtml">

        <ui:define name="general_content">
            My content
        </ui:define>

</ui:composition>

这样，每次您转到特定视图时，它都会将 general_template.xhtml 作为父模板（注意模板客户端的声明），并使用其自定义内容填充 general_content 部分。

【参考方案2】：

Xtreme Biker 的答案就在眼前

不过我会添加一个调整

要将当前页面标记为在菜单中选中，请使用<ui:param name="pageName" value="index" /> 并在菜单栏中使用#pageName 变量。像这样：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/templates/general_template.xhtml">

    <ui:param name="pageName" value="index" />
    <ui:define name="general_content">
        My content
    </ui:define>

</ui:composition>

在模板 -> 菜单中使用类似

<li class="#pageName == index ? 'active' : null">
    <h:link outcome="#index" value="Index" />
</li>

【讨论】：

我不能在 中使用 标签。我在其他页面中获得了菜单栏，但仍然没有选择菜单。

确保<ui:param> 在<ui:define> 之外。我正在使用简单的 Twitter Bootstrap 菜单栏，我将它包含在模板本身中，这个技巧很有效。