15.3. <rich:messages>

⁠15.3. `<rich:messages>`

The <rich:messages> components works similarly to the <rich:message> component, but can display all the validation messages added for the current view instead of just a single message. Refer to Section 15.2, “<rich:message>” for details on the <rich:message> component.

⁠

Figure 15.3. rich:messages component

⁠15.3.1. Basic usage

The <rich:messages> component doesn't require any extra attributes for basic usage. It displays all messages relating to requests from components.

To limit the messages to a specific component, use the for attribute to reference the component's identifier.

To show only those messages that are not attached to specific components, set globalOnly="true".

The <rich:messages> 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.

⁠15.3.2. Appearance

The <rich:messages> component displays error messages for each validating component in the same container.

The <rich:messages> component can be further styled through CSS, the same as for the <rich:message> component. Refer to Section 15.2.2, “Appearance” for an example of message styling, and refer to Section 15.3.4, “Style classes and skin parameters” for a complete list of style classes for the <rich:message> component.

The layout of the messages can also be customized through CSS. By default, the messages are arranged in a block as shown in Figure 15.4, “Messages in a block”.

⁠

Figure 15.4. Messages in a block

Override the display property for all CSS message classes to customize the layout as follows:

Display messages in a list with no icons

To display the messages in a list format without the default icons, override the message styles as follows:

.rf-msg-err, .rf-msgs-err, .rf-msg-ftl, .rf-msgs-ftl, .rf-msg-inf, 
.rf-msgs-inf, .rf-msg-wrn, .rf-msgs-wrn, .rf-msg-ok, .rf-msgs-ok { 
   display: list-item;
   margin-left: 20px;
   padding-left: 0px; }

.rf-msg-err, .rf-msgs-err{ background-image:none; }

⁠

Figure 15.5. Messages in a list

Display in-line messages

To display the messages in line with text, override the message styles as follows:

.rf-msg-err, .rf-msgs-err, .rf-msg-ftl, .rf-msgs-ftl, .rf-msg-inf, 
.rf-msgs-inf, .rf-msg-wrn, .rf-msgs-wrn, .rf-msg-ok, .rf-msgs-ok { display:inline; }

⁠

Figure 15.6. In-line messages

⁠15.3.3. Reference data

component-type: org.richfaces.Messages
component-class: org.richfaces.component.html.HtmlMessages
component-family: javax.faces.Messages
renderer-type: org.richfaces.MessagesRenderer

⁠15.3.4. Style classes and skin parameters

⁠

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

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