Twitter Bootstrap + JSF 2 - 活动菜单样式答案

【问题标题】：Twitter Bootstrap + JSF 2 - Active menu styleTwitter Bootstrap + JSF 2 - 活动菜单样式
【发布时间】：2012-09-10 12:10:59
【问题描述】：

<ul class="nav">
    <li class="active"><a href="home.xhtml">Home</a></li>
    <li><a href="about.xhtml">About us</a></li>
    <li><a href="contact.xhtml">Contact us</a></li>                         
</ul>

有没有一种简单的方法可以使用 JSF 对其进行模板化，这样我就不必在每个页面上都包含它？

【问题讨论】：

首先检查stackoverflow.com/q/6341427/1478467（参数应该是您要在右侧菜单上保持活动状态的参数）

标签： jsf twitter-bootstrap

【解决方案1】：

对于 DRY 解决方案，我宁愿没有页面列表。

我的解决方案是基于自定义组件：

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

在代码中使用：

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

【讨论】：

【解决方案2】：

您可以在EL中使用#{view.viewId}来获取当前视图ID。

因此，这应该使其适用于所有页面：

<ul class="nav">
    <li class="#{view.viewId == '/home.xhtml' ? 'active' : ''}"><a href="home.xhtml">Home</a></li>
    <li class="#{view.viewId == '/about.xhtml' ? 'active' : ''}"><a href="about.xhtml">About us</a></li>
    <li class="#{view.viewId == '/contact.xhtml' ? 'active' : ''}"><a href="contact.xhtml">Contact us</a></li>                         
</ul>

如果你在 EL 范围内的某个地方有一组页面，那就更干燥了：

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

请注意，<h:link> 会自动在 URL 中添加上下文路径，因此在视图 ID 中添加 / 并不重要。

【讨论】：

如果我所有的文件都在一个目录中，例如/secure/home.xhtml，有没有一种方法可以做到“#{view.viewId == '/secure/home.xhtml' ? 'active' : ''}”而无需引用安全？
<c:set var="viewId" value="#{fn:substringAfter(fn:split(view.viewId, '.')[0], '/secure/')}" /><li class="#{viewId == 'home' ? 'active' : ''}"> ... .