<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Recent changes to Spark TrackBase</title><link>https://sourceforge.net/adobe/flexsdk/wiki/Spark%2520TrackBase/</link><description>Recent changes to Spark TrackBase</description><atom:link href="https://sourceforge.net/adobe/flexsdk/wiki/Spark%20TrackBase/feed" rel="self"/><language>en</language><lastBuildDate>Thu, 06 Dec 2012 23:15:26 -0000</lastBuildDate><atom:link href="https://sourceforge.net/adobe/flexsdk/wiki/Spark%20TrackBase/feed" rel="self" type="application/rss+xml"/><item><title>WikiPage Spark TrackBase modified by SourceForge Editorial Staff</title><link>https://sourceforge.net/adobe/flexsdk/wiki/Spark%2520TrackBase/</link><description>&lt;pre&gt;--- v1
+++ v2
@@ -1,12 +1,12 @@
   
 
 
-&lt;div class="section"&gt;
+&lt;div class="section" markdown&gt;
 
   
 
 
-&lt;div class="column" style="display:inline-block; vertical-align:top; width:80%;"&gt;
+&lt;div class="column" style="display:inline-block; vertical-align:top; width:80%;" markdown&gt;
 
 
 
@@ -14,7 +14,7 @@
 
 ----  
   
-\\
+ 
 
 ## Summary and Background
 
@@ -372,16 +372,16 @@
 
 
 
-&lt;div class="column" style="display:inline-block; vertical-align:top; ;"&gt;
+&lt;div class="column" style="display:inline-block; vertical-align:top; ;" markdown&gt;
 
   
 [[ include ref='flexsdk_rightnav' ]]  
 
 
-&lt;div class="section"&gt;
+&lt;div class="section" markdown&gt;
 
   
-[[ include ref='site:open_commentlogin' ]]
+ 
 
 
 &lt;/div&gt;
&lt;/pre&gt;</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">SourceForge Editorial Staff</dc:creator><pubDate>Thu, 06 Dec 2012 23:15:26 -0000</pubDate><guid>https://sourceforge.net0e6b60c3f3d0cbabd1365472ec80bc3cb50ae8b8</guid></item><item><title>WikiPage Spark TrackBase modified by SourceForge Editorial Staff</title><link>https://sourceforge.net/adobe/flexsdk/wiki/Spark%2520TrackBase/</link><description>  


&lt;div class="section"&gt;

  


&lt;div class="column" style="display:inline-block; vertical-align:top; width:80%;"&gt;



# Spark TrackBase - Functional and Design Specification

----  
  
\\

## Summary and Background

----  
The **TrackBase** class subclasses [Range](Spark%20Range) and introduces the concepts of a thumb and a track for the thumb to move along. TrackBase also provides simple thumb dragging functionality for classes such as [SliderBase](Spark%20Slider) and [ScrollBarBase](Spark%20ScrollBar), both of which subclass TrackBase.

## Usage Scenarios

----

  * [SliderBase](Spark%20Slider) subclasses TrackBase.
  * [ScrollBarBase](Spark%20ScrollBar) subclasses TrackBase.

## Detailed Description

----

##### SkinParts

TrackBase consists of 2 SkinParts.

  * The **track** SkinPart is the button on which the thumb is positioned on. It represents the entire range of possible values.
  * The **thumb** SkinPart is a button which moves through the range of positions along the track based on the current value.

##### Inherited Properties (from [Range](Spark%20Range))

`value, minimum, maximum, snapInterval, stepSize` - See [Range](Spark%20Range%23Properties).

##### Behavior and Methods

`pointToValue()` - Takes a point relative to the track and converts it to a valid value. This method must be overridden by a subclass.

`updateSkinDisplayList()` - Used primarily to set the bounds and position of the thumb. It may be used to update other parts of the skin if necessary.

`system_mouseWheelHandler()` - Handles mouse wheel events.

`thumb_mouseDownHandler(), system_mouseMoveHandler(), system_mouseUpHandler()` - These methods handle different stages of dragging the thumb.

`track_mouseDownHandler()` - Handles the user clicking on the track.

##### Events

"valueCommit" - Whenever the value changes, a "valueCommit" event is dispatched (inherited from Range).  
"change" - Whenever the value changes because of user interaction such as dragging the thumb or clicking on the track, a "change" event is dispatched.  
"changeStart" - Dispatched at the start of a user interaction or when an animation begins.  
"changeEnd" - Dispatched at the end of a user interaction or when an animation ends.  
"thumbPress" - User presses a thumb.  
"thumbDrag" - User drags the thumb while it is still pressed.  
"thumbRelease" - User releases the thumb after it has been pressed.

## API Description

