I'm writing tiny web-application using JSF2.2 and Twitter Bootstrap for client side.
I customized the look of list elements dumped by <h:messages> tag, but now I have to specify its errorStyle and warnStyle every time use <h:messages> something like this:
<h:messages class="messages" errorClass="has-error" warnClass="has-warning"/>
Is there a way to get rid of such boilerplate markup? Can I set these attributes globally somehow?
You can override the primefaces css styles globally for your project specific way once.
For example, I have overridden as below once in my CSS. You can view the primefaces css using plugins like FireBug.
.ui-messages-info,.ui-messages-warn,.ui-messages-error,.ui-messages-fatal
{
width: 795px;
min-height: 20px;
border-style: solid;
border-top: none;
border-right: none;
border-bottom: none;
border-left-width: 5px;
}
.ui-messages-warn,.ui-message-warn {
border-left-color: rgb(224, 203, 82);
color: brown;
}
.ui-messages-error,.ui-message-error {
border-left-color: rgb(224, 82, 82);
}
.ui-messages-info,.ui-message-info {
border-left-color: rgb(82, 224, 82);
background: rgb(233, 251, 233);
color: green;
}
.ui-messages-warn-icon {
background: url('../images/warning_24x24.png');
}
.ui-messages-error-icon {
background: url('../images/error_24x24.png');
}
.ui-messages-info-icon {
background: url('../images/success_24x24.png');
}
.ui-messages-warn-summary {
font-weight: normal;
}
And in your pages you can just have as below, it would dynamically behave according to error, warn, info, etc,
<p:messages autoUpdate="true" />
