菜单栏上的 PrimeFaces 自定义文本

【问题标题】：PrimeFaces custom text on Menubar菜单栏上的 PrimeFaces 自定义文本
【发布时间】：2015-07-14 14:47:00
【问题描述】：

我正在使用<p:menubar>。我已经看到我可以使用 'facet' 来呈现自定义内容，如展示中所示。

我现在要做的，是在第一个 MenuItem 的左侧放置一个文本。

<h:form>
    <p:menubar autoDisplay="false">
        <f:facet name="options">
            <p:outputLabel value="My Company"/>
        </f:facet>
        <p:menuitem value="Home" outcome="index.xhtml" icon="ui-icon-pencil" style="float: right;"/>
        <p:menuitem value="Register" outcome="register.xhtml" icon="ui-icon-pencil" style="float: right;"/>
        <f:facet name="options">
            <p:commandButton action="login.xhtml" value="Login" icon="ui-icon-extlink"/>
        </f:facet>
    </p:menubar>
</h:form>

我希望我的意思很清楚。在任何情况下，Outputlabel 都会显示在菜单栏的右侧。

【问题讨论】：

标签： jsf jsf-2 primefaces

【解决方案1】：

在UIComponentBase 中，构面存储在private Map<String, UIComponent> facet 中。因此，当您定义具有相同名称“选项”的多个方面时，它们在 Map 中被汇总为一个 UIComponent（在您的情况下，UIPanel 有两个孩子：<p:outputLabel ...> 和 <p:commandButton ...>）。

当您通过org.primefaces.component.tieredmenu.TieredMenuRenderer.encodeMenu() 方法（呈现您的菜单）进行调试时，您会看到，菜单由<ul> 列表组成，每个菜单项都是<li> 标记。在最后一步中，“options”方面被渲染为该列表中的最后一个元素。所以你的两个标签都出现在右边。

例如，您可以在自定义 Renderer 类中扩展 org.primefaces.component.tieredmenu.TieredMenuRenderer.encodeMenu() 方法，以在菜单开头额外渲染一些文本。

【讨论】：