<?xml version='1.0' encoding='UTF-8'?>
<section>
          <sectioninfo>
                    <keywordset>
                              <keyword>input field</keyword>
                              <keyword>rich:inputNumberSpinner</keyword>
                              <keyword>HtmlInputNumberSpinner</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.inputNumberSpinner</entry>
                                        </row>
                                        <row>
                                                  <entry>component-class</entry>
                                                  <entry>
                                                  org.richfaces.component.html.HtmlInputNumberSpinner
                                                  </entry>
                                        </row>
                                        <row>
                                                  <entry>component-family</entry>
                                                  <entry>org.richfaces.inputNumberSpinner</entry>
                                        </row>
                                        <row>
                                                  <entry>renderer-type</entry>
                                                  <entry> org.richfaces.InputNumberSpinnerRenderer
                                                  </entry>
                                        </row>
                                        <row>
                                                  <entry>tag-class</entry>
                                                  <entry> org.richfaces.taglib.InputNumberSpinnerTag
                                                  </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[...
    <rich:inputNumberSpinner minValue="0" maxValue="100" step="1"/>	
...
]]></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.HtmlInputNumberSpinner;
...
HtmlInputNumberSpinner mySpinner = new HtmlInputNumberSpinner ();
...
]]></programlisting>
          </section>
          <section>
                    <title>Details of Usage</title>
                    <para>
                              <emphasis role="bold">
                                        <property>&lt;rich:inputNumberSpinner&gt;</property>
                              </emphasis> is used to facilitate your data input with rich UI
                              Controls. </para>
                    <para> Here is the simplest variant of <property>spinner</property> definition
                              with <emphasis>
                                        <property>&quot;minValue&quot;</property> , </emphasis>
                              <emphasis>
                                        <property>&quot;maxValue&quot;</property>
                              </emphasis> and <emphasis>
                                        <property>&quot;step&quot;</property>
                              </emphasis> (on default is &quot;1&quot;) attributes, which
                              define the beginning and the end of numerical area and a
                                        <property>spinner</property> step. </para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
    <rich:inputNumberSpinner minValue="1" maxValue="100"/>
