Adobe Open Source
   Home     Projects     Source     Documentation     Forums    About
Welcome Guest | Sign In
 

Gumbo FxNumericStepper - Functional and Design Specification



Summary and Background


FxNumericStepper is a FxSpinner that has a FxTextInput companion. It extends FxSpinner and adds a FxTextInput as a required SkinPart.

The numeric behavior of FxNumericStepper is exactly the same as FxSpinner. The scale is the same. The only additional behavior is that users may use the FxTextInput to edit the value.

Usage Scenarios


Allow users to specify a quantity either through the editable text field or to step the value via the arrow buttons.

Detailed Description


Behavior

See FxSpinner for detailed description of FxNumericStepper's behavior in terms of scale.

SkinParts

See FxSpinner for button SkinParts.

  • textInput - A FxTextInput that the user can use to change the value of the FxNumericStepper. Changes done through pressing the buttons and programmatically are also reflected by the FxTextInput.
Editing the Text Field

FxNumericStepper specifies an editable text field as a SkinPart called textInput. If textInput is edited, the new value is committed once the user performs an action that does not edit the text. These actions include:

  • Pressing the Enter key
  • Focusing out of the FxNumericStepper
  • Stepping either through the buttons or programmatically (calling step()).

The value of textInput is committed and then stepped regardless of whether step() is called programmatically or through user interaction.

Events

Whenever the value changes, a "valueCommit" event is dispatched (inherited from FxRange).
Whenever the value changes because of user interaction, a "change" event is dispatched.

Keyboard Behavior

vSpinner's keyboard controls still apply (except for Left and Right since they navigate the FxTextInput), but now, the text field can be edited. The value of the text field is committed whenever the user hits enter, focuses out of the FxNumericStepper using tab, or presses either of the buttons through up or down.

Focus

textInput always has focus when FxNumericStepper is in focus.

Not yet implemented features

-maxChars property

API Description


package mx.components
{

import flash.display.DisplayObject;
import flash.events.Event;

import mx.events.FlexEvent;
import mx.managers.IFocusManagerComponent;

/**
 *  The FxNumericStepper control lets the user select
 *  a number from an ordered set.
 *  The FxNumericStepper control consists of a single-line
 *  input text field and a pair of arrow buttons
 *  for stepping through the possible values.
 *  The Up Arrow and Down Arrow keys also cycle through 
 *  the values. An inputted value is committed whenever
 *  the user presses enter, focuses out of the
 *  FxNumericStepper, or steps the FxNumericStepper.
 * 
 *  @see mx.components.FxSpinner
 */
public class FxNumericStepper extends FxSpinner implements IFocusManagerComponent
{
    include "../core/Version.as";
    
    //--------------------------------------------------------------------------
    //
    //  Constructor
    //
    //--------------------------------------------------------------------------
    
    /**
     *  Constructor
     */  
    public function FxNumericStepper();
    
    //--------------------------------------------------------------------------
    //
    // SkinParts
    //
    //--------------------------------------------------------------------------

    [SkinPart]
    
    /**
     *  <code>textInput</code> is a SkinPart that defines a
     *  FxTextInput which allows a user to edit the value of
     *  the FxNumericStepper. The value is rounded and committed
     *  when the user presses enter, focuses out of
     *  the FxNumericStepper, or steps the FxNumericStepper.
     */
    public var textInput:FxTextInput;

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

    /**
     *  @private
     */
    override protected function partAdded(partName:String, instance:*):void;
    
    /**
     *  @private
     */
    override protected function partRemoved(partName:String, instance:*):void;

    /**
     *  @private
     */
    override protected function enableSkinParts(value:Boolean):void;

    /**
     *  @private
     */
    override public function setFocus():void;
    
    /**
     *  @private
     */
    override protected function isOurFocus(target:DisplayObject):Boolean;

    /**
     *  @private
     *  Calls commitTextInput() before stepping.
     */
    override public function step(increase:Boolean = true):void;
    
    /**
     *  Commits the current text of <code>textInput</code> as
     *  <code>value</code> after rounding the new value using
     *  <code>nearestValidValue</code>.
     */
    protected function commitTextInput():void;

    //--------------------------------------------------------------------------
    // 
    // Event Handlers
    //
    //--------------------------------------------------------------------------
    
    //--------------------------------- 
    // Keyboard handlers
    //---------------------------------
    
    /**
     *  When the enter key is pressed, FxNumericStepper commits the
     *  text currently displayed.
     */
    protected function textInput_enterHandler(event:Event):void;
}

}

B Features


QA


Yes


Flex SDK Project
Home
About
Versions
Downloads
Source
Bug Database
Submitting a Patch
Developer Documentation
Forums
License

Pages
Comments

Other Projects
BlazeDS
Cairngorm
Corelib
FlexUnit

More related projects ›
More Adobe projects ›
You must be logged in to comment.

Can text highlighting in a numericstepper (or similar components) be changed?
I have a black background and highlighting is invisible...
This on Flex SDK 3.0.3

DJC

Posted by David Cheney at Oct 21, 2008 21:36Updated by David Cheney
 
Last Modified: 2008-10-28 12:09:16.0
Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki.

Company | Online Privacy Policy | Terms of Use | Contact Us | Accessibility | Report Piracy | Permissions & Trademarks

Copyright @ 2008 Adobe Systems Incorporated.
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.
Search powered by Google