how to set menubar in all pages in jsf

Question

I created a menubar and i want it it all my pages throughout application.When i include the file in other through the menubar state(i.e the submenu is unfolder) dosent maintain.So i created a panel and on click only the pagecontent get refreshed and the menu remain stable.The link dosent change i.e my main page is menubar on click of menu1 also my url is menubar only .

<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>

Whether there is any alternate ways other than this?

"I created a menubar and i want it it all my pages throughout application." - My first thoughts here, then, are "session bean" and "ui tag templating". What is your current design? — 8bitjunkie, Nov 20 '13 at 12:36

score 1 · Answer 1 · answered Nov 20 '13 at 12:43

Go with facelet page templates. Create a general template where you will place your 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>

After, make all your pages use that template:

<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>

That way each time you go to an specific view, it'll take general_template.xhtml as a parent template (notice the declaration at the template client) and will fill the general_content part with its customized content.

score 0 · Answer 2 · answered Nov 20 '13 at 13:25

Xtreme Biker answer is spot on

I'll add one tweak however

To mark current page as selected in the menu use <ui:param name="pageName" value="index" /> and use #{pageName} variable in your menu-bar. Like so:

<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>

and in Template -> Menu use something like

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

make sure `` is outside of ``. I'm using simple Twitter Bootstrap menu-bar, that I include in the tamplate itself, and this trick works a charm. — Kuba, Nov 21 '13 at 08:17

how to set menubar in all pages in jsf

2 Answers2