title: How to use JSF h:messages better?
body: <p>My Objective is to use <code>h:messages</code> to convey user - error and confirmation messages. The CSS styles to show these two different messages are different, In fact I would like to use an image beside the confirmation message. </p>
  
  <p>e.g. : </p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
          &lt;img/&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;h:msg&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>So I tried to add messages to the Faces Context based on 2 different client ids</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td height="5"&gt;
          &lt;h:messages style="color:darkred" id="error_message" /&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;td width="89%" class="InfoMsg" align="center"&gt;
          &lt;h:messages id="confirm_message" /&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>And the java layer:</p>
  
  <pre><code>FacesMessage facesMessage = new FacesMessage(Constants.saveMessageConfirm);
  
  FacesContext.getCurrentInstance().addMessage(Constants.STATIC_CONFIRM_MSG_CLIENT_ID, facesMessage); 
  </code></pre>
  
  <hr>
  
  <p>But, even if I add messages to clientId confirm_message - and only to confirm_message - and not to error_message - The message is shown twice in 2 different styles (refer the HTML above).</p>
  
  <p>2 Questions :</p>
  
  <ol>
  <li><p>What is the problem here?</p></li>
  <li><p>If I want to show the image inside a <code>td</code> in the second <code>tr</code> and conditionaly show that second <code>tr</code> when confirm messages are present - what is the best way?</p></li>
  </ol>
  
  <p>Thanks</p>