Making a "selectable" list component using facelets

Disclaimer: This is not a defense of jsf. If markup were an animal specie, then using jsf would get you arrested for mistreatment. I'm hoping that JavaFX wil give us a better way to make RIAs.

in web.xml

<context-param>
    <param-name>facelets.LIBRARIES</param-name>
    <param-value>/WEB-INF/somewhere/you/decide/whatever.tablib.xml</param-value>
</context-param>

in whatever.taglib.xml

<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
  "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
  "facelet-taglib_1_0.dtd">

<facelet-taglib>
  <namespace>http://www.yourdomain.com/anothernameyoudecide</namespace>
  <tag>
    <tag-name>li</tag-name>
    <source>li.xhtml</source>
  </tag>
</facelet-taglib>

in li.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jstl/core">
    <c:choose>
        <c:when test="#{selectedPageName == pageName}">
            <li class="#{class} menuItemSelected"><ui:insert /></li>
        </c:when>
        <c:otherwise>
            <li class="#{class} menuItemNotSelected"><ui:insert /></li>
        </c:otherwise>
    </c:choose>
</ui:composition>

(I was particularily impressed to see that I could just add the existing classes as easy as it is done above. It's one of those rare moments when I think that it would be wonderful if it was this simple, -just to find out that it actually is!)

making the menu

<ui:component xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:y="http://www.yourdomain.com/anothernameyoudecide"
    xmlns:c="http://java.sun.com/jstl/core">
<ul class="horisontalMenu" id="topMenu">
        <li jsfc="y:li" pageName="home"><a href="Home.faces">#{bundle['topmenu.home']}</a></li>
        <li jsfc="y:li" pageName="search"><a href="Search.faces">#{bundle['topmenu.search']}</a></li>
        <li jsfc="y:li" pageName="reports"><a href="Reports.faces">#{bundle['topmenu.reports']}</a></li>
    </ul>
</ui:component>

setting the selected top menu

easy as just dropping this into the ui:composition of the facelet your displaying:
<ui:param name="selectedPageName" value="home"/>