Geek Answers Handbook

Select the current page as an active link in the included navigation menu

I have a static menu in the sidebar that I include on every JSF page. The menu looks like this:

<li class="nav-header">Item 1</li> <li class="active"><a href="index.xhtml">Item 2</a></li> <li><a href="new_workload.xhtml">Item 3</a></li> <li><a href="import_workload.xhtml">Item 4</a></li>

Adding class="active" to <li> highlights the menu. How can I make sure the selected item is dynamically allocated in JSF2?

I know that PrimeFaces and RichFaces have ready-made components for this, but first I want to try a clean JSF 2 solution. Client-side JavaScript is also acceptable.

+8
jsf jsf-2 menu
source share
3 answers

You can get the current view id in EL as follows

 #{view.viewId}

So this should do

 class="#{view.viewId eq '/index.xhtml' ? 'active' : ''}"

It would be easier to keep all these links in some List<Page> so you can just do something like

 <li class="nav-header">#{menu.header}</li> <ui:repeat value="#{menu.pages}" var="page"> <li class="#{view.viewId eq page.viewId ? 'active' : ''}"> <h:link value="#{page.title}" outcome="#{page.viewId}" /> </li> </ui:repeat>

instead of copying the same piece of code over and over.

+27
source share

I used the idea of ​​@BalusC plus its other advice in 12473461 , but with some modification :

 <ul> <li class="#{view.viewId eq '/admin/index.xhtml' ? 'active' : ''}"><h:link value="Main" outcome="main"/></li> <li class="#{fn:startsWith(view.viewId, '/admin/sess1/') ? 'active' : ''}"><h:link value="Session 1" outcome="sess1"/></li> <li class="#{fn:startsWith(view.viewId, '/admin/sess2/') ? 'active' : ''}"><h:link value="Session 2" outcome="sess2"/></li> <li class="#{fn:startsWith(view.viewId, '/admin/sess3/') ? 'active' : ''}"><h:link value="Session 3" outcome="sess3"/></li> </ul>
+1
source share

My solution is based on a custom component:

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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:composite="http://java.sun.com/jsf/composite" xmlns:c="http://java.sun.com/jsp/jstl/core" > <composite:interface> <composite:attribute name="outcome" /> <composite:attribute name="label" /> </composite:interface> <composite:implementation> <li class="menuItem #{view.viewId == cc.attrs.outcome ? 'active' : ''}"> <h:outputText value="#{cc.attrs.label}" rendered="#{view.viewId eq cc.attrs.outcome}"/> <h:link outcome="#{cc.attrs.outcome}" value="#{cc.attrs.label}" rendered="#{view.viewId ne cc.attrs.outcome}" /> </li> </composite:implementation> </html>

Used in code:

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:my="http://java.sun.com/jsf/composite/my"> ... <ul class="nav"> <my:menuItem outcome="/home.xhtml" label="Home" /> </ul>
0
source share

More articles:


All Articles