JSF 消息的不同 CSS 样式答案

【问题标题】：Different CSS style for JSF messagesJSF 消息的不同 CSS 样式
【发布时间】：2011-08-23 08:57:25
【问题描述】：

在 JSF 中，我在我的 xhtml 文件中包含以下行：

<h:panelGroup id="messageHeader">
   <h:messages for="messageHeader" layout="list" errorClass="error"  infoClass="inform"/>
</h:panelGroup>

文本被渲染为

<ul>
  <li class="error"> Please enter a First Name </li>
  <li class="error"> Please enter a Last Name </li>
</ul>

如何让 CSS 样式应用于 <ul> 标记或一些周围的 <span> 标记？

这就是我想要做的。我希望所有错误消息都显示在一个红色框中。我还希望所有信息消息都显示在一个绿色框中。上面的例子产生了 2 个红框；每个<li> 项目一个。

【问题讨论】：

一个不同的问题可能是：我怎样才能只得到错误消息？

标签： jsf coding-style richfaces messages

【解决方案1】：

使用<h:messages> 的styleClass 属性。它将应用于父 HTML 元素。

例如

<h:messages styleClass="messages" />

最终会变成

<ul class="messages">
    ...
</ul>

更新：您似乎希望在单独的列表中显示信息和错误消息。使用两个 <h:messages/> 代替您隐藏其他严重性。

<h:messages styleClass="errorMessages" infoStyle="hide" />
<h:messages styleClass="infoMessages" errorStyle="hide" />

与

.hide {
    display: none;
}

【讨论】：

@BalusC 但是如何指定信息样式和错误消息的单独样式？
继续使用errorClass 和infoClass，就像你已经做的那样。 styleClass 不会覆盖它。你问的是如何在<ul> 上设置class，对吧？
@BalusC 是的，我正在尝试在<ul> 上设置类，但我想要一个基于消息严重性的不同类。我现在意识到<h:messages ...> 可以返回具有不同严重级别的消息。我可以只获取指定严重级别的消息吗？
是的，这是可能的。 JSF 1.x 还是 2.x？

【解决方案2】：

这可以通过为您需要在适当条件下显示的每种消息类型提供 h:messages 标记来完成。例如错误消息类型：

<h:panelGroup id="errorMessageHeader" class="whatever you need" rendered="#{FacesContext.isValidationFailed()}">
   <h:messages for="errorMessageHeader" layout="list" errorClass="error" />
</h:panelGroup>

您可以通过组合方法找到其他消息类型的条件

javax.faces.context.FacesContext

谢谢， A.K.

【讨论】：

我将尝试这种技术，但如何测试 FaceContext 的信息消息？
@Ryan：此 EL 示例无效。正确的示例取决于您使用的是 JSF 1.x 还是 2.x，以及您使用的是 JSP 还是 Facelets。但毕竟还有更简单的方法。
@BalusC 感谢您的评论。我没有检查它是否有效，只是想显示要点。
@Ryan 在 JSF 1.x 或 2.x 中可以通过比较最大严重性 (FacesContext.getMaximumSeverity()) 来代替，但我建议使用 BalusC 建议，因为它实际上要简单得多。