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

Question

I'm not too familiar with using the <h:messages> element 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 backing bean. Getting the messages into the FacesContext isn't too much of a problem, and my code is along these 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...

That all works fine. My problem is with trying to make the output of the <h:messages> tag look good on the page. Here is the relevant piece 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>

This consistently looks like crap on the page. I am using an external CSS stylesheet to define styling classes. I've tried using layout="list" but then the list items span the whole page and make any block styling look bad, so I switched to layout="table". I framed the <h:messages> inside a <h:panelGrid> so I would have some block-level element that I could apply styles to. It still doesn't look particularly nice.

What I'm getting now:

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

What I'm trying to get:

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

• Messages are still in a table layout, but the "summary" and "detail" are in separate columns
• Generated table has a CSS class directly assigned to it
• The "summary" and "detail" parts of the message have separate style classes
• NICE TO HAVE: Table header row

SCREENSHOT:

Does anyone out there work with <h:messages> tags and have some ideas on how I can achieve this?

I'm not sure if it matters for this question, but I'm using MyFaces 1.2. I can't upgrade to 2.x at the moment.

Answer 1

After all, you want to change the HTML output. This really can't be done with CSS. CSS is more to give the existing HTML elements a layout, not to modify them. Apart from fiddling in JavaScript (which isn't easy in this particular case), you'd like to have JSF change its HTML output. There are basically two ways:

1. Supply your own MessagesRenderer so that it renders messages the way you want. Extend the base renderer class as used in MyFaces (sorry, since I don't use MyFaces I can't tell from top of head which class it is for MyFaces, you need to consult its API docs) and register it in faces-config as follows:

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

   Here, com.example.CustomMessagesRenderer is thus the custom renderer you've implemented. You'd like to override the encodeEnd() method of the standard renderer to have it to output HTML the desired way. This is too much code to post as an example here, but just looking in the source code of the default messages renderer should give enough hints.

2. Collect the messages in a List<FacesMessage> with help of FacesContext#getMessages() and just display them with help of c:forEach or t:dataList and plain vanilla HTML. E.g.

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

   with

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

   In JSF2, you'd have used #{facesContext.messageList} directly instead of #{bean.messages}.

Answer 2

As BalusC commented, this is a matter of CSS skills. However, I have one practical advice:

• open the page
• see "view source"
• copy the resulting file and try applying your css skills to the generated HTML.
• alternatively, use FireBug and add styles dynamically and check what it looks like.