How to display a number with varying decimal separator in Flex - apache-flex

Question

After changing my OS's decimal separator as explained here:
( http://blogmines.com/blog/2010/03/11/how-to-change-the-decimal-separator-in-excel-2010/ ), I want to display a number in Flex that uses a comma for both the thousands separator and the decimal separator. Sounds simple enough, right?
I tried using three different NumberFormatters offered by Flex. Along the way, I learned that two of them didn't play well with others in the same class, even if using fully qualified class paths when declaring the variables, so I had to split them up into three classes, like so:
NF1 - spark.formatters.NumberFormatter
package dstrube
{
import flash.globalization.NumberParseResult;
import spark.formatters.NumberFormatter;
public class NF1
{
public static function get(value:String):String{
var nf1:NumberFormatter = new NumberFormatter();
var result:NumberParseResult = nf1.parse(value);
return nf1.format(result.value);
}
}
}
NF2 - flash.globalization.NumberFormatter
package dstrube
{
import flash.globalization.NumberParseResult;
import flash.globalization.NumberFormatter;
public class NF2
{
public static function get(value:String):String{
var nf2:NumberFormatter = new NumberFormatter("");// LocaleID.DEFAULT = same outcome as without
nf2.fractionalDigits = 2; //= same outcome as without
nf2.trailingZeros = true;
var result:NumberParseResult = nf2.parse(value);
//nf2.parseNumber(value); = NaN
return nf2.formatNumber(result.value)
}
}
}
NF3 - mx.formatters.NumberFormatter (deprecated)
package dstrube
{
//import mx.formatters.NumberBaseRoundType;
import mx.formatters.NumberFormatter;
public class NF3
{
public static function get(value:String):String{
var nf3:NumberFormatter = new NumberFormatter();
//nf3.rounding = NumberBaseRoundType.NEAREST; //no effect in this case
return nf3.format(value);
}
}
}
and finally, the main
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="init()"
>
<fx:Script>
<![CDATA[
import dstrube.NF1;
import dstrube.NF2;
import dstrube.NF3;
[Bindable]
public var s:String = "";
protected function init():void{
var value:String = "5558049.90360013";
s = "spark.formatters.NumberFormatter = " + NF1.get(value); //5,558,049.90
s += "\n flash.globalization.NumberFormatter = " + NF2.get(value);//5,558,049,00
s += "\n mx.formatters.NumberFormatter = " + NF3.get(value); //5,558,049.90360013
}
]]>
</fx:Script>
<s:TextArea id="textArea" text="{s}" width="100%" height="100%" />
</s:Application>
The smartest of the three NumberFormatters is flash.globalization.NumberFormatter for recognizing decimal separator, but it rounds incorrectly, showing 5,558,049,00 instead of 5,558,049,90
Any ideas?

Answer 1

You can either:
Explicitly setting the formatter's properties will give you the
output you require.
Set the formatter to use the default locale.
[Bindable] protected var formatted:String;
protected function init(event:FlexEvent):void
{
var formatter:NumberFormatter = new NumberFormatter();
// Option 1 set explicitly
formatter.decimalSeparator = ",";
formatter.fractionalDigits = 2;
formatter.trailingZeros = true;
// Option 2 set default locale to be the locale
formatter.setStyle("locale", LocaleID.DEFAULT);
formatted = formatter.format("5558049.90360013");
}
]]>
</fx:Script>
<s:Label text="{formatted}" />
The output is "5,558,049,90".

Answer 2

This way will display whatever the decimal separator is set to be in the OS's settings.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
initialize="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.formatters.NumberFormatter;
import flash.globalization.NumberFormatter;
[Bindable] protected var formatted:String;
protected function init(event:FlexEvent):void
{
var formatter:spark.formatters.NumberFormatter = new spark.formatters.NumberFormatter();
var nf2:flash.globalization.NumberFormatter = new flash.globalization.NumberFormatter("");
formatter.decimalSeparator = nf2.decimalSeparator;
formatter.fractionalDigits = 2;
formatter.trailingZeros = true;
formatted = formatter.format("5558049.90360013");
}
]]>
</fx:Script>
<s:Label text="{formatted}" />
</s:Application>