Search code examples
cssjsffacelets

Facelets strategy to identify current selected list item

I am looking for a strategy to avoid code duplication across my site.

The problem is that I have a unordered list that get's repeated in each page I code. The reason is that I have a list-item that contains an anchor to identify the currentPage. That get's repeated in each page I code. The reason is that I have a list-item that contains an anchor to identify the currentPage. This allows me to hilite it with css.

How can I define such a list in a way that I can change it dynamically in facelets?

<ui:define name="leftBar">
        <ul class="leftNav">
            <li id="home"><a id="**currentPage**" jsfc="h:link" outcome="home">#{global.homeInCaps}</a></li>
            <li id="about"><a jsfc="h:link" outcome="about">#{global.aboutInCaps}</a></li>
            <li id="blog"><a jsfc="h:link" outcome="blog">#{global.blogInCaps}</a></li>
            <li id="tutorials"><a jsfc="h:link" outcome="tutorials">#{global.tutorialsInCaps}</a>
                <ul class="leftSubNav">
                    <li><a jsfc="h:link" outcome="java">#{global.javaNormal}</a>
                        <ul class="leftSubNav">
                            <li><a jsfc="h:link" outcome="setupPath">#{global.path}</a></li>
                        </ul>
                    </li>
                    <li><a jsfc="h:link" outcome="ubuntu">#{global.ubuntuNormal}</a></li>
                    <li><a jsfc="h:link" outcome="virtualbox">#{global.virtualBoxNormal}</a></li>
                </ul>
            </li>
            <li id="contact"><a jsfc="h:link" outcome="contact">#{global.contactInCaps}</a></li>
        </ul>

    </ui:define>
Solution

  • In JSF you can get the current view ID by

    #{facesContext.viewRoot.viewId}

    It will return the webcontent-relative path of the view file, e.g. /home.xhtml, /about.xhtml, etc. You could test it with help of the conditional operator in EL to set the classname.

    <ui:param name="view" value="#{facesContext.viewRoot.viewId}" />

<li id="home"><a jsfc="h:link" outcome="home" class="#{view == '/home.xhtml' ? 'current' : ''}">#{global.homeInCaps}</a></li>
<li id="about"><a jsfc="h:link" outcome="about" class="#{view == '/about.xhtml' ? 'current' : ''}">#{global.aboutInCaps}</a></li>
<li id="blog"><a jsfc="h:link" outcome="blog" class="#{view == '/blog.xhtml' ? 'current' : ''}">#{global.blogInCaps}</a></li>
...

    You can then style the link representing the current page with CSS

    .leftNav .current {
    color: pink;
}

    Shouldn't the leftNav rather be an id?