Home > Adobe Flex/Air > Currency TextInput

Currency TextInput

In my project, i needed to create some action as below for TextInput:

  • Focus Out: Automatically format the inputted value as currency
  • Focus In: Remove all currency characters and display as normal Number
  • Text attribute: always return as normal number characters string (Without [,]  and [$])

One more requirement is that, it must be a components for later use.
currency

I think it’s enough introduction. Actually, this can be done easily by creating a class that extends TextInput class. I also override focusOutHandler() and focusInHandler() to process the display data as i want before showing it on TextInput. The last thing is Text property,  because i must use CurrencyFormatter to format data each time the focus is out, so if user call the Text attribute, the result which user can receive is a formatted string and cannot insert into a number column in database. To do that, i must remove all [,] and [$] out of the string.

Here is my source:

package components {

import flash.events.FocusEvent;
import mx.controls.TextInput;
import mx.formatters.CurrencyFormatter;

/**
*  Currency TextInput component
*
*/
public class CurrencyTextInput extends TextInput {

private var reg:RegExp = /[,$]/g;
private var formatter:CurrencyFormatter = null;

override public function get text():String {
return super.text.replace(reg, "");
}

/**
* Constructor
*/
public function CurrencyTextInput() {
// create new formatter
formatter = new CurrencyFormatter();
// set defafult currency symbol
formatter.currencySymbol = "$";
}

/**
* Format data before lost focus event happen
*
* @param    event
*/
override protected function focusOutHandler(event:FocusEvent):void {
text = formatter.format(text);

super.focusOutHandler(event);
}

/**
* Flush out [,] and [$] characters
* before getting focus
*
* @param    event
*/
override protected function focusInHandler(event:FocusEvent):void {

text = text.replace(reg, "");

super.focusInHandler(event);
}
}
}

And then, how to use it in mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*">
<custom:CurrencyTextInput id="unit_price" width = "150"/>
</mx:Application>

This is still simple but you can add other attributes to allow user to control the format pattern more easily.

Hope this help!

Advertisements
Categories: Adobe Flex/Air Tags:
  1. Alexánder Murcia M.
    May 28, 2010 at 5:07 AM

    Hi Si Phu,
    Thanks for this post because you helped me solve a big problem.

    I have a question:
    You can set the value of a style or property?

    For example:
    The TextInputCurrency, you have the style TextAlign = right (like a calculator)
    The property restrict = 0-9, so that the designer does not have to put those values to create the object.

    How is that done? Thanks again.

  2. March 31, 2011 at 4:30 AM

    Great job.

    I modified it a little for working with spark TextInput component instead of mx. Also I had a problem using it with controls with focusEnabled set to false (also, editable set to false), so I added a condition to the focusInHandler function (sorry my english is not that good):

    package as3.customControls {

    import flash.events.FocusEvent;
    import spark.components.TextInput;
    import mx.formatters.CurrencyFormatter;

    /**
    *  Currency TextInput component
    *
    */
    public class CurrencyTextInput extends TextInput {

    private var reg:RegExp = /[,$ ]/g;
    private var formatter:CurrencyFormatter = null;

    override public function get text():String {
    return super.text.replace(reg, “”);
    }

    /**
    * Constructor
    */
    public function CurrencyTextInput() {
    // create new formatter
    formatter = new CurrencyFormatter();
    // set defafult currency symbol
    formatter.currencySymbol = “$ “;
    }

    /**
    * Format data before lost focus event happen
    *
    * @param    event
    */
    override protected function focusOutHandler(event:FocusEvent):void {
    text = formatter.format(text);

    super.focusOutHandler(event);
    }

    /**
    * Flush out [,] and [$] characters
    * before getting focus
    *
    * @param    event
    */
    override protected function focusInHandler(event:FocusEvent):void {
    if (this.focusEnabled) {
    text = text.replace(reg, “”);
    }

    super.focusInHandler(event);
    }
    }
    }

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: