1

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?

Improve this question
3
  • Which JSF version is it? Commented Nov 20, 2013 at 12:15
  • JSF 2.1 primefaces:4.0 Commented Nov 20, 2013 at 12:30
  • "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? Commented Nov 20, 2013 at 12:36

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>
Improve this answer

2 Comments

i cant use <li> tag inside <p:submenu>. I got the menubar in other pages but still the menu isnt selected.
make sure <ui:param> is outside of <ui:define>. I'm using simple Twitter Bootstrap menu-bar, that I include in the tamplate itself, and this trick works a charm.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.