As Flex 4 (and in this case particularly Hero [v4.5]) works its way into the public, we continue to see components that aren’t there yet. Sometimes they do exist, but haven’t been optimized for mobile (this also has some ambiguity as to what that fully entails).

In the interim, we have to fend for ourselves and build custom components… Well, that’s not always all that fun, but also not always that bad!

I’ve done the dirty work, and created a MobileNumericStepper, as well as a MobileLabelStepper as a parent to it.

Whatcha Got?

Simply put, this is just a stepper. It mimics the Android style where buttons are above and below the text input, but is completely skinnable.
Also by default the bottom button is a flipped version of the top button. This is so you can use a single arrow graphic and the component will just flip it for you to save time.

A few key features:

  • min/max – set a minimum and max value
  • loopAtLimits – auto-loops to the opposite bound by default, but can be disabled. Ex: max = 100, when 101 is attempted, it will loop around to the min value
  • buttonRotate – Good for having just a single arrow icon, and flip it for the opposite direction.
  • stepTimerInitialDelay – When the user holds down a button, a timer starts to allow for repeated entries. This is the initial delay before starting the quick-stepping.
  • stepTimerRunningDelay – After the quick-stepping kicks in, this is how fast to update the next tick.

A Variant Forms!

There’s not really a WHOLE lot more to talk about, as it’s just a stepper; but the MobileLabelStepper version might interest you.

The label version of the component allows a developer to define label replacements for the number counterpart. For example, if using a display type of Month, then 3 = April (remember zero-based indices).
It also allows for bounds that the label type should allow, again in the month context we’d limit from 0 to 11.

Be careful to look at the following static vars (indexed by the displayType) if implementing a MobileLabelStepper:

  • BOUNDS_MAP – specifies an array which defines the lower and upper bounds of the stepper
  • LABEL_MAP – specifies an object that maps numbers to their label replacements. For examples, check the source for the TYPE_MONTH/TYPE_AM_PM implementations.

Date/Time Example at RunTime, fully skinned

Date/Time Example at RunTime, fully skinned

The Goods