...
]]></programlisting>
                    <para>It generates on a page:</para>
                    <figure>
                              <title> Generated <emphasis role="bold">
                                                  <property>&lt;rich:inputNumberSpinner&gt;</property>
                                        </emphasis>
                              </title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata
                                                  fileref="images/inputNumberSpinner2.png"
                                                  />
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    <para> There are also several attributes to define functionality peculiarities: </para>
                    <itemizedlist>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;cycled&quot;</property>
                                                  </emphasis> if the attribute is
                                                  &quot;true&quot; after the current value
                                                  reaches the border value it&apos;s be reversed
                                                  to another border value after next
                                                  increasing/decreasing. In other case possibilities
                                                  of next increasing/decreasing are locked </para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;disabled&quot;</property>
                                                  </emphasis> is an attribute that defines whether a
                                                  component is active on a page </para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;enableManualInput&quot;</property>
                                                  </emphasis> is an attribute that defines whether a
                                                  keyboard input is possible or only UI controls
                                                  could be used </para>
                              </listitem>
                    </itemizedlist>
                    <para> Moreover, to add e.g. some JavaScript effects, events defined on it are
                              used </para>
                    <itemizedlist>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;onchange&quot;</property>
                                                  </emphasis>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;onmouseover&quot;</property>
                                                  </emphasis>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;onclick&quot;</property>
                                                  </emphasis>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;onfocus&quot;</property>
                                                  </emphasis>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;onmouseout&quot;</property>
                                                  </emphasis>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para>etc.</para>
                              </listitem>
                    </itemizedlist>
                    <para> The <emphasis>
                                        <property>&quot;label&quot;</property>
                              </emphasis> attribute is a generic attribute. The <emphasis>
                                        <property>&quot;label&quot;</property>
                              </emphasis> attribute provides an association between a component, and
                              the message that the component (indirectly) produced. This attribute
                              defines the parameters of localized error and informational messages
                              that occur as a result of conversion, validation, or other application
                              actions during the request processing lifecycle. With the help of this
                              attribute you can replace the last parameter substitution token shown
                              in the messages. For example, {1} for
                                        <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>
                              , {2} for <code>&quot;ShortConverter.SHORT&quot;</code> .
                    </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> Default style classes are mapped on <emphasis>
                                        <property>skin parameters.</property>
                              </emphasis>
                    </para>

                    <para> There are two ways to redefine the appearance of all <emphasis
                                        role="bold">
                                        <property>&lt;rich:inputNumberSpinner&gt;</property>
                              </emphasis> components at once: </para>

                    <itemizedlist>
                              <listitem>
                                        <para>Redefine the corresponding skin parameters</para>
                              </listitem>

                              <listitem>
                                        <para> Add to your style sheets <emphasis>
                                                  <property>style classes</property>
                                                  </emphasis> used by a <emphasis role="bold">
                                                  <property>
                                                  &lt;rich:inputNumberSpinner&gt;
                                                  </property>
                                                  </emphasis> component </para>
                              </listitem>
                    </itemizedlist>
          </section>

          <section>
                    <title>Skin Parameters Redefinition</title>
                    <table>
                              <title>Skin parameters redefinition for a container</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        <tbody>
                                                  <row>
                                                  <entry>controlBackgroundColor</entry>
                                                  <entry>background-color</entry>
                                                  </row>
                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-color</entry>
                                                  </row>
                                                  <row>
                                                  <entry>subBorderColor</entry>
                                                  <entry>border-bottom-color</entry>
                                                  </row>
                                                  <row>
                                                  <entry>subBorderColor</entry>
                                                  <entry>border-right-color</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>
                    <table>
                              <title> Skin parameters redefinition for an input field </title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        <tbody>
                                                  <row>
                                                  <entry>buttonSizeFont</entry>
                                                  <entry>font-size</entry>
                                                  </row>
                                                  <row>
                                                  <entry>buttonFamilyFont</entry>
                                                  <entry>font-family</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>

          </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>Style classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata
                                                  fileref="images/inputNumberSpinner_cn.png"
                                                  />
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <table id="tab_cn1">
                              <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-spinner-c</entry>
                                                  <entry> Defines styles for a wrapper
                                                  table element of a component
                                                  </entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-spinner-input-container</entry>
                                                  <entry>Defines styles for a
                                                  container</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-spinner-input</entry>
                                                  <entry> Defines styles for a wrapper
                                                  &lt;td&gt; element for
                                                  input fields </entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-spinner-button</entry>
                                                  <entry>Defines styles for a
                                                  button</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-spinner-buttons</entry>
                                                  <entry>Defines styles for all
                                                  buttons</entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>

                    <para> In order to redefine styles for all <emphasis role="bold">
                                        <property>&lt;rich:inputNumberSpinner&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 table <link linkend="tab_cn1">above</link> ) and define necessary
                              properties in them. An example is placed below: </para>

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

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

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

                    <para> In the example an input text font style was changed. </para>

                    <para> Also it&apos;s possible to change styles of particular <emphasis
                                        role="bold">
                                        <property>&lt;rich:inputNumberSpinner&gt;</property>
                              </emphasis> component. In this case you should create own style
                              classes and use them in corresponding <emphasis role="bold">
                                        <property>&lt;rich:inputNumberSpinner&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{
    font-family: Arial Black;
}
...]]></programlisting>
                    <para> The <emphasis>
                                        <property>&quot;inputClass&quot;</property>
                              </emphasis> attribute for <emphasis role="bold">
                                        <property>&lt;rich:inputNumberSpinner&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: inputNumberSpinner ... inputClass="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/inputNumberSpinner_oc.png"
                                                  />
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <para> As it could be seen on the picture above, the font family for input text
                              was changed. </para>

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

</section>
