Question

<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对此进行模板化，所以我不必将它包含在每个页面上？

Answer 1

您可以在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>会自动在网址中添加上下文路径，因此视图ID中的/无关紧要。

Answer 2

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

Twitter Bootstrap + JSF 2 - 活动菜单风格

2 个答案: