scale - See Range
value wrapping - When the current value is at the maximum, stepping to the next value will set the current value to the minimum and vice versa.
This specification describes the proposed new Spinner class which extends Range in Gumbo.
Spinner extends from Range and adds two buttons as skin parts that allow someone to step the current value through its scale. NumericStepper will extend from Spinner. The primary motivations for adding this new class were:
By having the Spinner class, developers can be more flexible with the types of displays allowed. One can imagine having a Spinner controlling tabs or a menu by assigning different values to tabs or menu items. Also, NumericStepper was the only basic component that did not support accessibility. Spinner remedies this problem by allowing NumericStepper to be a spinner with the additional element of a TextInput.
Spinner controls a value through its two buttons, incrementButton
and decrementButton
. These buttons use stepSize
to increment or decrement the values.
Spinner is composed of two skin parts that are buttons:
stepSize
, if possible, when pressed.stepSize
, if possible, when pressed.value, minimum, maximum, snapInterval, stepSize
- See Range.
allowValueWrap
- enables or disables value wrapping. The default is false.
incrementButton_buttonDownHandler(), decrementButton_buttonDownHandler()
- These protected methods handle the behavior of each button.
system_mouseWheelHandler()
- Handles mouse wheel events.
Whenever the value changes, a valueCommit
event is dispatched (inherited from Range). Whenever the value changes because of user interaction, a change
event is dispatched.
\
package spark.components
{
//--------------------------------------
// Styles
//--------------------------------------
/**
* The radius of the corners of this component.
*
* @default 2
*/
<a href="Style%28name%3D%26quot%3BcornerRadius%26quot%3B%2C%20type%3D%26quot%3BNumber%26quot%3B%2C%20format%3D%26quot%3BLength%26quot%3B%2C%20inherit%3D%26quot%3Bno%26quot%3B%2C%20theme%3D%26quot%3Bspark%26quot%3B%2C%20minValue%3D%26quot%3B0.0%26quot%3B%29">Style(name="cornerRadius", type="Number", format="Length", inherit="no", theme="spark", minValue="0.0")</a>
/**
* The alpha of the focus ring for this component.
*
* @default 0.5
*/
<a href="Style%28name%3D%26quot%3BfocusAlpha%26quot%3B%2C%20type%3D%26quot%3BNumber%26quot%3B%2C%20inherit%3D%26quot%3Bno%26quot%3B%2C%20theme%3D%26quot%3Bspark%26quot%3B%2C%20minValue%3D%26quot%3B0.0%26quot%3B%2C%20maxValue%3D%26quot%3B1.0%26quot%3B%29">Style(name="focusAlpha", type="Number", inherit="no", theme="spark", minValue="0.0", maxValue="1.0")</a>
/**
* @copy spark.components.supportClasses.GroupBase#style:focusColor
*
* @default 0x70B2EE
*/
<a href="Style%28name%3D%26quot%3BfocusColor%26quot%3B%2C%20type%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%2C%20theme%3D%26quot%3Bspark%26quot%3B%29">Style(name="focusColor", type="uint", format="Color", inherit="yes", theme="spark")</a>
/**
* @copy spark.components.supportClasses.GroupBase#style:symbolColor
*
* @default 0x000000
*/
<a href="Style%28name%3D%26quot%3BsymbolColor%26quot%3B%2C%20type%3D%26quot%3Buint%26quot%3B%2C%20format%3D%26quot%3BColor%26quot%3B%2C%20inherit%3D%26quot%3Byes%26quot%3B%2C%20theme%3D%26quot%3Bspark%26quot%3B%29">Style(name="symbolColor", type="uint", format="Color", inherit="yes", theme="spark")</a>
//--------------------------------------
// Events
//--------------------------------------
/**
* Dispatched when the value of the Spinner control changes
* as a result of user interaction.
*
* @eventType flash.events.Event.CHANGE
*/
<a href="Event%28name%3D%26quot%3Bchange%26quot%3B%2C%20type%3D%26quot%3Bflash.events.Event%26quot%3B%29">Event(name="change", type="flash.events.Event")</a>
//--------------------------------------
// Skin states
//--------------------------------------
/**
* Normal State
*/
<a href="SkinState%28%26quot%3Bnormal%26quot%3B%29">SkinState("normal")</a>
/**
* Disabled State
*/
<a href="SkinState%28%26quot%3Bdisabled%26quot%3B%29">SkinState("disabled")</a>
/**
* A Spinner component selects a value from an
* ordered set. It uses two buttons that increase or
* decrease the current value based on the current
* value of the <code>stepSize</code> property.
*
* <p>A Spinner consists of two required buttons,
* one to increase the current value and one to decrease the
* current value. Users can also use the Up Arrow and Down Arrow keys
* and the mouse wheel to cycle through the values.
* An input value is committed when the user presses the Enter key,
* removes focus from the component, or steps the Spinner
* by pressing an arrow button or by calling the
* <code>changeValueByStep()</code> method.</p>
*
* <p>The scale of an Spinner component is the set of
* allowed values for the <code>value</code> property.
* The allowed values are the sum of the minimum with
* integer multiples of the <code>snapInterval</code> property
* which are less than or equal to the <code>maximum</code>value.
* For example:</p>
*
* <ul>
* <li><code>minimum</code> = -1</li>
* <li><code>maximum</code> = 10</li>
* <li><code>snapInterval</code> = 3</li>
* </ul>
*
* Therefore the scale is {-1,2,5,8,10}.
*
* @see spark.components.NumericStepper
* @see spark.skins.spark.SpinnerSkin
*/
public class Spinner extends Range implements IFocusManagerComponent
{
include "../core/Version.as";
//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------
/**
* Constructor.
*/
public function Spinner():void;
//--------------------------------------------------------------------------
//
// SkinParts
//
//--------------------------------------------------------------------------
//----------------------------------
// decrementButton
//----------------------------------
<a href="SkinPart%28required%3D%26quot%3Bfalse%26quot%3B%29">SkinPart(required="false")</a>
/**
* A skin part that defines the button that,
* when pressed, decrements the <code>value</code> property
* by <code>stepSize</code>.
*/
public var decrementButton:Button;
//----------------------------------
// incrementButton
//----------------------------------
<a href="SkinPart%28required%3D%26quot%3Bfalse%26quot%3B%29">SkinPart(required="false")</a>
/**
* A skin part that defines the button that,
* when pressed, increments the <code>value</code> property
* by <code>stepSize</code>.
*/
public var incrementButton:Button;
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
//----------------------------------
// valueWrap
//----------------------------------
/**
* Determines the behavior of the control for a step when the current
* <code>value</code> is either the <code>maximum</code>
* or <code>minimum</code> value.
* If <code>allowValueWrap</code> is <code>true</code>, then the
* <code>value</code> property wraps from the <code>maximum</code>
* to the <code>minimum</code> value, or from
* the <code>minimum</code> to the <code>maximum</code> value.
*
* @default false
*/
public function get allowValueWrap():Boolean;
public function set allowValueWrap(value:Boolean):void;
//--------------------------------------------------------------------------
//
// Event handlers
//
//--------------------------------------------------------------------------
/**
* Handle a click on the incrementButton. This should
* increment <code>value</code> by <code>stepSize</code>.
*/
protected function incrementButton_buttonDownHandler(event:Event):void;
/**
* Handle a click on the decrementButton. This should
* decrement <code>value</code> by <code>stepSize</code>.
*/
protected function decrementButton_buttonDownHandler(event:Event):void;
/**
* Handles the <code>mouseWheel</code> event
* when the component is in focus.
* The spinner is moved by the amount of the mouse event delta
* multiplied by the <code>stepSize</code>.
*/
protected function system_mouseWheelHandler(event:MouseEvent):void;
}
}
none so far
none
Prototype of Spinner has shown that it can be a very lightweight base class for NumericStepper and other custom controls.
none
none
Spinner depends on Range as its base class.
None - New Class
Provides accessibility for NumericStepper and similar controls.