jsf - tutorial - Resaltar la página actual como un enlace activo en el menú de navegación incluido

no se ha resuelto el tipo de navegación para el componente (3)

Tengo un menú estático en la barra lateral que incluyo en cada página JSF. El menú se ve así:

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

Agregar una class="active" al <li> resalta el menú. ¿Cómo hago para asegurarme de que el elemento seleccionado se resalte dinámicamente en JSF2?

Sé que PrimeFaces y RichFaces tienen componentes listos para esto, pero primero quiero probar una solución pura de JSF 2. Una solución de JavaScript del lado del cliente puro también es aceptable.

Mi solución se basa en un componente personalizado:

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

Usado en el código:

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

Puede obtener la ID de la vista actual en EL de la siguiente manera

#{view.viewId}

Entonces, esto debería hacer

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

Sería más fácil mantener todos esos enlaces en alguna List<Page> para que pueda hacer algo como

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

en lugar de copiar el mismo fragmento de código una y otra vez.

He usado @BalusC idea más su otro consejo en 12473461 pero con algunas modificaciones :