18

My Objective is to use h:messages 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.

e.g. : 

<tr>
    <td>
        <img/>
    </td>
    <td>
        <h:msg>
    </td>
</tr>

So I tried to add messages to the Faces Context based on 2 different client ids

<tr>
    <td height="5">
        <h:messages style="color:darkred" id="error_message" />
    </td>
</tr>

<tr>
    <td width="89%" class="InfoMsg" align="center">
        <h:messages id="confirm_message" />
    </td>
</tr>

And the java layer:

FacesMessage facesMessage = new FacesMessage(Constants.saveMessageConfirm);

FacesContext.getCurrentInstance().addMessage(Constants.STATIC_CONFIRM_MSG_CLIENT_ID, facesMessage);

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

2 Questions :

  1. What is the problem here?

  2. If I want to show the image inside a td in the second tr and conditionaly show that second tr when confirm messages are present - what is the best way?

Thanks

fuggerjaki61
  • 822
  • 1
  • 11
  • 24
gekrish
  • 2,201
  • 11
  • 29
  • 46

3 Answers3

47

The h:messages displays all messages, also the ones which are already displayed in a h:message in the page. You can however set it to only display messages with a null client ID using globalOnly="true".

<h:messages globalOnly="true" />

You can also give the message a different style depending on the FacesMessage.Severity:

<h:messages infoClass="info" errorClass="error" />

with for example this CSS which hides the INFO messages and makes ERROR messages red:

.info {
     display: none;
}
.error {
     color: red;
}

You can use redisplay="false" to tell it to not display the already displayed messages via e.e. <h:message>.

<h:messages redisplay="false" />

You only need to make sure it's placed in the component tree after all those other message components. You can if necessary make use of CSS to reposition it somewhere in top.

Just to be sure, 

facesContext.addMessage("clientId",  facesMessage);

this will attach the given message to a <h:message for="clientId"> not to a <h:messages id="clientId"> as you seem to expect.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • I posted a question concerning your first statement in this post. Can you take a look please? [Here it is](http://stackoverflow.com/questions/10598549/icemessages-hmessages-showing-messages-which-are-already-displayed-in-a-comp). – Vsevolod Golovanov May 15 '12 at 13:31
  • @this: Sorry my statement was after all indeed wrong. Nobody is perfect :) Please update your question. I have updated this and other answer. Thank you for the wake up. – BalusC May 15 '12 at 13:41
  • BlausC, you are amazing. How did you know it only could have one child element? – ggb667 Mar 13 '13 at 15:41
  • @BalusC is this a good practice to use component's id in facelet and in backing bean as a simple string (like it is done in your last example)? Maybe there is a better way to synchronize this value? E.g. declare a constant, bind its value in the view and use the same constant in backing bean's code? – stasal Sep 08 '17 at 09:51
  • If you simply want to display messages in a specific style, you can use the `style` tag inline without css. Example: `` – Jack Nov 07 '20 at 08:10
  • @jackz314: inline styles are considered bad practice in HTML. – BalusC Nov 07 '20 at 08:52
  • I admit it's not easy to maintain inline CSS, but I think it's reasonable if used in a simple project. In my case, I only have to do this once for one form. – Jack Nov 07 '20 at 08:57
5

change <h:messages> to <h:message>

<h:messages displays all messages for the current context, <h:message> displays a specific message.

and I believe you want to change id to for to give it a target, but I could be wrong.

Alex Larzelere
  • 1,211
  • 1
  • 11
  • 17
1

We can have different types of h:messages for different severity levels. For example you might want to display all the error messages in a red box and rest with different styles like yellow for warn and green for info. You can also wrap around with different panels. You can do so by having different h:messages and apply the styles individually.

<!--Displays only Error Messages-->
<h:messages styleClass="mystyle" layout="list" id="msg1" infoStyle="display:none"       warnStyle="display:none"></h:messages>

<!--Displays only Warning Messages-->
<h:messages styleClass="messages" layout="list" id="msg2" errorStyle="display:none"     infoStyle="display:none"></h:messages>

<!--Displays only Info Messages-->
<h:messages styleClass="messages" layout="list" id="msg2" errorStyle="display:none"     warnStyle="display:none"></h:messages>
sree
  • 11
  • 2