13
Dec
07

Rounding numbers in Flex using the NumberFormatter class

I was looking at the NumberFormatter class this evening and made this little demo that shows the four different types of rounding (nearest, up, down, and none) in action.
The following example shows how you can use the static NumberFormatter class in conjuction with the NumberBaseRoundType constants to round and format numbers based on a certain criteria.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/13/rounding-numbers-in-flex-using-the-numberformatter-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.formatters.NumberBaseRoundType;

            private function button_click(evt:MouseEvent):void {
                textInput.errorString = "";
                numberFormatter.format(textInput.text);
                if (numberFormatter.error) {
                    textInput.errorString = numberFormatter.error;
                }

                arrColl = new ArrayCollection();

                numberFormatter.rounding = NumberBaseRoundType.NEAREST;
                arrColl.addItem({type:numberFormatter.rounding,
                        value:numberFormatter.format(textInput.text)});

                numberFormatter.rounding = NumberBaseRoundType.UP;
                arrColl.addItem({type:numberFormatter.rounding,
                        value:numberFormatter.format(textInput.text)});

                numberFormatter.rounding = NumberBaseRoundType.DOWN;
                arrColl.addItem({type:numberFormatter.rounding,
                        value:numberFormatter.format(textInput.text)});

                numberFormatter.rounding = NumberBaseRoundType.NONE;
                arrColl.addItem({type:numberFormatter.rounding,
                        value:numberFormatter.format(textInput.text)});
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:NumberFormatter id="numberFormatter"
            precision="2"
            rounding="up" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="number:"
                    direction="horizontal">
                <mx:TextInput id="textInput"
                        text="2.0499"
                        restrict="[0-9.-]"
                        maxChars="6" />
                <mx:Button label="format"
                        click="button_click(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            rowCount="4" />

</mx:Application>

View source is enabled in the following example.


1 Response to “Rounding numbers in Flex using the NumberFormatter class”


  1. 1 Lucas Dec 13th, 2008 at 3:57 am

    Very good, thank’s!

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




December 2007
M T W T F S S
« Nov   Jan »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Badge Farm

  • Firefox 2
  • Powered by Redoable 1.2
  • Feeds burnt by Feedburner
  • Feed