messages rich:messages HtmlMessages

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.component.RichMessages
component-class | org.richfaces.component.html.HtmlRichMessages
component-family | org.richfaces.component.RichMessages
renderer-type | org.richfaces.renderkit.html.HtmlRichMessagesRendere
tag-class | org.richfaces.taglib.RichMessagesTag

## Creating the Component with a Page Tag

To create the simplest variant of message on a page, use the following syntax:

Example:

    ...
     	<rich:messages/>
    ...component is considered as JSF HTML

## Creating the Component Dynamically Using Java

Example:

    import  org.richfaces.component.html.HtmlRichMessages;
    ...
    HtmlRichMessages myMessages = new HtmlRichMessages();
    ...

## Details of Usage

The <rich:messages> component is considered as JSF HTML <h:messages>, extended with following features:

- Ajax support (the component does not require to be wrapped in <a4j:outputPanel> in order to be rendered during Ajax requests);

- possibilty to add graphical markers (pictograms) to reinforce a message for both "passed" or "failed" states;

- set of predefined CSS classes for customizing messages appearance.

There are two optional parts that could be defined for every message: marker and text label. The set of facets, which can be used for a marker definition, is shown below:

Facets

Facet | Description
--- | ---
errorMarker | Defines marker for "Error" message severity class
fatalMarker | Defines marker for "Fatal" message severity class
infoMarker | Defines marker for "Info" message severity class
warnMarker | Defines marker for "Warn" message severity class

The following example shows different variants of customization of the component.

Example:

    <rich:messages layout="table" tooltip="true" showDetail="false" showSummary="true">
          <f:facet name="errorMarker">
                <h:graphicImage url="/image/error.png"/>
          </f:facet>
          <f:facet name="infoMarker">
                <h:graphicImage url="/image/info.png"/>
          </f:facet>
     </rich:messages>

The <rich:messages> component keeps all messages for all components even after only one ajax-validated component was updated.

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method.

There are no skin parameters and default predefined values. To redefine the appearance of all <rich:messages> components at once, you should only add to your style sheets style classes used by a <rich:messages> component.

## Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

Classes names

Classes names that define a component appearance

Class name | Description
--- | ---
rich-messages | Defines styles for a wrapper element
rich-messages-marker | Defines styles for a marker
rich-messages-label | Defines styles for a label

In order to redefine styles for all <rich:messages> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:

    ...
    .rich-messages-label{
        font-style:italic;
    }
    ...

This is a result:

Redefinition styles with predefined classes

In the example the font style for messages was changed.

Also it's possible to change styles of particular <rich:messages> component. In this case you should create own style classes and use them in corresponding <rich:messages> styleClass attributes. An example is placed below:

Example:

    ...
    .myClass{
        color:red;
    }

    ...

The "errorClass" attribute for <rich:messages> is defined as it's shown in the example below:

Example:

    <rich:messages ... errorClass="myClass"/>

This is a result:

Redefinition styles with own classes and styleClass attributes

As it could be seen on the picture above, color of messages was changed.

## Relevant Resources Links

On the component LiveDemo page you can see the example of <rich:messages> usage and sources for the given example.