Home Tutorial Flex Flex-components Flex NumericStepper

 
 

Share on Google+Share on Google+
Flex NumericStepper
Posted on: April 2, 2010 at 12:00 AM
Advertisement
In this tutorial you can see how to use NumericStepper in flex and what is this.

NumericStepper in Flex:-

NumericStepper is a control in flex which is provide functionality to select a number from an ordered list. It is contain a input text field with a pair of arrows that are opposite direction. Through that pair of arrow user can increase value of NumericStepper to select up arrow and decrease value to select down arrow.

In this tutorial the NumericStepper created with the help of <mx:NumericStepper>tag. After that set value for NumericStepper which is started value that is display in NumericStepper box  and set id  for this control. This control have property which play important role when user use  NumericStepper that property is value and stepSize. The property stepSize  identify how much value increase and decrease value of numeric stepper  and you also set minimum and meximum value for this controls. In this tutorial we can illustrate how to create NumericStepper in flex. and how to use property and how to access of value.

Example:-

<?xml version="1.0"?>

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

<mx:Script>

<![CDATA[

import mx.events.NumericStepperEvent;

import mx.controls.Alert;

private function nsValue(event:NumericStepperEvent):void{

nsvalue.text = "Numeric Stepper Current Value is :"+mynstepper.value;

var nextvalue:Number = mynstepper.nextValue;

var previousvalue:Number = mynstepper.previousValue;

nsnvalue.text = "Numeric Stepper Next Value is :"+nextvalue;

nspvalue.text = "Numeric Stepper Previous Value is:"+previousvalue;

}

]]>

</mx:Script>

<mx:Panel width="400" height="200" horizontalAlign="center" verticalAlign="middle" title="Numeric Stemmer Example">

<mx:VBox>

<mx:HBox>

<mx:Text text="Choose NumericStepper Value :" fontWeight="bold"/>

<mx:NumericStepper id="mynstepper" value="0" stepSize="1" maximum="100" change="nsValue(event)"/>

</mx:HBox>

<mx:Text id="nsvalue"/>

<mx:Text id="nspvalue"/>

<mx:Text id="nsnvalue"/>

</mx:VBox>

</mx:Panel>

</mx:Application>

In this example you can see how to find next and previous value of NumericStepper. Output is-

Output:-

 

 

 

Advertisement

Related Tags for Flex NumericStepper:


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: April 2, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com