MobileNumericStepper, and MobileLabelStepper

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

Advertisements

About killerspaz

I'm a developer that loves to tinker with cutting edge technology. I have recently been playing with the Flash Platform (AS3/Flex), Android (custom roms, replacement apps, scripting), and looking at opportunities in the mobile markets.

Posted on 02.08.2011, in Flex and tagged , , , , , , , , , . Bookmark the permalink. 2 Comments.

  1. Really great job with this stepper object. Thanks a ton! I’m using it in my latest mobile project. Many props.

  1. Pingback: Tweets that mention MobileNumericStepper, and MobileLabelStepper « Killerspaz's Blog -- Topsy.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: