multimediacollege, Adobe Authorized Training Centre

You know, the Flex SDK is a pretty nice collection of visual component for quickly creating a rich internet application. But in the past couple of years that I’ve developed in Flex, I came across the usual issues with a framework, namely: it does a lot; it does a lot good; but it is just not doing exactly what I want it to do.

 

So there you go and set off to start creating your custom components. And once you’ve written a lot of these custom components, you can even create you own library or framework. But this is not the topic of this post. Maybe I’ll do something on that later. But this time I’ll show you one the components that I’ve had lying around for quite some time and came across a couple of days ago.

 

It’s called CurrencyInput and it’s what you’d call one of those little treasures when you start developing some component and then realize that you’ve already done this ages ago. What it does, is take a currency sign (or abbreviation) and place it inside a TextInput component at the beginning or end of the actual value, but you don’t have to worry about typing it or accidentally deleting it. The component takes care of the placement and you will not be able to remove it.

 

The nice thing about this component in my opinion is that it is not just one character that you can use as a currency symbol like “$” or “€”, but you can also use an entire string or abbreviation like for example “USD” or “EUR” or even “US dollar”. You can see a couple of example screenshots below.

 To make life even easier, I’ve arranged for the component to have code completion on the positioning of the currency symbol. To do this in Flex, you have to make the possible values for the component inspectable. It may sound hard, but actually it pretty simple as you can see in the piece of code below.

 

  [Inspectable(enumeration = "PRE,POST")]

  public function set symbolPosition(value:String):void {

    _symbolPosition = value;

  }

 

Another thing this component has, is a property to which you can set the number of decimal positions. Thedefault for the component is set to 2 decimals. All these positions will always be visible, so for example if you set the number of decimal positions to 3, the value will look something like “0,000 €”. When you type “123.4”, the dot gets converted automatically into that comma (her in Europe the comma is the decimal sign. I should probably find some time to make this region specific) and will make the value look like this: “123,400 €”. And when you start typing in front of the decimal sign, the zero that was there by default will automatically be replaced with the value you’ve just typed.

 

When you start deleting digits behind the comma, they will automatically be reset to zero so they always remain visible. Use the backspace throughout the entire component and the decimal sign will simply be skipped. Also, when you click on the component and the currency symbol is up front, then the cursor will be repositioned to the first editable character. To do this, I’ve used the selectionBeginIndex property of the TextInput base class as you can see here:

 

  private function reposition(event:MouseEvent):void {

    if((_currencySymbol != null)

       && (_currencySymbol.length > 0)) {

      var p:Number = this.selectionBeginIndex;

      if((_symbolPosition == PRE) 

         && (this.selectionBeginIndex < _currencySymbol.length)) {

        this.setSelection(_currencySymbol.length, _currencySymbol.length);

      }

    }

  }

 

I’ve called the component CurrencyInput, because I needed this feature for guess what… a currency input field. But of course it can be used for whatever numerical purpose you like, as long as the fixed text is at the front or at the back of the actual numerical value. It’s not yet the full blown MaskedTextInput that I also have lying around (but still needs some work), but it already does a part of it.

 

So, below you can find the source code. Feel free to use it in your applications and if you have some suggestions for some extras or if you find some bugs, you can always let me know and I’ll hopefully find some time to adjust the component.

 

CurrencyInput.as