Friday, October 8, 2010

Using the NumericStepper component

Today's tutorial is about the NumericStepper component.

This is quite often in all kinds of applications where user is offered to enter a number in a specific range. This component also allows the user to enter a number manually simply by clicking the text area.

There are a few properties for this component, that can be edited using AS3 or through the component inspector: enabled, maximum, minimum, stepSize, value, visible.

Enabled and visible are booleans and their usage is obvious - enabled is responsible for allowing the user to use the component and visible is used to make the component completely transparent.

Maximum and minimum are number values, those are the ones that determine the number range.

StepSize is also a number value and is used to set the number value which is being added or taken away from the number. By default it is set to 1, so the user is allowed to choose every number with an interval of 1: 1, 2, 3, 4, etc... If we set it to 5, the user will only be able to enter numbers with interval of 5: 5, 10, 15, 20, etc. Even if the user tries to enter '6' when stepSize is set to 5, it will automatically change to 5.

The value property is the starting number.

Here is a little example I made for this tutorial:


The code is pretty self-explanatory:

import fl.controls.NumericStepper;
import flash.text.TextField;

var thisYear:Date = new Date();

var cYear:NumericStepper = new NumericStepper();
addChild(cYear);
cYear.x = 55;
cYear.y = 40;
cYear.maximum = thisYear.fullYear;
cYear.minimum = 1900;
cYear.value = 2010;

var tText:TextField = new TextField();
addChild(tText);
tText.x = 40;
tText.y = 10;
tText.text = "Select your birth year:";
tText.height = 20;
tText.width = 150;
tText.selectable = false;

If you want to listen to the changes of the NumericStepper, use the Event.CHANGE event.

myStepper.addEventListener(Event.CHANGE, changeEffect);

Thanks for reading!

No comments:

Post a Comment