djNumberSpinner - Dojo Number Spinner

Accepts a numeric value that is an increment of a starting value.

Category

Dojo Form

Syntax

<xe:djNumberSpinner attributes>content</xe:djNumberSpinner>
Table 1. Essential properties
Property Description
id Defaults to djNumberSpinner1, djNumberSpinner2, and so on.
value Binds the control to a data element.
defaultValue Specifies the initial value of the spinner. Do not omit.
smallDelta Increment when the user clicks up and down arrows to the right of the box, or the up and down keys,
largeDelta Increment when the user clicks the PgUp and PgDn keys.
Table 2. All properties
Category Properties
accessibility alt, tabIndex, title, waiRole, waiState
basics binding, defaultTimeout, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, timeoutChangeRate, trim, type, validatorExt
data constraints, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, javaType, largeDelta, promptMessage, rangeMessage, regExp, regExpGen, showReadOnlyAsDisabled, smallDelta, validator, validators, value, valueChangeListener, valueChangeListeners
dojo dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format displayMessageExt, lowercase, propercase, tooltipPosition, uppercase
styling disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box with a spinner appears on the page with a numeric value. The user can adjust the value by clicking up and down arrows to the right of the box, the up and down keys, and the PgUp and PgDn keys.

This control is not tested against the latest accessibility standards. The recommended accessible path is the Edit Box control.

Examples

This example consists of a Number Spinner bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable. Initially the spinner has a value of 0.1. The arrows adjust the spinner in increments of 0.1. The PgUp and PgDn keys adjust the spinner in increments of 1.0.
<xp:table>
	<xp:tr>
		<xp:td>Number Spinner</xp:td>
		<xp:td>
			<xe:djNumberSpinner id="djNumberSpinner1"
				value="#{sessionScope.djNumberSpinner1}" defaultValue="0.1"
				smallDelta="0.1" largeDelta="1">
			</xe:djNumberSpinner>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djNumberSpinner1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>