<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.3CR3//EN" "http://www.oasis-open.org/docbook/xml/4.3CR3/docbookx.dtd" 
[
<!ENTITY slider "rich:inputNumberSlider">
]
>

<section>
	<sectioninfo>
		<keywordset>
			<keyword>dragged handle control</keyword>
			<keyword>&slider;</keyword>
			<keyword>rich:inputNumberSlider</keyword>
			<keyword>HtmlInputNumberSlider</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.inputNumberSlider</entry>
				</row>
				<row>
					<entry>component-class</entry>
					<entry>
						org.richfaces.component.html.HtmlInputNumberSlider
					</entry>
				</row>
				<row>
					<entry>component-family</entry>
					<entry>org.richfaces.inputNumberSlider</entry>
				</row>
				<row>
					<entry>renderer-type</entry>
					<entry>
						org.richfaces.InputNumberSliderRenderer
					</entry>
				</row>
				<row>
					<entry>tag-class</entry>
					<entry>
						org.richfaces.taglib.InputNumberSliderTag
					</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:inputNumberSlider 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.HtmlInputNumberSlider;
...
HtmlInputNumberSlider mySlider = new HtmlInputNumberSlider();
...
]]></programlisting>
	</section>
	<section>
		<title>Details of Usage</title>
		<para>
			<emphasis role="bold">
				<property>&lt;rich:inputNumberSlider&gt;</property>
			</emphasis>
			is used to facilitate your data input with rich UI Controls.
		</para>
		<para>
			Here is the simplest variant of a slider 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 a numerical area and a
			<property>slider</property>
			property step.
		</para>


		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="XML"><![CDATA[<rich:inputNumberSlider></rich:inputNumberSlider>]]></programlisting>

		<para>It's generated on a page:</para>
		<figure>
			<title>
				Generated
				<emphasis role="bold">
					<property>&lt;rich:inputNumberSlider&gt;</property>
				</emphasis>
			</title>
			<mediaobject>
				<imageobject>
					<imagedata fileref="images/inputNumberSlider2.png" />
				</imageobject>
			</mediaobject>
		</figure>
		<para>
			Using
			<emphasis>
				<property>&quot;showInput&quot;</property>
			</emphasis>
			(default is &quot;true&quot;) and
			<emphasis>
				<property>&quot;enableManualInput&quot;</property>
			</emphasis>
			(default value is &quot;true&quot;) attributes, it&apos;s possible to
			output the input area near the slider, and make it read-only
			or editable.
		</para>
		<para>
			To remove input area use
			<code>showInput = &quot;false&quot;</code>
			:
		</para>

		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
		<programlisting role="XML"><![CDATA[<rich:inputNumberSlider minValue="1"  maxValue="100" showInput="false"/>]]></programlisting>
		<para>It's displayed at a page like:</para>
		<figure>
			<title>
				<emphasis role="bold">
					<property>&lt;rich:inputNumberSlider&gt;</property>
				</emphasis>
				without input field
			</title>
			<mediaobject>
				<imageobject>
					<imagedata fileref="images/inputNumberSlider3.png" />
				</imageobject>
			</mediaobject>
		</figure>
		<para>
			It&apos;s also possible to switch off displaying of
			&quot;boundary values&quot; and a toolTip showing on a
			handle drawing. This could be performed with the help of the
			component defined attributes:
			<emphasis>
				<property>&quot;showBoundaryValues&quot;</property>
			</emphasis>
			which is responsible for &quot;boundary values&quot;
			displaying (default is true) and
			<emphasis>
				<property>&quot;showToolTip&quot;</property>
			</emphasis>
			which is responsible for tooltTip displaying (default is
			&quot;true&quot;).
		</para>

		<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 a  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>
	      <!-- <para>Using the
            <emphasis>
                <property>&quot;orientation&quot;</property>
            </emphasis>
            attribute (default is &quot;horizontal&quot;) is possible to change slider position.
		</para>
		<para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[<rich:inputNumberSlider minValue="0"  maxValue="100" value="84" orientation="vertical"/>]]></programlisting>
        <para>It looks at page like:</para>
        <figure>
            <title>
                <emphasis role="bold">
                    <property>&lt;&slider;&gt;</property>
                </emphasis>
                in a vertical orientation.
            </title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/inputNumberSlider_vertical.png" />
                </imageobject>
            </mediaobject>
            </figure>-->
	      
	      <para>The <emphasis><property>&quot;showArrows&quot;</property></emphasis> boolean attribute when set to &quot;true&quot; enables additional controls for increasing and decreasing slider value. 
	            The controls (arrows by default) are placed in the beginning and in the end of slider track:</para>
	            <figure>
	                  <title><emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> with additional controls</title>
	                  <mediaobject>
	                        <imageobject>
	                              <imagedata fileref="images/inputNumberSlider4.png" />
	                        </imageobject>
	                  </mediaobject>
	            </figure>
	      <para>Clicking an arrow changes the driven value on the amount defined with <emphasis><property>&quot;step&quot;</property></emphasis> attribute. 
	            Keepeng an arrow control pressed changes the value continuous. 
	            Time that value takes to change from one step to another is definded with <emphasis><property>&quot;delay&quot;</property></emphasis> attribute.    
	      </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:inputNumberSlider&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:imputNumberSlider&gt;
						</property>
					</emphasis>
					component
				</para>
			</listitem>
		</itemizedlist>
	</section>

	<section>
		<title>Skin Parameters Redefinition</title>

		<table>
			<title>Skin parameters redefinition for a bar</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>
				</tbody>
			</tgroup>
		</table>

		<table>
			<title>Skin parameters redefinition for numbers</title>
			<tgroup cols="2">
				<thead>
					<row>
						<entry>Skin parameters</entry>
						<entry>CSS properties</entry>
					</row>
				</thead>
				<tbody>
					<row>
						<entry>generalFamilyFont</entry>
						<entry>font-family</entry>
					</row>
					<row>
						<entry>generalSizeFont</entry>
						<entry>font-size</entry>
					</row>
					<row>
						<entry>generalTextColor</entry>
						<entry>color</entry>
					</row>
					<row>
						<entry>panelBorderColor</entry>
						<entry>border-color</entry>
					</row>
					<row>
						<entry>generalSizeFont</entry>
						<entry>line-height</entry>
					</row>
				</tbody>
			</tgroup>
		</table>

		<table>
			<title>Skin parameters redefinition for a text field</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>generalFamilyFont</entry>
						<entry>font-family</entry>
					</row>
					<row>
						<entry>generalSizeFont</entry>
						<entry>font-size</entry>
					</row>
					<row>
						<entry>controlTextColor</entry>
						<entry>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 a hint</title>
			<tgroup cols="2">
				<thead>
					<row>
						<entry>Skin parameters</entry>
						<entry>CSS properties</entry>
					</row>
				</thead>
				<tbody>
					<row>
						<entry>tipBackgroundColor</entry>
						<entry>background-color</entry>
					</row>
					<row>
						<entry>tipBorderColor</entry>
						<entry>border-color</entry>
					</row>
					<row>
						<entry>generalFamilyFont</entry>
						<entry>font-family</entry>
					</row>
					<row>
						<entry>generalSizeFont</entry>
						<entry>font-size</entry>
					</row>
				</tbody>
			</tgroup>
		</table>

	</section>

	<section>
		<title>Definition of Custom Style Classes</title>

		<para>Style classes names that define styles for component elements are shown on the picture below:
		</para>

		<figure>
			<title>Style classes</title>
			<mediaobject>
				<imageobject>
					<imagedata
						fileref="images/inputNumberSlider_cn.png" />
				</imageobject>
			</mediaobject>
		      </figure>
		

		<table id="tab_cn">
			<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-slider</entry>
						<entry>
							Defines styles for a wrapper table element
							of a component
						</entry>
					</row>
					<row>
						<entry>rich-inslider-track</entry>
						<entry>Defines styles for a bar</entry>
					</row>
					<row>
						<entry>rich-inslider-handler</entry>
						<entry>
							Defines styles for a slider handler
						</entry>
					</row>
					<row>
						<entry>rich-inslider-handler-selected</entry>
						<entry>
							Defines styles for a selected handler
						</entry>
					</row>
					<row>
						<entry>rich-inslider-field</entry>
						<entry>Defines styles for a text field</entry>
					</row>
					<row>
						<entry>rich-inslider-right-num</entry>
						<entry>
							Defines styles for the right number
						</entry>
					</row>
					<row>
						<entry>rich-inslider-left-num</entry>
						<entry>
							Defines styles for the left number
						</entry>
					</row>
					<row>
					    <entry>rich-inslider-track-border</entry>
					    <entry>
					       Defines styles for track border
					    </entry>
					</row>
					<row>
						<entry>rich-inslider-tip</entry>
						<entry>Defines styles for a hint</entry>
					</row>
					<row>
					    <entry>inputNumberSlider-increase-vertical</entry>
					    <entry>Defines styles for the top arrow</entry>
					</row>
					<row>
                        <entry>inputNumberSlider-decrease-vertical</entry>
                        <entry>Defines styles for the bottom arrow</entry>
                    </row>
                    <row>
                        <entry>inputNumberSlider-increase-horizontal</entry>
                        <entry>Defines styles for the right arrow</entry>
                    </row>
                    <row>
                        <entry>inputNumberSlider-decrease-horizontal</entry>
                        <entry>Defines styles for the left arrow</entry>
                    </row>
				</tbody>
			</tgroup>
		</table>
		<para>
			In order to redefine styles for all
			<emphasis role="bold">
				<property>&lt;rich:inputNumberSlider&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_cn">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-inslider-tip{
    background-color: #FFDAB9;
    font-family: Arial Black;
}	
...]]></programlisting>

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

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

		<para>
			In the example a tip background color and font family was
			changed.
		</para>

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

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


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

</section>
