Flex Examples

The following entry shows how users can store an unformatted number and display it back to users when the TextInput control is being edited. When the text input control loses focus, the data is validated and formatted (if the data was valid) or focus is returned to the control if validation failed.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/using-the-currencyvalidator-and-currencyformatter-classes-to-validate-and-format-numbers/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            public var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            public var BulletCritical:Class;
        ]]>
    </mx:Script>

    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;
            import mx.events.ValidationResultEvent;

            private function formatString(evt:FocusEvent):void {
                var ti:TextInput = TextInput(evt.currentTarget);
                if (validateCurrency()) {
                    ti.data = ti.text;
                    ti.text = currencyFormatter.format(ti.data);
                } else {
                    ti.setFocus();
                }
            }

            private function unformatString(evt:FocusEvent):void {
                var ti:TextInput = TextInput(evt.currentTarget);
                ti.text = String(ti.data);
            }

            private function validateCurrency():Boolean {
                var isValid:Boolean = false;
                var result:ValidationResultEvent = currencyValidator.validate();
                switch (result.type) {
                    case ValidationResultEvent.VALID:
                        isValid = true;
                        image.source = BulletCheck;
                        break;
                    case ValidationResultEvent.INVALID:
                        currencyValidator.source.setFocus();
                        image.source = BulletCritical;
                        break;
                }
                return isValid;
            }
        ]]>
    </mx:Script>

    <mx:CurrencyFormatter id="currencyFormatter"
            currencySymbol="$"
            useThousandsSeparator="true"
            precision="2" />

    <mx:CurrencyValidator id="currencyValidator"
            currencySymbol="$"
            source="{textInput}"
            property="text" />

    <mx:Form>
        <mx:FormHeading label="Enter base price" />
        <mx:FormItem label="Price:" direction="horizontal" required="true">
            <mx:TextInput id="textInput"
                    data=""
                    focusIn="unformatString(event)"
                    focusOut="formatString(event)" />
            <mx:Image id="image" verticalAlign="bottom" width="20"  />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button id="button"
                    label="Validate"
                    click="validateCurrency()" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>