Menu

Spark Slider

SourceForge Editorial Staff

Spark Slider - Functional and Design Specification


Summary and Background


The SliderBase class is the base class for Slider controls. It inherits from TrackBase, which contains code common to both Sliders and ScrollBars. SliderBase provides basic functionality for Slider controls such as liveDragging, keyboard handling, track click handling, animation, and dataTips.

Usage Scenarios


  • Basic one thumb sliders using the default ticks and labels. Developer only has to set a few properties and change the number of thumbs in the skin.
  • Two thumb sliders that select a range instead of a certain value. (B-Feature)
  • Custom sliders with special tracks. Developer subclasses the Slider base class and overrides a few methods. He also must use a custom skin to match the custom slider's behavior. For example, a circular slider or a wavy slider.
  • Multiple thumb sliders. (B-Feature)
  • Basic sliders with customized ticks and/or labels.

Detailed Description


SkinParts

Slider consists of 2 SkinParts inherited from TrackBase

As well as a new skin part:

  • The dataTip is a dynamic skin part and is of type IFactory which is expected to create instances of type mx.core.IDataRenderer. It is used to display a formatted version of the value.
Inherited Properties

See Range.

New Properties
  • liveDragging - The default is false. When liveDragging is enabled, the thumb's value is committed as it is dragged along the track instead of when the thumb is released.
  • pendingValue - This protected property holds the temporary value of the slider during animation and user interaction. It is updated even if liveDragging is false.
  • showDataTip, dataTipFormatFunction and dataTipPrecision - These three properties are used to toggle and customize the dataTip.
Events

See Range and TrackBase.

Track Behavior

Clicking on the track should result in the thumb sliding to that position. The slide lasts for as long as the value of the style, slideDuration. If slideDuration is 0, then the thumb will snap to that position.

Keyboard Behavior

When the thumb has focus:

  • Left/Down Arrow - decreases the value by stepSize.
  • Right/Up Arrow - increase the value by stepSize.
  • Home/End - Change the value to the lowest and highest possible values for the thumb that has focus.

A future consideration is how to easily change the keyboard behavior in subclasses instead of assuming standard behavior based on the values. Consider the case of a reversed HSlider where the max is on the left instead of the right.

Methods

updateDataTip() - Subclasses must override this function to position the dataTip.

Additional Items to be considered
  • Slider with more than one thumb - (B feature)
  • enableTrack property - enables/disables the track. (can enable/disable through skin)
  • tickInterval/tickValues - TBD
  • labels - TBD
  • data tips - Implemented

API Description


