Menu

Spark Spinner

SourceForge Editorial Staff

Spark Spinner - Functional and Design Specification


Glossary


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.

Summary and Background


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:

  1. To allow more generic display components and more complex behavior than the Halo NumericStepper allowed.
  2. To have NumericStepper adhere to accessibility standards.

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.

Usage Scenarios

  • Base class for some Gumbo controls such as NumericStepper.
  • Base class or separate part for custom controls that utilize selection from an ordered set. Use cases include:
    1. Modified NumericStepper with different input/display
    2. Tabbing control (assign tabs to values)
    3. Mobile menu (assign menu items to values)

Detailed Description


Behavior

Spinner controls a value through its two buttons, incrementButton and decrementButton. These buttons use stepSize to increment or decrement the values.

SkinParts

Spinner is composed of two skin parts that are buttons:

  1. incrementButton increases the value by stepSize, if possible, when pressed.
  2. decrementButton decreases the value by stepSize, if possible, when pressed.
Inherited Properties

value, minimum, maximum, snapInterval, stepSize - See Range.

  • Note: Correct behavior is only implemented for stepSize >= 0.
New Properties

allowValueWrap - enables or disables value wrapping. The default is false.

Methods

incrementButton_buttonDownHandler(), decrementButton_buttonDownHandler() - These protected methods handle the behavior of each button.

system_mouseWheelHandler() - Handles mouse wheel events.

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.

Keyboard Behavior
  • Up increments the value
  • Down decrements the value.

\

API Description


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;

}

}

B Features


none so far

Additional Implementation Details


none

Prototype Work


Prototype of Spinner has shown that it can be a very lightweight base class for NumericStepper and other custom controls.

Compiler Work


none

Web Tier Compiler Impact


none

Flex Feature Dependencies


Spinner depends on Range as its base class.

Backwards Compatibility


Syntax changes

None - New Class

Accessibility


Provides accessibility for NumericStepper and similar controls.

Issues and Recommendations


  1. Should there be more descriptive events? For distinguishing between keyboard and mouse?


Related

Wiki: Flex 4
Wiki: Spark NumericStepper
Wiki: Spark Range

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.