<?xml version='1.0' encoding='UTF-8'?>
<section>
          <sectioninfo>
                    <keywordset>
                              <keyword>messages</keyword>
                              <keyword>rich:messages</keyword>
                              <keyword>HtmlMessages</keyword>
                    </keywordset>
          </sectioninfo>

          <table>
                    <title>Component identification parameters </title>
                    <tgroup cols="2">
                              <thead>
                                        <row>
                                                  <entry>Name</entry>
                                                  <entry>Value</entry>
                                        </row>
                              </thead>
                              <tbody>
                                        <row>
                                                  <entry>component-type</entry>
                                                  <entry>org.richfaces.component.RichMessages</entry>
                                        </row>
                                        <row>
                                                  <entry>component-class</entry>
                                                  <entry>org.richfaces.component.html.HtmlRichMessages</entry>
                                        </row>
                                        <row>
                                                  <entry>component-family</entry>
                                                  <entry>org.richfaces.component.RichMessages</entry>
                                        </row>
                                        <row>
                                                  <entry>renderer-type</entry>
                                                  <entry>org.richfaces.renderkit.html.HtmlRichMessagesRendere</entry>
                                        </row>
                                        <row>
                                                  <entry>tag-class</entry>
                                                  <entry>org.richfaces.taglib.RichMessagesTag</entry>
                                        </row>
                              </tbody>
                    </tgroup>
          </table>

          <section>
                    <title>Creating the Component with a Page Tag</title>
                    <para>To create the simplest variant of <property>message</property> on a page,
                              use the following syntax:</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
 	<rich:messages/>
