The <rich:chart> tag and its optional children tags generate and customize the chart. The chart type is selected by a <rich:chartSeries> attribute. The only requirements for use of the <rich:chart> are selection of the chart type and to pass at least one series of data - explained below.

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

The chart configuration is split into multiple tags providing a clearer facelet API. To configure axes, their min/max values, and label use <rich:chartXAxis> or <rich:chartYAxis> tag. The <rich:chartLegend> allows one to set up the position of the legend and the order of the labels within it.

To adjust the chart component size you can use CSS class .richfaces-chart-container, to customize title use .richfaces-chart-title the placeholder. The chart itself is placed in the div with the CSS class .richfaces-chart.

The <rich:chart> can also be customized directly through JavaScript to allow the use of plugins or objects that are not directly supported by the component.

There are two ways to define the customization: the hooks attribute or a facet named hooks. The facet takes precedence over attribute when both are defined.

<h:outputScript>

    var hooks = {

        processOptions: [function(plot,options) {

                options.xaxes[0].tickFormatter = function (value, axis) {

                    return value.toLocaleString('en-US', {minimumFractionDigits: 2});

                };

        }]

    };

</h:outputScript>

<rich:chart hooks="hooks" />



<rich:chart>

    <f:facet name="hooks">

        {

            processOptions: [function(plot,options) {

                    options.xaxes[0].tickFormatter = function (value, axis) {

                        return value.toLocaleString('en-US', {minimumFractionDigits: 2});

                    };

            }]

        }

    </f:facet>

</rich:chart>

In the above samples, the <rich:chart> is configured to display the label on x-axis according to US locale (e.g. 45,324.23).

The <rich:chart> component does not only create static charts.

The plothover and plotclick handlers are given an event-object that contains the deatils of which point fired the event.

function log(e){
           	console.log("Series index: "+
                 	e.data.seriesIndex +" DataIndex: "+
                 	e.data.dataIndex+' ['+e.data.x+','+e.data.y+']');
}

To access the jQuery widget of the component, use the componentID + chart

Example

<rich:chart id="priceChart">

$(document.getElementById("priceChart")).chart("resetZoom")

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.

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.

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.

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

Override the display property for all CSS message classes to customize the layout 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; }

.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; }

The <rich:notify> has two message customization attributes: summary is short text summarizing the message, while detail configures the detailed body of the message. Both attributes have their counterparts in form of facets with the same names as the corresponding attributes.

A notification appears on the page each time it is rendered, either on full-page or ajax requests. The notification remains on the screen for 8 seconds and then disappears. Users can close the notification with the close button in the top-right corner of the notification.

Notification stacks can be used to create sequences. For customization of stacking see the <rich:notifyStack> component.

There are several attributes that can change default behavior:

Note that skinning is common for <rich:notify>, <rich:notifyMessage> and <rich:notifyMessages>

The <rich:notifyMessage> component is built on top of <rich:notify>, the difference is in usage. The <rich:notifyMessage> component displays FacesMessage s associated with a given component, similar to <rich:message>: one notification is displayed for first FacesMessage in the stack that is risen either programatically or during conversion/validation of the component. The severity of the message determines the color and icon of the resulting notification.

Note that <rich:notifyMessage> shares common classes with <rich:notify>, since there is exactly one notification rendered for each JSF message.

The <rich:notifyMessage> specific classes are redefining the look for various message severity levels.

<rich:notifyMessages> shares style classes with <rich:notifyMessage>.

They are three alternative ways to bind notifications with a stack:

<rich:notifyStack position="bottomRight">

    <rich:notifyMessages />

</rich:notifyStack>

The sample above defines the stack explicitly, where notifications use the stack in which they are wrapped.

The sample bellow uses a notification rendered into the top-left corner of the screen. The notification is bound to a stack using it’s id.

<rich:notifyStack id="leftStack" position="topLeft" />



<rich:notify stack="leftStack" />

To redefine the position of a notification, one needs to define a stack and bind it with the given notification.

<rich:notifyStack> uses the position attribute to place the stack and it’s notifications into one of four corners: topRight (default), bottomRight, bottomLeft, topLeft.

There are two attributes which influences how notifications are placed into a stack:

The following sample shows a stack which will place new notifications up front - the incoming message will appear first, causing all notifications currently in stack to shift. Subsequently, messages at the end of stack will be then removed.

<rich:notifyStack method="first" />

On the other hand, stacking method last provides a method to place messages on the end of the stack, and when removing a notification, it is removed from the start, causing all other notifications to shift.

Basic usage of the <rich:progressBar> component requires the value attribute, which points to the property that holds the current progress value. When the value is greater than or equal to the minimum value ( 0 by default), the progress bar becomes active, and starts sending Ajax requests if in ajax mode.

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 mode for updating the progress bar is determined by the mode attribute, which can have one of the following values:

The <rich:progressBar> component can be set to constantly poll for updates at a constant interval. Use the interval component to set the interval in milliseconds. The progress bar is updated whenever the polled value changes. Polling is only active when the enabled attribute is set to true.

The <rich:progressBar> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:

For basic usage, define the tool-tip text using the value attribute. The <rich:tooltip> component is then automatically attached to the parent element, and is usually shown when the mouse cursor hovers.

Alternatively, the content of the tool-tip can be defined inside the <rich:tooltip> tags, and the value attribute is not used. This allows HTML tags to be used to define the content, and provides for rich content such as images, links, buttons, and other RichFaces components.

By default, the <rich:tooltip> component is positioned intelligently based on the position of the mouse cursor. Use the jointPoint attribute to specify a corner of the target component at which to display the tool-tip instead, and use the direction attribute to specify the direction the tool-tip will appear relative to that corner. Possible values for both attributes are: auto, autoLeft, autoRight, bottomAuto, bottomLeft, bottomRight, topAuto, topLeft, topRight. Use the horizontalOffset and verticalOffset attributes to specify the horizontal offset and vertical offset at which to display the tool-tip.

Use the showEvent attribute to specify when the tool-tip is shown. By default it appears when the attached component is hovered-over with the mouse. Use the hideEvent attribute to specify when the tool-tip is hidden. The default value is none, so the tool-tip remains shown. However, it can be linked to an event on the target component, such as the mouseout event.

Set followMouse="true" to cause the tool-tip to follow the user’s mouse movements.

The mode for updating the tool-tip is determined by the mode attribute, which can have one of the following values:

When using mode="ajax", define the loading facet. The tool-tip displays the content of the loading facet while loading the actual content from the server.

The <rich:tooltip> component supports the following client-side events:

The <rich:tooltip> component can be controlled through the JavaScript API. The JavaScript API provides the following functions: