⁠15.2. <rich:message>

The <rich:message> component renders a single FacesMessage message instance added for the component. The appearance of the message can be customized, and tool-tips can be used for further information about the message.
The <rich:message> component is rendered in the same way as the standard <h:message> component, but allows separate styling of the message summary and detail. It allows unified icons to be set using background images in predefined classes.
⁠
rich:message component

Figure 15.2. rich:message component

⁠15.2.1. Basic usage

The <rich:message> component needs the for attribute to point to the id identifier of the related component. The message is displayed after the FacesMessage message instance is created and added for the client identifier of the related component.
The <rich:message> component is automatically rendered after an Ajax request. This occurs without the use of an <a4j:outputPanel> component or a specific reference through the render attribute of the Ajax request source.
⁠

Example 15.4. rich:message example

​<h:outputText value="Zip:" />
​<h:inputText label="Zip" id="zip" required="true"
​             value="#{userBean.zip}">
​   <f:validateLength minimum="4" maximum="9" />
​</h:inputText>
​<rich:message for="zip" ajaxRendered="true"/>
The example contains a text input for zip codes. The simple validation requires the entered zip code to be between 4 and 9 characters long. The <rich:message> component references the input box, and reports any messages relating to the input validation.

⁠15.2.2. Appearance

The showSummary attribute specifies whether to display only a summary of the full message. The full message can be displayed in a tool-tip when hovering the mouse over the summary.
Use CSS (Cascading Style Sheets) to customize the appearance and icon for the <rich:message> component. To use a custom icon, set the background-image property to the icon graphic, as shown in Example 15.5, “Message icons”. Refer to Section 15.2.4, “Style classes and skin parameters” for a complete list of style classes for the <rich:message> component.
⁠

Example 15.5. Message icons

.rf-msg-err{
   background-image: url('#{facesContext.externalContext.requestContextPath}/images/icons/error.gif');
}
The example demonstrates how an icon for an error message could be added using CSS.

⁠15.2.3. Reference data

  • component-type: org.richfaces.Message
  • component-class: org.richfaces.component.html.HtmlMessage
  • component-family: javax.faces.Message
  • renderer-type: org.richfaces.MessageRenderer

⁠15.2.4. Style classes and skin parameters

⁠

Table 15.1. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-msg
This class defines styles for the message itself.
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-msg-err
This class defines styles for an error message.
errorColor
color
.rf-msg-ftl
This class defines styles for a fatal message.
errorColor
color
.rf-msg-inf
This class defines styles for an information message.
generalTextColor
color
.rf-msg-wrn
This class defines styles for a warning message.
warningTextColor
color
.rf-msg-ok
This class defines styles for a basic OK message.
generalTextColor
color
.rf-msg-sum, .rf-msg-det
These classes define styles for the summary or details of a message.
No skin parameters.