<?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 = &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>
        <emphasis>
          <property>&quot;cycled&quot;</property>
        </emphasis> if the attribute is <emphasis><property>&quot;true&quot;</property></emphasis> after the current value reaches the
        border value it's be reversed to another border value after next increasing/decreasing. In
        other case possibilities of next increasing/decreasing are locked </listitem>
      <listitem>
        <emphasis>
          <property>&quot;disabled&quot;</property>
        </emphasis> is an attribute that defines whether a component is active on a page </listitem>
      <listitem>
        <emphasis>
          <property>&quot;manualInput&quot;</property>
        </emphasis> is an attribute that defines whether a keyboard input is possible or only UI
        controls could be used</listitem>
    </itemizedlist>
    <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used</para>
    <itemizedlist>
      <listitem> onchange </listitem>
      <listitem> onmouseover </listitem>
      <listitem> onclick </listitem>
      <listitem> onfocus </listitem>
      <listitem> onmouseout </listitem>
      <listitem> etc. </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 “DoubleRangeValidator.MAXIMUM”, {2}
      for “ShortConverter.SHORT”.
    </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/inputNumberSpinner3.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 an input field</entry>
          </row>
          <row>
            <entry>rich-spinner-button</entry>
            <entry>Defines styles for a button</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_CS1.png"/>
        </imageobject>
      </mediaobject>
    </figure>
    
    <para>In the example an input text font style was changed.</para>
    
    <para>Also it’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’s shown in the example below:</para>
    
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![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_CS2.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"
        >Here</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>
