Faking a currency numeric stepper in Flex 2

I was building a Flex 2 prototype for a customer just recently. Part of this prototype application were several forms to juggle with money amounts in NZ$ – a good opportunity to use a numeric stepper you might think.

Obviously, when dealing with money values in an application, you would like to have a currency symbol in the NumericStepper. When we were trying to achieve this effect, various approaches just didn’t work. I wasn’t able to apply the instance of the CurrencyFormatter to the value of the NumericStepper properly, either run into an issue with casting the datatypes or the numeric stepper just stayed on 0 all the time.

Anyway, we needed a quick solution, and as this application was using absolute positioning, we just used the following trick:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:CurrencyFormatter currencySymbol="NZ$" useThousandsSeparator="true" id="cf"/>
 <mx:NumericStepper x="10" y="36" minimum="0" maximum="10000000" stepSize="10000" id="numericstepper1" 
  focusOut="textinput1.visible=true" valueCommit="textinput1.visible=true" />
 <mx:Label x="10" y="10" text="What is your budget?" id="label2"/>
 <mx:TextInput x="10" y="36" text="{cf.format(numericstepper1.value)}" width="81" height="22" id="textinput1" 
  focusIn="textinput1.visible=false" />
</mx:Application>

What basically happens here is that the NumericStepper and a TextInput are positioned above each other and based on various Events (foucsIn, focusOut, valueCommit etc) the visibility of the two component instances is set to true or false. The TextInput’s text property is using the CurrencyFormatter to render a proper NZ$ value and binds to the value property of the NumericStepper. Somewhat nasty and not really how you want to do this in a real application, but it did the job for the prototype 😉