JSF2 动态 CSS 设置超过 2 个选项的样式（不是三元的）

Question

使用 JSF2、Facelets。

我需要根据可以包含多个（未确定的）值的变量编写 CSS 样式：

<p rendered="#{not empty element.state}" class="globalStyle CODED_CLASS_ACCORDING_TO_element.state">#{element.state}</p>

我不确定如何在 JSF 中获得 CODED_CLASS_ACCORDING_TO_element.state。我看到的大多数答案总是应用三元选项（odd/even、on/off、applied/not_applied...），这在我的情况下无效，因为状态可以是 "Done" 、"Under development"、"initiated" 等。它也不是在 bean 中编写转换代码，因为它不应该知道视图。还是option 3 in this answer首选？

style="color: #{yourVar == 'yes' ? 'green' : 'red'};"

make two <h:outputText> components with different styles, each with a different rendered attribute (one #{yourVar == 'yes'} and the other #{yourVar == 'no'})

define a (jstl/facelets/jsf 2.0) function that takes the var as argument and returns a style/class - styleClass="#{my:getStyleClass(yourVar)}"

如果是这样，我不知道该怎么做（我是 JSF 的新手）。我可以想到 <cc:interface> 和 <cc:implementation> 并根据某些 <c:if> 条件呈现正确的输出，但我确信这不是正确的方法，而且它会非常无效。

Answer 1

只需将 state 设为 enum。

public enum State {
    DONE, UNDER_DEVELOPMENT, INITIATED, ETC;
}

并直接用作 class 名称。

<p ... class="globalStyle state #{element.state}">

.state.DONE {
    color: green;
}

.state.UNDER_DEVELOPMENT {
    color: orange;
}

.state.INITIATED {
    color: red;
}

.state.ETC {
    color: pink;
}

使用枚举还有其他优点。例如。 How to use enum values in f:selectItem(s) and Localizing enum values in resource bundle.

JSF2 动态 CSS 设置超过 2 个选项的样式（不是三元的）

JSF2 Dynamically CSS styling more than 2 options (not ternary)

facelets

jsf-2