Home Tutorial Flex Flex-components NumericStepper in Flex

 
 

Share on Google+Share on Google+
NumericStepper in Flex
Posted on: January 22, 2010 at 12:00 AM
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:

 

 

 

 

 

Advertisement

Related Tags for NumericStepper in Flex:


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.

Posted on: January 22, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com