Create new RichFaces Documentation Jira issue
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.
JBoss.orgCommunity Documentation
A single line input field that lets selecting a number using controls near a text field. It's possible to change a value using "Up/Down" keyboard keys. The keyboard input in a field is possible if it isn't locked by the "enableManualInput" attribute. When arrow controls are pressed, the cursor can be moved in any way without losing a dragged state.
Fully skinnable control and input elements
3D look and feel with an easily customizable appearance
Attribute-managed positions of the controls (inside/outside of the input field)
Keyboard controls support
Optional disablement of the component on a page
Optional "cycled" mode of scrolling values
Optional manual/controls-only input into a value text field
Validation of manual input
<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 is "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:
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
"enableManualInput" 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.
The
"label"
attribute is a generic attribute. The
"label"
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" .
Table of <rich:inputNumberSpinner> attributes.
Table 6.199. 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 |
Table 6.200. Style classes (selectors) with the corresponding skin parameters
| Class (selector) name | Description | Skin Parameters | CSS properties mapped |
|---|---|---|---|
| .rich-spinner-buttons | Defines styles for all buttons | headerBackgroundColor | background-color |
| panelBorderColor | border-color | ||
| .rich-spinner-input | Defines styles for a wrapper <td> element for input fields | buttonSizeFont | font-size |
| buttonFamilyFont | font-family | ||
| .rich-spinner-input-container | Defines styles for a container | controlBackgroundColor | background-color |
| panelBorderColor | border-color |
Table 6.201. Style classes (selectors) without skin parameters
| Class name | Description |
|---|---|
| .rich-spinner-c | Defines styles for a wrapper <table> element of a component |
| .rich-spinner-button | Defines styles for a button |
You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.
On the component Live Demo page you can see the example of <rich:inputNumberSpinner> usage and sources for the given example.
