Flex - NumericStepper Control


Advertisements


Introduction

The NumericStepper control lets you select a number from an ordered set. The NumericStepper provides a TextInput control so that you can directly edit the value of the component.

The NumericStepper control also provides a pair of arrow buttons for stepping through the possible values. The Up Arrow and Down Arrow keys and the mouse wheel also cycle through the values.

Class declaration

Following is the declaration for spark.components.NumericStepper class:

public class NumericStepper 
   extends Spinner 
      implements IFocusManagerComponent, IIMESupport

Public properties

S.N.Property & Description
1

enableIME : Boolean

[read-only] A flag that indicates whether the IME should be enabled when the component receives focus.

2

imeMode : String

Specifies the IME (Input Method Editor) mode.

3

maxChars : int

The maximum number of characters that can be entered in the field.

4

maximum : Number

[override] Number which represents the maximum value possible for value.

5

valueFormatFunction : Function

Callback function that formats the value displayed in the skin's textDisplay property.

6

valueParseFunction : Function

Callback function that extracts the numeric value from the displayed value in the skin's textDisplay field.

Public methods

S.N.Method & Description
1

NumericStepper()

Constructor.

Methods inherited

This class inherits methods from the following classes:

  • spark.components.Spinner

  • spark.components.supportClasses.Range

  • spark.components.supportClasses.SkinnableComponent

  • mx.core.UIComponent

  • mx.core.FlexSprite

  • flash.display.Sprite

  • flash.display.DisplayObjectContainer

  • flash.display.InteractiveObject

  • flash.display.DisplayObject

  • flash.events.EventDispatcher

  • Object

Flex DropDownList Control Example

Let us follow the following steps to check usage of DropDownList control in a Flex application by creating a test application:

StepDescription
1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%" minWidth="500" minHeight="500"
   >
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>  
   <s:BorderContainer width="550" height="400" id="mainContainer"
   styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"
      verticalAlign="middle">
         <s:Label id="lblHeader" text="Form Controls Demonstration" 
         fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel id="numbericStepperPanel" title="Using NumericStepper"
            width="420" height="200">
            <s:layout>
               <s:VerticalLayout  gap="10" verticalAlign="middle" 
                  horizontalAlign="center"/>	
            </s:layout>
            <s:NumericStepper id="numericStepper" width="150"
               value="0" stepSize="5" minimum="0" maximum="50"/>
            <s:HGroup>
               <s:Label text="Selected Value :"/> 
               <s:Label text="{numericStepper.value}" fontWeight="bold"/>
            </s:HGroup>				
         </s:Panel>		
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex NumericStepper Control
flex_form_controls.htm

Advertisements