----  

    package spark.components.supportClasses
    {
    
    /**
     *  Dispatched when the value of the control changes
     *  as a result of user interaction.
     *
     *  @eventType flash.events.Event.CHANGE
     */
    &lt;a href="Event%28name%3D%26quot%3Bchange%26quot%3B%2C%20type%3D%26quot%3Bflash.events.Event%26quot%3B%29"&gt;Event(name="change", type="flash.events.Event")&lt;/a&gt;
    
    /**
     *  Dispatched at the end of a user interaction 
     *  or when an animation ends.
     *
     *  @eventType mx.events.FlexEvent.CHANGE_END
     */
    &lt;a href="Event%28name%3D%26quot%3BchangeEnd%26quot%3B%2C%20type%3D%26quot%3Bmx.events.FlexEvent%26quot%3B%29"&gt;Event(name="changeEnd", type="mx.events.FlexEvent")&lt;/a&gt;
    
    /**
     *  Dispatched at the start of a user interaction 
     *  or when an animation starts.
     *
     *  @eventType mx.events.FlexEvent.CHANGE_START
     */
    &lt;a href="Event%28name%3D%26quot%3BchangeStart%26quot%3B%2C%20type%3D%26quot%3Bmx.events.FlexEvent%26quot%3B%29"&gt;Event(name="changeStart", type="mx.events.FlexEvent")&lt;/a&gt;
    
    /**
     *  Dispatched when the thumb is pressed and then moved by the mouse.
     *  This event is always preceded by a &lt;code&gt;thumbPress&lt;/code&gt; event.
     * 
     *  @eventType spark.events.TrackBaseEvent.THUMB_DRAG
     */
    &lt;a href="Event%28name%3D%26quot%3BthumbDrag%26quot%3B%2C%20type%3D%26quot%3Bspark.events.TrackBaseEvent%26quot%3B%29"&gt;Event(name="thumbDrag", type="spark.events.TrackBaseEvent")&lt;/a&gt;
    
    /**
     *  Dispatched when the thumb is pressed, meaning
     *  the user presses the mouse button over the thumb.
     *
     *  @eventType spark.events.TrackBaseEvent.THUMB_PRESS
     */
    &lt;a href="Event%28name%3D%26quot%3BthumbPress%26quot%3B%2C%20type%3D%26quot%3Bspark.events.TrackBaseEvent%26quot%3B%29"&gt;Event(name="thumbPress", type="spark.events.TrackBaseEvent")&lt;/a&gt;
    
    /**
     *  Dispatched when the thumb is released, 
     *  meaning the user releases the mouse button after 
     *  a &lt;code&gt;thumbPress&lt;/code&gt; event.
     *
     *  @eventType spark.events.TrackBaseEvent.THUMB_RELEASE
     */
    &lt;a href="Event%28name%3D%26quot%3BthumbRelease%26quot%3B%2C%20type%3D%26quot%3Bspark.events.TrackBaseEvent%26quot%3B%29"&gt;Event(name="thumbRelease", type="spark.events.TrackBaseEvent")&lt;/a&gt;
    
    /**
     *  Normal State
     */
    &lt;a href="SkinState%28%26quot%3Bnormal%26quot%3B%29"&gt;SkinState("normal")&lt;/a&gt;
    
    /**
     *  Disabled State
     */
    &lt;a href="SkinState%28%26quot%3Bdisabled%26quot%3B%29"&gt;SkinState("disabled")&lt;/a&gt;
    
    /**
     *  Duration in milliseconds for a sliding animation
     *  when you click on the track to move a thumb. This style is
     *  used for both Sliders and Scrollbars. For Sliders, any click
     *  on the track will cause an animation using this style, as the thumb
     *  will move to the clicked position. For ScrollBars, this style is
     *  used only when shift-clicking on the track, which causes the thumb
     *  to move to the clicked position. Clicking on a ScrollBar track when
     *  the shift key is not pressed will result in paging behavior instead.
     *  The &lt;code&gt;smoothScrolling&lt;/code&gt; style must also be set on the
     *  ScrollBar to get animated behavior when shift-clicking.
     *  
     * &lt;p&gt;This duration is for an animation that covers the entire distance of the 
     * track; smaller distances will use a proportionally smaller duration.&lt;/p&gt;
     *
     *  @default 300
     */
    &lt;a href="Style%28name%3D%26quot%3BslideDuration%26quot%3B%2C%20type%3D%26quot%3BNumber%26quot%3B%2C%20format%3D%26quot%3BTime%26quot%3B%2C%20inherit%3D%26quot%3Bno%26quot%3B%29"&gt;Style(name="slideDuration", type="Number", format="Time", inherit="no")&lt;/a&gt;
    
    /**
     *  The TrackBase class is a base class for components with a track
     *  and one or more thumb buttons, such as Slider and ScrollBar. It
     *  declares two required skin parts: &lt;code&gt;thumb&lt;/code&gt; and
     *  &lt;code&gt;track&lt;/code&gt;. 
     *  The TrackBase class also provides the code for
     *  dragging the thumb button, which is shared by the Slider and ScrollBar classes.
     * 
     * 
     *  @see spark.components.supportClasses.Slider
     *  @see spark.components.supportClasses.ScrollBar
     */
    public class TrackBase extends Range
    {
        include "../core/Version.as";
    
        //--------------------------------------------------------------------------
        //
        //  Constructor
        //
        //--------------------------------------------------------------------------
    
        /**
         *  Constructor. 
         */
        public function TrackBase():void;
    
        //--------------------------------------------------------------------------
        //
        // Skins
        //
        //--------------------------------------------------------------------------
    
        &lt;a href="SkinPart%28required%3D%26quot%3Bfalse%26quot%3B%29"&gt;SkinPart(required="false")&lt;/a&gt;
        
        /**
         *  A skin part that defines a button
         *  that can be dragged along the track to increase or
         *  decrease the &lt;code&gt;value&lt;/code&gt; property.
         *  Updates to the &lt;code&gt;value&lt;/code&gt; property 
         *  automatically update the position of the thumb button
         *  with respect to the track.
         */
        public var thumb:Button;
        
        &lt;a href="SkinPart%28required%3D%26quot%3Bfalse%26quot%3B%29"&gt;SkinPart(required="false")&lt;/a&gt;
        
        /**
         *  A skin part that defines a button
         *  that, when  pressed, sets the &lt;code&gt;value&lt;/code&gt; property
         *  to the value corresponding with the current button position on the track.
         */
        public var track:Button; 
        
        //--------------------------------------------------------------------------
        //
        // Methods
        //
        //--------------------------------------------------------------------------
    
        /**
         *  Converts a track-relative x,y pixel location into a value between 
         *  the minimum and maximum, inclusive.  
         * 
         *  &lt;p&gt;TrackBase subclasses must override this method and perform conversions
         *  that take their own geometry into account.
         * 
         *  For example, a vertical slider might compute a value like this:
         *  &lt;pre&gt;
         *  return (y / track.height) * (maximum - minimum);
         *  &lt;/pre&gt;
         *  &lt;/p&gt;
         * 
         *  &lt;p&gt;By default, this method returns &lt;code&gt;minimum&lt;/code&gt;.&lt;/p&gt;
         * 
         *  @param x The x coordinate of the location relative to the track's origin.
         *  @param y The y coordinate of the location relative to the track's origin.
         *  @return A value between the minimum and maximum, inclusive.
         */
        protected function pointToValue(x:Number, y:Number):Number;
    
        //--------------------------------------------------------------------------
        // 
        // Event Handlers
        //
        //--------------------------------------------------------------------------
    
        /**
         *  Sets the bounds of skin parts, typically the thumb, whose geometry isn't fully
         *  specified by the skin's layout.
         * 
         *  &lt;p&gt;Most subclasses override this method to update the thumb's size, position, and 
         *  visibility, based on the &lt;code&gt;minimum&lt;/code&gt;, &lt;code&gt;maximum&lt;/code&gt;, and &lt;code&gt;value&lt;/code&gt; properties. &lt;/p&gt;
         * 
         *  &lt;p&gt;By default, this method does nothing.&lt;/p&gt;
         * 
         */
        protected function updateSkinDisplayList():void;
    
        /**
         *  Handles the &lt;code&gt;mouseWheel&lt;/code&gt; event when the component is in focus. The thumb is 
         *  moved by the amount of the mouse event delta multiplied by the &lt;code&gt;stepSize&lt;/code&gt;.  
         */ 
        protected function system_mouseWheelHandler(event:MouseEvent):void;
    
        //---------------------------------
        // Thumb dragging handlers
        //---------------------------------
        
        /**
         *  Handle mouse-down events on the scroll thumb. Records 
         *  the mouse down point in clickOffset.
         */
        protected function thumb_mouseDownHandler(event:MouseEvent):void;
    
        /**
         *  Capture mouse-move events anywhere on or off the stage.
         *  First, we calculate the new value based on the new position
         *  using calculateNewValue(). Then, we move the thumb to 
         *  the new value's position. Last, we set the value and
         *  dispatch a "change" event if the value changes. 
         */
        protected function system_mouseMoveHandler(event:MouseEvent):void;
    
        /**
         *  Handle mouse-up events anywhere on or off the stage.
         */
        protected function system_mouseUpHandler(event:MouseEvent):void;
    
        //---------------------------------
        // Track down handlers
        //---------------------------------
        
        /**
         *  Handle mouse-down events for the scroll track. Subclasses
         *  should override this method if they want the track to
         *  recognize mouse clicks on the track.
         */
        protected function track_mouseDownHandler(event:MouseEvent):void;
    }
    
    }
    

## B Features

----

## Additional Implementation Details

----  
none

## Prototype Work

----

## 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.

----  




&lt;div class="column" style="display:inline-block; vertical-align:top; ;"&gt;

  
[[ include ref='flexsdk_rightnav' ]]  


&lt;div class="section"&gt;

  
[[ include ref='site:open_commentlogin' ]]


&lt;/div&gt;



&lt;/div&gt;



&lt;/div&gt;



&lt;/div&gt;

</description><dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">SourceForge Editorial Staff</dc:creator><pubDate>Thu, 15 Mar 2012 18:12:35 -0000</pubDate><guid>https://sourceforge.net130ea985529452ce42b47c781701de7ec6ad8d1b</guid></item></channel></rss>