JSF - 如何以视觉上吸引人的方式在<h:messages>中格式化我的全局消息？

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类
• 消息的"摘要"和"详细信息"部分具有单独的样式类
• NICE TO HAVE:表标题行

截图:

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

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

Answer 1

毕竟,您想要更改HTML输出.这真的无法用CSS完成.CSS更多的是为现有HTML元素提供布局,而不是修改它们.除了摆弄JavaScript(在这种特殊情况下这并不容易),你想让JSF改变它的HTML输出.基本上有两种方式:

1. 提供您自己的,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.这里有太多的代码要发布作为示例,但只是查看默认消息渲染器的源代码应该给出足够的提示.

2. 在List<FacesMessage>帮助下收集消息,FacesContext#getMessages()并使用c:forEach或t:dataList简单的vanilla HTML 显示它们.例如

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