JSF - How can I format my global messages in <h: messages> in a visually appealing way?

Question

I am not too familiar with the element <h:messages>in JSF. What I'm trying to do is use it to display a list of global messages of varying severity that are generated by a method in my bean support. Receiving messages in is FacesContextnot a problem, and my code is in the following lines:

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

Everything works perfectly. My problem is trying to make the tag output <h:messages>appear well on the page. Here is the corresponding snippet of my JSP file:

<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  
• "" "" .  
• :

SCREENSHOT:

- <h:messages> , ?

, , MyFaces 1.2. 2.x .

Answer 1

, 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> FacesContext#getMessages() c:forEach t:dataList 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}.

Answer 2

BalusC, CSS. :

• . " "
• css HTML.
• , FireBug , .