Flex TextArea - Extended

Posted At : July 17, 2007 1:30 PM | Posted By : Marko Tomic
Related Categories: Flex

Hi all,

Since this is my first blog post here, I think I should briefly introduce myself. I've been working with Mark for a couple of months and if you add an 'o' to his name, you get my name. I've been using ColdFusion for about 7 years and lately my interest has slightly shifted towards Flex/Air/AS3.

Recently I was working on a Flex project where one of the things I had to do was to implement validation to preventusers from typing in more than 'n' characters in a TextArea. Instead of just setting a maxlength, I decided to have some sort of visual alert when that number is reached as well as display the character count at the bottom-right of the text area.

So, I extended the TextArea class and added a few simple validations to it. Here is an example of how to call the custom TextArea class in AS:

import customUI.TextAreaValidator;

private function init():void {
// AS example var myText:TextAreaValidator = new TextAreaValidator();
var textWidth:Number = 400;
var textHeight:Number = 200;

myText.width = textWidth;
myText.height = textHeight;
myText.maxChars = 20;
myText.showTooltip = true;
addChild(myText);
}

If you set showTooltip to true, a red tooltip will appear near the TextArea indicating that the maxlength is reached.

In MXML, you would call the component like this:

<ns1:TextAreaValidator width="400" height="100" maxChars="10" />

This is a nice and simple example of how you can customise Flex components to suit your needs :)

Here's a screen shot: