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
1enableIME : Boolean
[read-only] A flag that indicates whether the IME should be enabled when the component receives focus.
2imeMode : String
Specifies the IME (Input Method Editor) mode.
3maxChars : int
The maximum number of characters that can be entered in the field.
4maximum : Number
[override] Number which represents the maximum value possible for value.
5valueFormatFunction : Function
Callback function that formats the value displayed in the skin's textDisplay property.
6valueParseFunction : Function
Callback function that extracts the numeric value from the displayed value in the skin's textDisplay field.

Public methods

S.N.Method & Description
1NumericStepper()
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

Advertisements
Advertisements