NumericStepper in Flex


 

NumericStepper in Flex

NumericStepper control of Flex is used to select a number from a set. This Control looks like a list box which contains a text box and two arrow buttons for moving through the valid numbers.

NumericStepper control of Flex is used to select a number from a set. This Control looks like a list box which contains a text box and two arrow buttons for moving through the valid numbers.

NumericStepper

We can use NumericStepper control of Flex to select a number from a set. This Control looks like a list box which contains a text box and two arrow buttons for moving through the valid numbers.

As the direction indicates the up arrow is to display the values in the text box by one unit and similarly the down arrow is to decrease the values.

Users can type any number directly into the textbox.

The control arrows always appear to the right of the text field and when the use clicks the arrow, it is highlighted.

In the following example you can see that how you can set default , minimum , and maximum value of the NumericStepper, as well as you can set the step size:

Example 1:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel title="NumericStepper Example" width="20%" height="25%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" horizontalCenter="10" verticalCenter="10">

<mx:Label text="Click on the arrow to change the values"/>

<mx:NumericStepper value="10" minimum="2" maximum="20" stepSize="2" y="10"/>

</mx:Panel>

</mx:Application>

Output:

We can directly edit into the text box, if you do not set the minimum value and maximum value the NumericStepper will set these as 0 and 10 respectively. We can also set the step size in fraction like 0.01 etc.

Example 2:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel title="NumericStepper Example" width="20%" height="25%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" horizontalCenter="10" verticalCenter="10">

<mx:Label text="Click on the arrow to change the values"/>

<mx:NumericStepper stepSize="0.01"/>

</mx:Panel>

</mx:Application>

 

Output:

 

 

0

 

 

 

1

Ads