<?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>

          <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 demonstrate 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>&lt;value&gt;</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:inputNumberSpinner>
<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>
                    <title>Relevant Resources Links</title>
                    <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/graphValidator.jsf?c=graphValidator">
                              Here</ulink> you can see an example of <emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property>
                              </emphasis> usage and sources for the given example. </para>
          </section>

</section>