package spark.components.supportClasses
{

//--------------------------------------
//  Styles
//--------------------------------------

include "../../styles/metadata/BasicInheritingTextStyles.as"

/**
 *  The alpha of the focus ring for this component.
 *
 *  @default 0.55
 */
<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#focusColor
 *
 *  @default 0xFFFFFF
 */ 
<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>

/**
 *  When <code>true</code>, the thumb's value is
 *  committed as it is dragged along the track instead
 *  of when the thumb button is released.
 *  
 *  @default true
 */
<a href="Style%28name%3D%26quot%3BliveDragging%26quot%3B%2C%20type%3D%26quot%3BBoolean%26quot%3B%2C%20inherit%3D%26quot%3Bno%26quot%3B%29">Style(name="liveDragging", type="Boolean", inherit="no")</a>

/**
 *  The SliderBase class lets users select a value by moving a slider thumb between 
 *  the end points of the slider track. 
 *  The current value of the slider is determined by the relative location of 
 *  the thumb between the end points of the slider, 
 *  corresponding to the slider's minimum and maximum values.
 *
 *  The SliderBase class is a base class for HSlider and VSlider.
 *
 *  @see spark.components.HSlider
 *  @see spark.components.VSlider
 */
public class SliderBase extends TrackBase implements IFocusManagerComponent
{
    include "../../core/Version.as";

    //--------------------------------------------------------------------------
    //
    //  Constructor
    //
    //--------------------------------------------------------------------------

    /**
     *  Constructor. 
     */
    public function SliderBase():void;

    //--------------------------------------------------------------------------
    //
    //  Skin parts
    //
    //--------------------------------------------------------------------------

    <a href="SkinPart%28required%3D%26quot%3Bfalse%26quot%3B%2C%20type%3D%26quot%3Bmx.core.IDataRenderer%26quot%3B%29">SkinPart(required="false", type="mx.core.IDataRenderer")</a>

    /**
     *  A skin part that defines a dataTip that displays a formatted version of 
     *  the current value. The dataTip appears while the thumb is being dragged.
     *  This is a dynamic skin part and must be of type IFactory.
     */
    public var dataTip:IFactory;

    //--------------------------------------------------------------------------
    //
    //  Properties
    //
    //--------------------------------------------------------------------------

    //--------------------------------- 
    //  dataTipformatFunction
    //---------------------------------

    /**
     *  Callback function that formats the data tip text.
     *  The function takes a single Number as an argument
     *  and returns a formatted String.
     *
     *  <p>The function has the following signature:</p>
     *  <pre>
     *  funcName(value:Number):Object
     *  </pre>
     *
     *  <p>The following example prefixes the data tip text with a dollar sign and 
     *  formats the text using the <code>dataTipPrecision</code> 
     *  of a SliderBase Control named 'slide': </p>
     *
     *  <pre>
     *  import mx.formatters.NumberBase;
     *  function myDataTipFormatter(value:Number):Object { 
     *      var dataFormatter:NumberBase = new NumberBase(".", ",", ".", ""); 
     *      return   "$ " + dataFormatter.formatPrecision(String(value), slide.dataTipPrecision); 
     *  }
     *  </pre>
     *
     *  @default undefined
     */
    public function get dataTipFormatFunction():Function;
    public function set dataTipFormatFunction(value:Function):void;

    //--------------------------------- 
    //  dataTipPrecision
    //---------------------------------

    /**
     *  Number of decimal places to use for the data tip text.
     *  A value of 0 means to round all values to an integer.
     *  This value is ignored if <code>dataTipFormatFunction</code> is defined.
     * 
     *  @default 2
     */
    public var dataTipPrecision:int;

    //----------------------------------
    //  pendingValue
    //----------------------------------

    /**
     *  The value the slider will have when the mouse button is released. This property
     *  also holds the temporary values set during an animation of the thumb if
     *  the <code>liveDragging</code> style is true; the real value is only set
     *  when the animation ends.
     * 
     *  <p>If the <code>liveDragging</code> style is false, then the slider's value is only set
     *  when the mouse button is released. The value is not updated while the slider thumb is
     *  being dragged.</p>
     * 
     *  <p>This property is updated when the slider thumb moves, even if 
     *  <code>liveDragging</code> is false.</p>
     *  
     *  @default 0
     *  @return The value implied by the thumb position. 
     */
    protected function get pendingValue():Number;
    protected function set pendingValue(value:Number):void;

    //--------------------------------- 
    //  showDataTip
    //---------------------------------

    /**
     *  If set to <code>true</code>, shows a data tip during user interaction
     *  containing the current value of the slider. In addition, the skinPart,
     *  <code>dataTip</code>, must be defined in the skin in order to 
     *  display a data tip. 
     *  @default true
     */
    public var showDataTip:Boolean;

    //--------------------------------------------------------------------------
    //
    // Methods
    //
    //--------------------------------------------------------------------------

    /**
     *  Used to position the data tip when it is visible. Subclasses must implement
     *  this function. 
     *  
     *  @param dataTipInstance The <code>dataTip</code> instance to update and position
     *  @param initialPosition The initial position of the <code>dataTip</code> in the skin
     */
    protected function updateDataTip(dataTipInstance:IDataRenderer, initialPosition:Point):void
}

}

B Features


Additional Implementation Details


none

Prototype Work


  • Working prototype of HSlider, CircularSlider

Compiler Work


none

Web Tier Compiler Impact


none

Flex Feature Dependencies


  • Depends on Range.

Backwards Compatibility


Syntax changes

None - New Class

Behavior

None

Warnings/Deprecation

None

Accessibility


Support Halo equivalent.

Performance


none.

Globalization


none

Localization


Compiler Features

none.

QA


Yes.



Related

Wiki: Flex 4
Wiki: Spark Range
Wiki: Spark TrackBase

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.