Customizing message styles can be done via Cascading Style Sheets (CSS). This can be accomplished by using the <h:message>, style, or styleClass attributes. The style attribute is used when we want to declare the CSS style inline. The styleClass attribute is used when we want to use a predefined style in a CSS style sheet or inside a <style> tag in our page.
The following markup illustrates using the styleClass attribute to alter the style of error messages; it is a modified version of the input page we saw in the previous section:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Enter Customer Data</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="styles.css" />
<h:form>
<h:messages styleClass="errorMsg"></h:messages>
<h:panelGrid columns="2"
columnClasses="rightAlign,leftAlign">
<h:outputText value="First Name:">
</h:outputText>
<h:inputText label="First Name"
value="#{customer.firstName}"
required="true" validator="#
{alphaValidator.validateAlpha}">
<f:validateLength minimum="2" maximum="30">
</f:validateLength>
</h:inputText>
<h:outputText value="Last Name:"></h:outputText>
<h:inputText label="Last Name"
value="#{customer.lastName}"
required="true"
validator="#{alphaValidator.validateAlpha}">
<f:validateLength minimum="2" maximum="30">
</f:validateLength>
</h:inputText>
<h:outputText value="Email:">
</h:outputText>
<h:inputText label="Email" value="#{customer.email}">
<f:validator validatorId="emailValidator" />
</h:inputText>
<h:panelGroup></h:panelGroup>
<h:commandButton action="confirmation" value="Save">
</h:commandButton>
</h:panelGrid>
</h:form>
</h:body>
</html>
The only difference between this page and the previous one is the use of the styleClass attribute of the <h:messages> tag. As we mentioned earlier, the value of the styleClass attribute must match the name of a CSS style defined in a cascading stylesheet that our page has access to.
In our case, we defined a CSS style for messages as follows:
.errorMsg {
color: red;
}
Then we used this style as the value of the styleClass attribute of our <h:messages> tag.
The following screenshot illustrates how the validation error messages look after implementing this change:
In this particular case, we just set the color of the error message text to red, but we are only limited only by CSS capabilities in setting the style of the error messages.
Pretty much any standard JSF component has both a style and a styleClass attribute that can be used to alter its style. The former is used for predefined CSS styles, the latter is used for inline CSS.