TextArea Explorer

– March 24, 2009

In this explorer I’m going to highlight everything I can think of that can be done to a TextArea. Most of the solutions – such as changing the lineHeight – comes from other developers. I’m just collecting everything I’ve found here as a central resource.

view source

Here is the MXML code declaring the TextArea I’ll be talking about throughout the rest of this post – notice the ID=’ta’ for reference.


<mx:TextArea
id="ta"
fontSize="{ _fontSize }"
leading="{ _leading }" />

ValidateNow!
To access TextArea properties, such as lineHeight, textHeight, etc., you’ll want to call ta.validateNow(); before hand – thanks @brandon_ellis for the tip. That runs the Layout Manager which validates everything. Then the values should be correct. I’ve run into numerous problems trying to get the textHeight, especially when using htmlText. It always seems to be wrong unless calling validateNow();

Accessing the unaccessible
When creating a TextArea with MXML you can access the leading and fontSize properties. But accessing ta.leading or ta.fontSize in Actionscript won’t work. A simple work around – hack – is to set the values to Bindable variables and then change those varables as needed.

Addendum: Nick Kwiatkowski points out in the comments that fontSize and leading are styles – which is pretty obvious when you stop and think about it for a second – and that’s why they aren’t accessible to Actionscript unless you use ta.setStyle( ‘fontSize’, value ); Thanks Nick.

The term leading is so preMil
Leading is just the line height of the TextArea. Why they don’t just call it lineHeight I have no idea. So what if Photoshop calls it leading – which is probably a hold over from Gutenberg or something. I’m a programmer. Not a type setter!

Anyhow, if you want to get the current leading value of TextArea you’ll need to do a little dirty work. Turns out that you can’t just ask. But if you look at the ta.htmlText you’ll see the markup code in there complete with the leading value. It would look something like this:

<TEXTFORMAT LEADING="2"><P ALIGN="LEFT">

I wrote this simple getter to suck the value out of there:

private function getLeading( ta:TextArea ):int {
// can't directly access the value for leading
ta.validateNow();
var leadingPosition:int = ta.htmlText.indexOf( 'LEADING' );
var leadingEndPosition:int = ta.htmlText.indexOf( '"', leadingPosition + 9 );
var defaultLeading:int = int( ta.htmlText.substring( leadingPosition + 9, leadingEndPosition ) );
return defaultLeading;
}

I could probably just assume that the position of LEADING in the htmlText will never change but what the hell. It easy enough to get the indexOf so that I know for sure I’m looking in the correct place. And besides, if the value goes into double-digits then I’ll have to look at a different substring.

All the above does is look for where the letters ‘leading‘ start. Then add 9 – number of characters in leading=”,  find where the next indexOf a double-quote starts from that point which will probably be either one or two characters away. ( If you have a value of leading with triple digits then you’re doing something wrong or trying to get into the Guinness book.

Addendum in the comments mrm suggests using regular expressions to find the leading value. Something like:
var match:Array = ta.htmlText.match(/<TEXTFORMAT[^><]+LEADING="(\d+)"[^><]*>/i);
var defaultLeading:int = match[1];

Number of lines
Why, why, why would the number of lines be internal? I’m sure it’s Deepas fault. :-) So to get the number of lines in your TextArea try this:

private function getNumberLines( ta:TextArea ):int {
ta.validateNow();
var numLines:uint = ta.mx_internal::getTextField().numLines;
return numLines;
}

To be fair the Flex Dev team is on average about 50 times smarter than me so maybe there is a good reason for numLines being internal.

What is like leading but different?
Try lineHeight. Leading is . . . um . . . you know, I’m not exactly sure what leading measures. But lineHeight is the height of a line in pixels. And of course you can’t just get it directly from the TextArea. You have to jump through yet another hoop – abet a small one.

private function getLineHeight( ta:TextArea ):int {
ta.validateNow();
var textLineMetrics:TextLineMetrics = ta.getLineMetrics( 0 );
var lineHeight:int = textLineMetrics.height;
return lineHeight;
}

Just how big is this thing?
Finally, if you need to know the pixel size of all of the text in the TextArea then just ask for ta.textHeight. Of course don’t forget to call ta.validateNow(); first or you’ll get a number that only resembles the textHeight.

Selecting Text
Programatically selecting text in a TextArea is simple. The problem is that unless the TextArea has focus you won’t be able to see what is selected. The trick is to give the TextArea focus after every change of the selection you make. That’s what I’m doing with the NumericSteppers that change the selectionBeginIndex and selectionEndIndex values.

Credits
I pulled all these examples from previous projects that I’ve worked on. But most of this I originally got from scowering other blogs – mostly blog.FlexExamples.com – so thanks everyone.

Tags: , , ,