Add HTML to <h: messages / ">

Question

I am using Twitter Bootstrap.

Warning Code:

<div class="alert alert-block"> <a class="close" data-dismiss="alert" href="#">×</a> <h4 class="alert-heading">Warning!</h4> Best check yo self, you're not... </div> 

I use <h:messages /> to display my form, information, and warnings in this way:

 <h:messages errorClass="alert alert-error" infoClass="alert alert-info" warnClass="alert alert-warning"/> 

The colors and rounded corners are fine, but I need to add a close connection:

 <a class="close" data-dismiss="alert" href="#">×</a> 

How do I do this with <h:messages/> ?

Edit

If you need a better understanding, here is the twitter download link for the alert style: http://twitter.github.com/bootstrap/components.html#alerts

Answer 1

I think as usual you add posts ...

 FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(null, new FacesMessage(your message goes here... 

messages must be added on the server side ... for example, String myMessage = "here is the text/HTML code..."

Take a look at this BalusC article

Using HTML in JSF Messages

Answer 2

Just use omnifaces o: messages. The problem will be solved.

eg <o:messages escape="false"/>

Answer 3

Another solution is

 <div class="alert alert-danger alert-dismissible fade in" role="alert" jsf:rendered="#{not empty facesContext.getMessageList('InputPassword')}"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Error </strong> <h:message for="InputPassword" /> </div> 

For JSF 2.2, but you can adapt to previous versions of JSF ..