Popa Mihai

PopaMihai.com – Flex, Flash, AIR and ActionScript articles and tutorials

Example of Using the CurrencyFormatter Class in Flex

2 comments

The CurrencyFormatter class formats a number as a currency value. When using the CurrencyFormatter in Flex you can specify the currency symbol, you can align the currency symbol the right or to the left of the amount, you can use a negative sign or not etc:

<mx:CurrencyFormatter
	alignSymbol="left|right" 
	currencySymbol="$"
	decimalSeparatorFrom="."
	decimalSeparatorTo="."
	precision="-1"
	rounding="none|up|down|nearest"
	thousandsSeparatorFrom=","
	thousandsSeparatorTo=","
	useNegativeSign="true|false"
	useThousandsSeparator="true|false" />

Here is an example that uses the  CurrencyFormatter:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.popamihai.com/2009/07/flex/example-of-using-the-currencyformatter-class-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" 
    creationComplete="formatCurrency()" viewSourceURL="srcview/index.html">
 
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            private function formatCurrency():void{
                formattedText.text = currencyFormatter.format(enteredNumber.text);
            }
            private function currencySymbolChanged( event:Event ):void{
                var radioBtn:RadioButton = event.currentTarget as RadioButton;
                currencyFormatter.currencySymbol = radioBtn.label;
            }
            private function alignSymbolChanged( event:Event ):void{
                var radioBtn:RadioButton = event.currentTarget as RadioButton;
                currencyFormatter.alignSymbol = radioBtn.label;
            }
            private function precisionChanged( event:Event ):void{
                var radioBtn:RadioButton = event.currentTarget as RadioButton;
                currencyFormatter.precision = radioBtn.label;
            }
            private function decimalSeparatorChanged( event:Event ):void{
                var radioBtn:RadioButton = event.currentTarget as RadioButton;
                currencyFormatter.decimalSeparatorTo = radioBtn.label;
            }
            private function thousandsSeparatorChanged( event:Event ):void{
                var radioBtn:RadioButton = event.currentTarget as RadioButton;
                currencyFormatter.thousandsSeparatorTo = radioBtn.label;
            }
            private function errorFunc():void{
                trace("error");
            }
        ]]>
    </mx:Script>
 
    <mx:CurrencyFormatter id="currencyFormatter" 
        currencySymbol="$" 
        alignSymbol="left"
        precision="2" 
        decimalSeparatorTo="." 
        thousandsSeparatorTo=","
        useThousandsSeparator="true"
        error="errorFunc()"
    />
 
    <mx:Form>
        <mx:FormItem label="enter number">
            <mx:TextInput id="enteredNumber" text="1234567"/>
        </mx:FormItem>
        <mx:FormItem label="formatted number">
            <mx:TextInput id="formattedText" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="formatString" click="formatCurrency()" />
        </mx:FormItem>
    </mx:Form>
 
    <mx:HBox horizontalAlign="left">
        <mx:Label text="Currency Symbol" />
        <mx:RadioButton groupName="group1" change="currencySymbolChanged(event)" label="$" selected="true"/>
        <mx:RadioButton groupName="group1" change="currencySymbolChanged(event)" label="€"/>
        <mx:RadioButton groupName="group1" change="currencySymbolChanged(event)" label="£"/>
    </mx:HBox>
    <mx:HBox autoLayout="false" horizontalAlign="center">
        <mx:Label text="Align Symbol" />
        <mx:RadioButton groupName="group2" change="alignSymbolChanged(event)" label="left" selected="true"/>
        <mx:RadioButton groupName="group2" change="alignSymbolChanged(event)" label="right"/>
    </mx:HBox>
    <mx:HBox horizontalAlign="center" >
        <mx:Label text="Precision" />
        <mx:RadioButton groupName="group3" change="precisionChanged(event)" label="1"/>
        <mx:RadioButton groupName="group3" change="precisionChanged(event)" label="2" selected="true"/>
        <mx:RadioButton groupName="group3" change="precisionChanged(event)" label="3"/>
    </mx:HBox>
    <mx:HBox horizontalAlign="center" >
        <mx:Label text="Decimal Separator To*" />
        <mx:RadioButton groupName="group4" change="decimalSeparatorChanged(event)" label="." selected="true"/>
        <mx:RadioButton groupName="group4" change="decimalSeparatorChanged(event)" label=","/>
        <mx:RadioButton groupName="group4" change="decimalSeparatorChanged(event)" label="_"/>
    </mx:HBox>
    <mx:HBox horizontalAlign="center" >
        <mx:Label text="Thousands Separator To*" />
        <mx:RadioButton groupName="group5" change="thousandsSeparatorChanged(event)" label="."/>
        <mx:RadioButton groupName="group5" change="thousandsSeparatorChanged(event)" label="," selected="true"/>
        <mx:RadioButton groupName="group5" change="thousandsSeparatorChanged(event)" label="_"/>
    </mx:HBox>
    <mx:Text text="* Decimal Separator To and Thousands Separator To can't have the same value" />
</mx:Application>

Here is an example that uses the CurrencyFormatter:

View Source is enabled in the above example. To view the source files right click on the swf and choose “View Source” from the context menu.

Written by Popa Mihai

July 27th, 2009 at 9:35 pm

Posted in Flex

Tagged with , ,

2 Responses to 'Example of Using the CurrencyFormatter Class in Flex'

Subscribe to comments with RSS or TrackBack to 'Example of Using the CurrencyFormatter Class in Flex'.

  1. [...] Example of Using the CurrencyFormatter Class in Flex [...]

  2. [...] Example of Using the CurrencyFormatter Class in Flex [...]

    Flex Formatters

    28 Jul 09 at 11:19 am

Leave a Reply