JBoss.orgCommunity Documentation

Chapter 13. Output and messages

13.1. <rich:chart>
13.1.1. Basic usage
13.1.2. Data input
13.1.3. Chart look customization
13.1.4. Advanced customization
13.1.5. Interactivity options
13.1.6. <rich:chart> server-side events
13.1.7. <rich:chart> client-side events
13.1.8. JavaScript API
13.1.9. Reference data
13.2. <rich:message>
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:messages>
13.3.1. Basic usage
13.3.2. Appearance
13.3.3. Reference data
13.3.4. Style classes and skin parameters
13.4. <rich:notify>
13.4.1. Basic usage
13.4.2. Customizing notifications
13.4.3. Reference data
13.4.4. Style classes and skin parameters
13.5. <rich:notifyMessage>
13.5.1. Basic usage
13.5.2. Reference data
13.5.3. Style classes and skin parameters
13.6. <rich:notifyMessages>
13.6.1. Reference data
13.6.2. Style classes and skin parameters
13.7. <rich:notifyStack>
13.7.1. Basic usage
13.7.2. Positioning notifications
13.7.3. Stacking notifications
13.7.4. Reference data
13.7.5. Style classes and skin parameters
13.8. <rich:progressBar>
13.8.1. Basic usage
13.8.2. Customizing the appearance
13.8.3. Update mode
13.8.4. Using set intervals
13.8.5. JavaScript API
13.8.6. Reference data
13.8.7. Style classes and skin parameters
13.9. <rich:tooltip>
13.9.1. Basic usage
13.9.2. Attaching the tool-tip to another component
13.9.3. Appearance
13.9.4. Update mode
13.9.5. <rich:tooltip> client-side events
13.9.6. JavaScript API
13.9.7. Reference data
13.9.8. Style classes and skin parameters

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

The <rich:chart> component allows the user to plot data and to create line, bar or pie charts. It uses up to five children tags <rich:chartSeries>, <rich:chartLegend>, <rich:chartXAxis>, <rich:chartYAxis> and <rich:chartPoint>. Each child tag customizes a particular aspect of the chart. All are optional except at least one <rich:chartSeries> tag is required.

Additionally the <rich:chart> component allows one to handle events using either a client-side JavaScript or using server-side listeners.

The <rich:chart> component accepts data by two means - by facelet iteration or by creating data model object.

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.

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

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>

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.

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:

Using the label attribute
The content of the label attribute is displayed over the progress bar.

Using nested child components
Child components, such as the JSF <h:outputText> component, can be nested in the <rich:progressBar> component to display over the progress bar.

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.