In my project, I wanted to have an spark TextInput to show currency values.
While formatting it should show unformatted number.
The way I did it is by creating a new CurrencyTextInput class extending spark TextInput.
Code for the component is (CurrencyTextInput.as):
The way to use this component is:
While formatting it should show unformatted number.
The way I did it is by creating a new CurrencyTextInput class extending spark TextInput.
Code for the component is (CurrencyTextInput.as):
package com.abcd.component
{
import flash.events.Event;
import flash.events.FocusEvent;
import spark.components.TextInput;
import spark.formatters.CurrencyFormatter;
public class CurrencyTextInput extends TextInput
{
public function CurrencyTextInput()
{
super();
formatter = new CurrencyFormatter();
formatter.currencySymbol = "£";
formatter.fractionalDigits = 2;
formatter.useGrouping = true;
formatter.useCurrencySymbol = true;
formatter.negativeCurrencyFormat = 1;
formatter.trailingZeros = true;
}
public var formatter:CurrencyFormatter = null;
public var formatterRegExp:RegExp = /[,£ ]/g;
[Inspectable(category = "General", defaultValue = "")]
override public function get text():String
{
return super.text.replace(formatterRegExp, "");
}
[Bindable("change")]
[Bindable("textChanged")]
[CollapseWhiteSpace] // Compiler will strip leading and trailing whitespace from text string.
override public function set text(value:String):void
{
super.text = formatter.format(value);
// Trigger bindings to textChanged.
dispatchEvent(new Event("textChanged"));
}
/**
* Flush out [,] and currency symbol characters before getting focus
* @param event
*/
override protected function focusInHandler(event:FocusEvent):void
{
super.focusInHandler(event);
if (this.focusEnabled)
super.text = text.replace(formatterRegExp, "");
}
/**
* Format data before lost focus event happen
* @param event
*/
override protected function focusOutHandler(event:FocusEvent):void
{
super.focusOutHandler(event);
super.text = formatter.format(text);
}
}
}The way to use this component is:
<fx:declarations>
<s:currencyformatter
currencysymbol="{resourceManager.getString(ApplicationConstants.RESOURCE_BUNDLE_NAME, 'currency.symbol')}"
fractionaldigits="2"
id="currencyFormatter"
negativecurrencyformat="1"
trailingzeros="true"
usecurrencysymbol="true"
usegrouping="true"/>
</fx:declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var currencyFormatterRegExp:RegExp = new RegExp('[,' + resourceManager.getString(ApplicationConstants.RESOURCE_BUNDLE_NAME, 'currency.symbol') + ' ]', 'g');
]]>
</fx:Script>
<component:CurrencyTextInput
width="217"
fontWeight="bold"
textAlign="right"
text="@{billingValue}"
formatterRegExp="{currencyFormatterRegExp}"
formatter="{currencyFormatter}" restrict="0-9"/>
Comments