java - JSF - 如何格式化我的全局消息以一种视觉上吸引人的方式？

Question

我对<h:messages>在 JSF 中使用元素不太熟悉。我要做的是使用它来显示由我的支持 bean 中的方法生成的不同严重程度的全局消息列表。将消息放入其中FacesContext并不是什么大问题，我的代码如下：

FacesMessage message;
FacesContext context = 
    FacesContext.getCurrentInstance();
message = new FacesMessage(
    FacesMessage.SEVERITY_INFO,
    "test message summary 1",
    "test message detail 1");
context.addMessage(null, message);
message = new FacesMessage(
    FacesMessage.SEVERITY_WARN,
    "test message summary 2",
    "test message detail 2");
context.addMessage(null, message);
message = new FacesMessage(
    FacesMessage.SEVERITY_ERROR,
    "test message summary 3",
    "test message detail 3");
context.addMessage(null, message);
// add more messages...

这一切都很好。我的问题是试图使<h:messages>标签的输出在页面上看起来不错。这是我的 JSP 文件的相关部分：

<h:panelGrid border="1" columns="1" id="messagesPanelGrid">
    <h:messages 
        id="messagesOutput"
        showSummary="true"
        showDetail="true" 
        layout="table"
        infoClass="info-message"
        warnClass="warn-message"
        errorClass="error-message"
        fatalClass="fatal-message" 
        globalOnly="true" />
</h:panelGrid>

这在页面上一直看起来像废话。我正在使用外部 CSS 样式表来定义样式类。我试过使用layout="list"，但列表项跨越整个页面，使任何块样式看起来很糟糕，所以我切换到layout="table". 我把<h:messages>内部框起来了，<h:panelGrid>所以我会有一些可以应用样式的块级元素。看起来还是不是特别好看。

我现在得到的：

<table border="1" id="myForm:messagesOutput">
    <tr><td class="error-message"><span>no port name match Could not match reported port name XXXX to a known port for vessel VESSEL A</span></td></tr>
    <tr><td class="error-message"><span>no port name match Could not match reported port name YYYY to a known port for vessel VESSEL B</span></td></tr>
    <tr><td class="error-message"><span>no port name match Could not match reported port name YYYY to a known port for vessel VESSEL C</span></td></tr>
    <tr><td class="error-message"><span>no port name match Could not match reported port name ZZZZ to a known port for vessel VESSEL D</span></td></tr>
    <tr><td class="warn-message"><span>arrival date missing No arrival date provided for vessel VESSEL B</span></td></tr>
</table>

我想要得到什么：

<table border="1" id="myForm:messagesOutput" class="myMessagesTableClass">
    <thead><tr"><td>SUMMARY</td><td>DETAIL</td></tr></thead>
    <tr><td class="error-message-summary"><span>no port name match</span></td><td class="error-message-detail"><span>Could not match reported port name XXXX to a known port for vessel VESSEL A</span></td></tr>
    <tr><td class="error-message-summary"><span>no port name match</span></td><td class="error-message-detail"><span>Could not match reported port name YYYY to a known port for vessel VESSEL B</span></td></tr>
    <tr><td class="error-message-summary"><span>no port name match</span></td><td class="error-message-detail"><span>Could not match reported port name YYYY to a known port for vessel VESSEL C</span></td></tr>
    <tr><td class="error-message-summary"><span>no port name match</span></td><td class="error-message-detail"><span>Could not match reported port name ZZZZ to a known port for vessel VESSEL D</span></td></tr>
    <tr><td class="warn-message-summary"><span>arrival date missing</span></td><td class="warn-message-detail"><span>No arrival date provided for vessel VESSEL B</span></td></tr>
</table>

消息仍在表格布局中，但“摘要”和“详细信息”位于不同的列中
生成的表有一个直接分配给它的 CSS 类
消息的“摘要”和“详细信息”部分具有单独的样式类
很高兴：表格标题行

截屏：
替代文字

有没有人使用<h:messages>标签并对我如何实现这一点有一些想法？

我不确定这个问题是否重要，但我使用的是 MyFaces 1.2。我目前无法升级到 2.x。

score 8 · Accepted Answer

毕竟，您想更改 HTML 输出。这真的不能用CSS来完成。CSS 更多的是给现有的 HTML 元素一个布局，而不是修改它们。除了在 JavaScript 中摆弄（在这种特殊情况下这并不容易），您还希望 JSF 更改其 HTML 输出。基本上有两种方式：

提供您自己的MessagesRenderer，以便它以您想要的方式呈现消息。扩展 MyFaces 中使用的基本渲染器类（抱歉，因为我不使用 MyFaces，所以我无法从头顶分辨出它是用于 MyFaces 的哪个类，您需要查阅它的 API 文档）并将其注册faces-config如下：
```
<render-kit>
    <renderer>
        <component-family>javax.faces.Messages</component-family>
        <renderer-type>javax.faces.Messages</renderer-type>
        <renderer-class>com.example.CustomMessagesRenderer</renderer-class>
    </renderer>
</render-kit>
```
这com.example.CustomMessagesRenderer就是您实现的自定义渲染器。您想覆盖encodeEnd()标准渲染器的方法，使其以所需的方式输出 HTML。这是太多的代码，无法在此处作为示例发布，但只需查看默认消息渲染器的源代码即可提供足够的提示。

List<FacesMessage>在 a的帮助下收集消息，并在or和普通的普通 HTMLFacesContext#getMessages()的帮助下显示它们。例如c:forEacht:dataList

public List<FacesMessage> getMessages() {
    List<FacesMessage> messages = new ArrayList<FacesMessage>();
    Iterator<FacesMessage> iter = FacesContext.getCurrentInstance().getMessages();
    while (iter.hasNext()) {
        messages.add(iter.next());
    }
    return messages;
}

和

<table border="1" id="myForm:messagesOutput" class="myMessagesTableClass">
  <thead><tr><td>SUMMARY</td><td>DETAIL</td></tr></thead>
  <tbody>
    <c:forEach items="#{bean.messages}" var="message">
      <c:set var="type" value="#{message.severity == 'SEVERITY_ERROR' ? 'error' : 'warn'}" />
      <tr>
        <td class="#{type}-message-summary"><span>#{message.summary}</span></td>
        <td class="#{type}-message-detail"><span>#{message.detail}</span></td>
      </tr>
    </c:forEach>
  </tbody>
</table>

在 JSF2 中，您应该#{facesContext.messageList}直接使用而不是#{bean.messages}.

score 2 · Accepted Answer

正如 BalusC 所评论的，这是 CSS 技能的问题。但是，我有一个实用的建议：

打开页面
见“查看源代码”
复制生成的文件并尝试将您的 css 技能应用于生成的 HTML。
或者，使用 FireBug 并动态添加样式并检查它的外观。

java - JSF - 如何格式化我的全局消息以一种视觉上吸引人的方式？

2 回答 2

Related

Reference