unput field rich:inputNumberSpinner HtmlInputNumberSpinner

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.inputNumberSpinner
component-class | org.richfaces.component.html.HtmlInputNumberSpinner
component-family | org.richfaces.inputNumberSpinner
renderer-type | org.richfaces.InputNumberSpinnerRenderer
tag-class | org.richfaces.taglib.InputNumberSpinnerTag

## Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

Example:

    ...
        <rich:inputNumberSpinner minValue="0" maxValue="100" step="1"/>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlInputNumberSpinner;
    ...
    HtmlInputNumberSpinner mySpinner = new HtmlInputNumberSpinner ();
    ...

## Details of Usage

<rich:inputNumberSpinner> is used to facilitate your data input with rich UI Controls.

Here is the simplest variant of spinner definition with "minValue", "maxValue" and "step" (on default = "1") attributes, which define the beginning and the end of numerical area and a spinner step.

Example:

    ...
        <rich:inputNumberSpinner minValue="1" maxValue="100"/>
    ...

It generates on a page:

Generated inputNumberSpinner

There are also several attributes to define functionality peculiarities:

- "cycled" if the attribute is "true" 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
- "disabled" is an attribute that defines whether a component is active on a page
- "manualInput" is an attribute that defines whether a keyboard input is possible or only UI controls could be used

Moreover, to add e.g. some JavaScript effects, events defined on it are used

- onchange
- onmouseover
- onclick
- onfocus
- onmouseout
- etc.

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:imputNumberSpinner> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:inputNumberSpinner> component

## Skin Parameters Redefinition

Skin parameters redefinition for a container

Skin parameters | CSS properties
--- | ---
controlBackgroundColor | background-color
panelBorderColor | border-color
subBorderColor | border-bottom-color
subBorderColor | border-right-color

Skin parameters redefinition for an input field

Skin parameters | CSS properties
--- | ---
buttonSizeFont | font-size
buttonFamilyFont | font-family

## Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

Style classes

Classes names that define a component appearance

Class name | Description
--- | ---
rich-spinner-c | Defines styles for a wrapper table element of a component
rich-spinner-input-container | Defines styles for a container
rich-spinner-input | Defines styles for an input field
rich-spinner-button | Defines styles for a button

In order to redefine styles for all <rich:inputNumberSpinner> components on a page using CSS, it's enough to create classes with the same names and define necessary properties in them.

To change styles of particular <rich:inputNumberSpinner> components, define your own style classes in the corresponding <rich:inputNumberSpinner> attributes.

CSS code piece used on a page:

Example:

    ...
        . rich-spinner-input {
                font-style:italic;
            }
        .myClass {
                font-weight: bold;
            }
    ...

The component is defined in the following way:

Example:

    <rich:inputNumberSpinner inputClass="myClass" .../>

Hence, a font-style of all spinners is redefined on a page as well as a font-weight for an entry field of the particular spinner.

## Relevant Resources Links

Here you can see the example of <rich:inputNumberSpinner> usage and sources for the given example.