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

Question

我不太熟悉在 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...

一切正常。我的问题是尝试使 标记的输出在页面上看起来不错。这是我的 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" 。我将 框架在 内，这样我就有了一些可以应用样式的块级元素。看上去还是不是特别好看。

我现在得到的：

<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 类
• “摘要”消息的“详细”部分具有单独的样式类，
• 最好有：表标题行屏幕

截图：

有人使用 标签和对如何实现此目标有一些想法？

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

Answer 1

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

1. 提供您自己的MessagesRenderer，以便它按照您想要的方式呈现消息。扩展 MyFaces 中使用的基本渲染器类（抱歉，因为我不使用 MyFaces，所以我无法从头顶分辨出它是 MyFaces 的哪个类，您需要查阅其 API 文档）并将其注册到 faces-config如下：

   ;
       <渲染器>
           <组件系列>javax.faces.Messages
           <渲染器类型>javax.faces.Messages
           <渲染器类>com.example.CustomMessagesRenderer
       
   
   

   这里，com.example.CustomMessagesRenderer 是您已实现的自定义渲染器。您想要覆盖 encodeEnd() 标准渲染器的方法，使其以所需的方式输出 HTML。此处作为示例发布的代码太多，但只需查看默认消息渲染器的源代码就应该给出足够的提示。

2. 在 FacesContext#getMessages() 并在 c:forEach 的帮助下显示它们或t:dataList 和普通 HTML。例如

   公共列表获取消息() {
       列表 messages = new ArrayList();
       迭代器 iter = FacesContext.getCurrentInstance().getMessages();
       while (iter.hasNext()) {
           messages.add(iter.next());
       }
       返回消息；
   }
   

   与

   ;
     
     <正文>
       
         
         
   在 JSF2 中，您可以使用 #{facesContext.messageList} 直接代替 #{bean.messages}。
   摘要
   详细信息
   
           
   #{message.summary}
           
   #{message.detail}
         
       
     
   
   
   
   

Answer 2

正如 BalusC 所说，这是 CSS 技能的问题。不过，我有一个实用的建议：

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