<?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'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;manualInput&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">
				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>
