JBoss.orgCommunity Documentation

Chapter 13. Output and messages

13.1. <rich:message>
13.1.1. Basic usage
13.1.2. Appearance
13.1.3. Reference data
13.1.4. Style classes and skin parameters
13.2. <rich:messages>
13.2.1. Basic usage
13.2.2. Appearance
13.2.3. Reference data
13.2.4. Style classes and skin parameters
13.3. <rich:notify>
13.3.1. Basic usage
13.3.2. Customizing notifications
13.3.3. Reference data
13.3.4. Style classes and skin parameters
13.4. <rich:notifyMessage>
13.4.1. Basic usage
13.4.2. Reference data
13.4.3. Style classes and skin parameters
13.5. <rich:notifyMessages>
13.5.1. Reference data
13.5.2. Style classes and skin parameters
13.6. <rich:notifyStack>
13.6.1. Basic usage
13.6.2. Positioning notifications
13.6.3. Stacking notifications
13.6.4. Reference data
13.6.5. Style classes and skin parameters
13.7. <rich:progressBar>
13.7.1. Basic usage
13.7.2. Customizing the appearance
13.7.3. Update mode
13.7.4. Using set intervals
13.7.5. JavaScript API
13.7.6. Reference data
13.7.7. Style classes and skin parameters
13.8. <rich:tooltip>
13.8.1. Basic usage
13.8.2. Attaching the tool-tip to another component
13.8.3. Appearance
13.8.4. Update mode
13.8.5. <rich:tooltip> client-side events
13.8.6. JavaScript API
13.8.7. Reference data
13.8.8. Style classes and skin parameters

Read this chapter for details on components that display messages and other feedback to the user.

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.

Figure 13.1. rich:message component

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 13.1, “<rich:message>” for details on the <rich:message> component.

Figure 13.2. rich:messages component

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 13.1.2, “Appearance” for an example of message styling, and refer to Section 13.2.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 13.3, “Messages in a block”.

Figure 13.3. 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 13.4. 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 13.5. In-line messages

The <rich:notify> component serves for advanced user interaction, using notification boxes to give the user instant feedback on what's happening within the application. Each time this component is rendered, a floating notification box is displayed in the selected corner of the browser screen.

The <rich:notifyMessages> component is the same as the <rich:notifyMessage> component, but each of the available messages generates one notification.

<rich:notifyMessages> shares the same set of attributes with <rich:notifyMessage>

Figure 13.6. 

Notifications emited by <rich:notify>, <rich:notifyMessage> and <rich:notifyMessages> are displayed in top-right corner of the screen by default.

It is <rich:notifyStack> which defines where messages will appear and handles their stacking.

Stack also provides way how to remove messages from screen - when stack is re-rendered, current notifications are destroyed, freeing place for new notifications.

The <rich:progressBar> component displays a progress bar to indicate the status of a process to the user. It can update either through Ajax or on the client side, and the look and feel can be fully customized.

Figure 13.7. <rich:progressBar>

By default, the minimum value of the progress bar is 0 and the maximum value of the progress bar is 100. These values can be customized using the minValue and maxValue attributes respectively.

The progress bar can be labeled in one of two ways:

Define the initial and finish facets to customize the progress bar's appearance before progress has started and after progress has finished. When the current progress bar value is less than the minimum value, the initial facet is displayed. When the current progress bar is greater than the maximum value, the finish facet is displayed.

The <rich:tooltip> component provides an informational tool-tip. The tool-tip can be attached to any control and is displayed when hovering the mouse cursor over the control.

Figure 13.8. <rich:tooltip>