<?xml version="1.0" encoding="UTF-8"?>
<section>
          <sectioninfo>
                    <keywordset>
                              <keyword>rich:graphValidator</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.graphValidator</entry>
                                        </row>

                                        <row>
                                                  <entry>component-class</entry>

                                                  <entry>org.richfaces.component.html.HtmlgraphValidator</entry>
                                        </row>

                                        <row>
                                                  <entry>component-family</entry>

                                                  <entry>org.richfaces.graphValidator</entry>
                                        </row>

                                        <row>
                                                  <entry>renderer-type</entry>

                                                  <entry>org.richfaces.graphValidatorRenderer</entry>
                                        </row>

                                        <row>
                                                  <entry>tag-class</entry>

                                                  <entry>org.richfaces.taglib.graphValidatorTag</entry>
                                        </row>
                              </tbody>
                    </tgroup>
          </table>

          <section>
                    <title>Creating the Component with a Page Tag</title>

                    <para>To create the simplest variant on a page use the following syntax:</para>


                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
<h:outputText value="Name:" />
<h:inputText value="#{userBean.name}" id="name" required="true">
          <f:validateLength minimum="3" maximum="12"/>
          <rich:graphValidator event="onblur"/>
</h:inputText>
...]]></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.HtmlCalendar; 	
...
HtmlgraphValidator mygraphValidator= new HtmlgraphValidator();
...]]></programlisting>
          </section>

<section>
      <title>Details of usage</title>
          <para>
                The<emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property></emphasis>component behaves basically the same way as the <emphasis role="bold">
                              <property>&lt;rich:beanValidator&gt;</property>
                    </emphasis> The deference between these two components is that in order to
                    validate some input data with a <emphasis role="bold">
                              <property>&lt;rich:beanValidator&gt;</property>
                    </emphasis> component, it should be a nested element of an input component,
                    whereas <emphasis role="bold">
                              <property>&lt;rich:graphValidator&gt;</property>
                    </emphasis> wraps multiple input components and validates the data received from
                    them. </para>

          <para>The following example demonstrates a pattern of how the <emphasis role="bold">
                              <property>&lt;rich:graphValidator&gt;</property>
                    </emphasis> can be used:</para>
          <programlisting role="XML"><![CDATA[...
<rich:graphValidator>
     <h:panelGrid columns="3">
          <h:outputText value="Name:" />
          <h:inputText value="#{validationBean.name}" id="name">
               <f:validateLength minimum="2" />
          </h:inputText>
          <rich:message for="name" />
          <h:outputText value="Email:" />
          <h:inputText value="#{validationBean.email}" id="email" />
          <rich:message for="email" />
     </h:panelGrid>
</rich:graphValidator>
...]]></programlisting>

          <para>The data validation can be also performed using Hibernate Validator, the same way as
                    it is done with <emphasis role="bold">
                              <property>&lt;rich:beanValidator&gt;</property>
                    </emphasis>. </para>



          <para>The components&apos;s architecture provides an option to bind the component to a
                    managed bean, which is done with the <emphasis>
                              <property>&quot;value&quot;</property>
                    </emphasis> attribute. The attribute ensures that the entered data is valid
                    after the model is updated by revalidating the bean properties.</para>
          <para>Please look at the example below.</para>


          <programlisting role="XML"><![CDATA[...
<rich:graphValidator summary="Invalid values: " value="#{dayStatistics}">
     <a4j:repeat value="#{dayStatistics.dayPasstimes}" var="pt" id="table">
          <h:outputText value="#{pt.title}" />
          <rich:inputNumberSpinner minValue="0" maxValue="24" value="#{pt.time}" id="time" />
          <rich:message for="time" />
     </a4j:repeat>
</rich:graphValidator>
...]]></programlisting>


<para>Hence, the given above code will provide the functionality that is illustrated on the images below.</para>

          <figure>
                    <title>&quot;Games&quot; field did not pass validation</title>
                    <mediaobject>
                              <imageobject>
                                        <imagedata fileref="images/graphValidator11.png"/>
                              </imageobject>
                    </mediaobject>
          </figure>
          <para>As you can see from the picture the &quot;Games&quot; field did not pass validation, as <emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property>
          </emphasis> can be used to perform validation of a single input item. 
          </para>
   
          <figure>
                    <title>Total sum of  all input values is incorrect</title>
                    <mediaobject>
                              <imageobject>
                                        <imagedata fileref="images/graphValidator12.png"/>
                              </imageobject>
                    </mediaobject>
          </figure>
         <para> The figure above  shows that the entered data was revalidated after all fields were completed,  and the data did not pass revalidation since the total sum was incorrect. </para> 
</section>
      
      <section>
                    <title>Relevant Resources Links</title>
                    <para>
                          Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/graphValidator.jsf?c=graphValidator">GraphValidator page</ulink> at RichFaces LiveDemo for examples of component  usage and their sources.
                    </para>
          </section>

</section>
