Web Standards, JavaScript, and Kittens

Menu

Updating Death Clock for Flex 4.6

Adobe has been talking lately about the next update to Flex and Flash Builder, version 4.6. There’s a lot of cool stuff planned, but some of the things that interest me most are the new UI components. You can read a good article on them here, What’s new in Flex 4.6 SDK and Flash Builder 4.6. I thought it might be interesting to update one of my own application, the Death Clock mobile app, to use some of these new components.

When I built the Death Clock application, one of the first things I ran into was handling the UI for picking gender and the month of your birth. Dropdowns just don’t work well on a mobile device. I ended up using a hybrid approach that used states and groups of radio buttons. You can read more about this in my original blog post from … wow… exactly one year ago. Man – I’d love to say I planned that but it was completely random! Anyway – be sure to look at that post for an example of the UI.

For my new application, I decided to get rid of this work around and make use of the new ToggleSwitch and DateSpinner classes. I thought the ToggleSwitch would be a good replacement for the gender selection and the date spinner would – obviously – replace the date drop downs. Here’s what the Flex code looks like for the original version, again, with the work around:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Death Clock" initialize="init()" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="0x000000">
<fx:Declarations>
<mx:NumberValidator id="dayValidator" source="{dayBorn}" property="text" allowNegative="false" minValue="1" maxValue="31"
invalidCharError="Day Born must be a number." integerError="Day Born must be a number." negativeError="Day Born must be a positive number."
lowerThanMinError="Day Born must be over 0." exceedsMaxError="Day Born must be lower than 31."/>

<mx:NumberValidator id="yearValidator" source="{yearBorn}" property="text" allowNegative="false" minValue="1900" maxValue="2020"
invalidCharError="Year Born must be a number." integerError="Year Born must be a number." negativeError="Year Born must be a positive number."
lowerThanMinError="Year Born must be over 1900." exceedsMaxError="Year Born must be lower than 2020." />

Share this:

Post navigation

Sponsors

The Author

I'm Raymond Camden, a developer advocate for IBM. My primary focus is on MobileFirst, hybrid mobile development, and client-side technologies. If you would like me to speak to your group, just drop me a line.