...
]]></programlisting>
          </section>

          <section>
                    <title>Creating the Component Dynamically Using Java</title>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="JAVA"><![CDATA[import  org.richfaces.component.html.HtmlRichMessages;
...
HtmlRichMessages myMessages = new HtmlRichMessages();
...
]]></programlisting>
          </section>

          <section>
                    <title>Details of Usage</title>
                <para>The <emphasis role="bold"><property>&lt;rich:messages&gt;</property></emphasis> component is considered as JSF HTML <emphasis role="bold"><property>&lt;h:message&gt;</property></emphasis>, 
                      extended with following features:
                          <itemizedlist>
                                <listitem><para>Ajax support (the component does not require to be wrapped in <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> in order to be rendered during Ajax requests);</para></listitem>
                                <listitem><para>possibilty to add graphical markers (pictograms) to reinforce a message for both &quot;passed&quot; or &quot;failed&quot; states;</para></listitem>
                                <listitem><para>set of predefined CSS classes for customizing messages appearance.</para></listitem>                              
                          </itemizedlist>
                    </para>
                <para>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:</para>
                    
                <table>
                      <title>Facets</title>
                      <tgroup cols="2">
                            <thead>
                                  <row>
                                        <entry>Facet</entry>
                                        <entry>Description</entry>
                                  </row>
                            </thead>
                            <tbody>
                                  <row>
                                        <entry>errorMarker</entry>
                                        <entry>Defines marker for &quot;Error&quot; message severity class</entry>
                                  </row>
                                  <row>
                                        <entry>fatalError</entry>
                                        <entry>Defines marker for &quot;Fatal&quot; message severity class</entry>
                                  </row>
                                  <row>
                                        <entry>infoError</entry>
                                        <entry>Defines marker for &quot;Info&quot; message severity class</entry>
                                  </row>
                                  <row>
                                        <entry>warnError</entry>
                                        <entry>Defines marker for &quot;Warn&quot; message severity class</entry>
                                  </row>
                                  <row>
                                        <entry>passedError</entry>
                                        <entry>Defines marker if there is no message</entry>
                                  </row>
                            </tbody>
                      </tgroup>
                </table>
                
                <para>The following example shows different variants of customization of the component.</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[<rich:messages layout="table" tooltip="true" showDetail="false" showSummary="true" passedLabel="No Errors">
      <f:facet name="errorMarker">
            <h:graphicImage url="/image/error.png"/>
      </f:facet>
      <f:facet name="infoMarker">
            <h:graphicImage url="/image/info.png"/>
      </f:facet>
      <f:facet name="passedMarker">
            <h:graphicImage url="/image/passed.png"/>
      </f:facet>
</rich:messages>]]></programlisting>
                
                <para>The <emphasis role="bold"><property>&lt;rich:messages&gt;</property></emphasis> component keeps all messages for all components even after only one ajax-validated component  was updated.</para>                

          </section>
          
                  <section>
                    <title>Look-and-Feel Customization</title>

                    <para>For skinnability implementation, the components use a <emphasis>
                                        <property>style class redefinition method.</property>
                              </emphasis></para>

                    <para>There are no skin parameters and default predefined values. To redefine
                              the appearance of all <emphasis role="bold">
                                        <property>&lt;rich:messages&gt;</property>
                              </emphasis> components at once, you should only add to your style
                              sheets <emphasis>
                                        <property>style classes</property>
                              </emphasis> used by a <emphasis role="bold">
                                        <property>&lt;rich:messages&gt;</property>
                              </emphasis> component.</para>

          </section>

          <section>
                    <title>Definition of Custom Style Classes</title>

                    <para>On the screenshot there are classes names that define styles for component
                              elements.</para>

                    <figure>
                              <title>Classes names</title>

                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/messages_cn.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <table id="tab_msC">
                              <title>Classes names that define a component appearance</title>

                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Class name</entry>

                                                  <entry>Description</entry>
                                                  </row>
                                        </thead>

                                        <tbody>
                                                  <row>
                                                  <entry>rich-messages</entry>

                                                  <entry>Defines styles for a wrapper
                                                  element</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-messages-marker</entry>

                                                  <entry>Defines styles for a
                                                  marker</entry>
                                                  </row>

                                                  <row>
                                                  <entry>rich-messages-label</entry>

                                                  <entry>Defines styles for a
                                                  label</entry>
                                                  </row>

                                        </tbody>
                              </tgroup>
                    </table>

                    <para>In order to redefine styles for all <emphasis role="bold">
                                        <property>&lt;rich:messages&gt;</property>
                              </emphasis> components on a page using CSS, it&apos;s enough to
                              create classes with the same names (possible classes could be found in
                              the tables <link linkend="tab_msC"> above</link>) and define necessary
                              properties in them. </para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="CSS"><![CDATA[...
.rich-messages-label{
    font-style:italic;
}
...]]></programlisting>

                    <para>This is a result:</para>

                    <figure>
                              <title>Redefinition styles with predefined classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/messages_pc.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <para>In the example the font style for messages was changed.</para>

                    <para>Also it&apos;s possible to change styles of particular <emphasis
                                        role="bold">
                                        <property>&lt;rich:messages&gt;</property>
                              </emphasis> component. In this case you should create own style
                              classes and use them in corresponding <emphasis role="bold">
                                        <property>&lt;rich:messages&gt;</property>
                              </emphasis>
                              <emphasis>
                                        <property>styleClass</property>
                              </emphasis> attributes. An example is placed below:</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="CSS"><![CDATA[...
.myClass{
    color:red;
}

...]]></programlisting>
                    <para>The <emphasis>
                                        <property>&quot;errorClass&quot;</property>
                              </emphasis> attribute for <emphasis role="bold">
                                        <property>&lt;rich:messages&gt;</property>
                              </emphasis> is defined as it&apos;s shown in the example below:</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[<rich:messages ... errorClass="myClass"/>
]]></programlisting>

                    <para>This is a result:</para>

                    <figure>
                              <title>Redefinition styles with own classes and <emphasis>
                                                  <property>styleClass</property>
                                        </emphasis> attributes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/messages_oc.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

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



          </section>
          <section>
                    <title>Relevant Resources Links</title>
                    <para><ulink
                                        url="http://livedemo.exadel.com/richfaces-demo/richfaces/messsages.jsf?c=messages"
                                        >On the component LiveDemo page</ulink> you can see the example of <emphasis
                                        role="bold">
                                        <property>&lt;rich:messages&gt;</property>
                              </emphasis> usage and sources for the given example. </para>
          </section>
</section>
