Share on Google+Share on Google+

NumericStepper in Flex

Advertisement
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:

 

 

 

 

 

Advertisements

Advertisement

Posted on: January 22, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.