sexta-feira, 1 de julho de 2011

Using commas instead of dots to represent decimal numbers in Flex NumericStepper

When we need to specify a decimal number here in Brazil (and in many other countries) we usually do not use dots. We use commas. So, instead of writing U$1.26 to represent one dollar and twenty-six cents, we write U$1,26.

The problem is that when we're using a Flex NumericStepper there isn't a place to set this. The only way I've found to get NumericStepper working with commas was to change the behaviour of the NumericStepper's TextInput. So I've created a different TextInput, called BrazilianNumberTextInput. Here it is:

package com.blogspot.wagnermezaroba.components
{
import mx.controls.TextInput;

public class BrazilianNumberTextInput extends TextInput {

override public function get text():String {
var t:String = super.text;
if ( t != null )
t = t.replace(/\./g, '').replace(/,/g, '.');
return t;
}
}
}


What I've done is simple. I replaced all the dots for nothing (that was the desired effect that we needed) and all the commas for dots. So NumericStepper will be able to parse the values. But we need to set NumericStepper to use our new TextInput component. I've done this in my css file:

mx|NumericStepper {
textInputClass: ClassReference("com.blogspot.wagnermezaroba.components.BrazilianNumberTextInput");
}


It's an ugly solution. But I haven't found any solution on the internet and so far I do not believe there is a different way to go.

And that's it. If you're going to use it, it would be good to set the restrict property, to constrain the user input and allow just numbers and commas.