A TextField Highlighter Class for Flex

One of the features I've always felt was missing from Flash TextFields is the ability to highlight a range of characters with a color. What I did in the past was highlight words by changing their color, which is not nearly as satisifying. So, I was really happy to learn that TextFields in Flash 9 have a new method, getCharBoundaries, which returns the bounding rectangle of the specified character. With this method, we can create a rectangle of color to place behind the TextField, highlighting the specified character or characters.

Keith Peters of BIT-101 and Betaruce both have released demos of this exact functionality. However, their demos lack support for word wrapping, or resizing and scrolling of the TextField. Since text highlighting is on the wishlist for an app I'm developing, I figured I'd Flex it up a bit.

My Highlighter class supports word wrapping, resizing, scrolling, and more. You can highlight all instances of a string, or highlight the next and previous instances of the string. You can also use multiple Highlighters on the same TextField for combinations of colors and functionality.

Try out the demo. You may have to wait a few seconds for the sample text and fonts to load. I'm using embedded fonts and a StyleSheet here just to test that it will handle them, but TextFields in general seem to perform better without them. Oh, and you can right-click and view source too (love that about Flex!).

Here's how it works: when you pass the Highlighter a string to highlight, it finds the instances of that string in the TextField and stores the indexes of each character separately in an array. When the TextField is scrolled or resized, the Highlighter determines which of those characters are visible on the screen and draws a Bitmap rectangle behind them. On every SCROLL or RESIZE event, the Bitmap is cleared and highlights are calculated and redrawn.

This could get to be a pretty processor-intensive system, especially when you have a lot of characters being highlighted. This is where I was really pleasantly surprised by Flash Player 9. When I first started the project, I thought "this will never work - it'll be too slow". But Player 9 handles it like a champ. Unbelievably fast.

There are some things that can screw up TextField.getCharBoundaries, such as newline, carriage return, and other whitespace characters (see my last post). Using condenseWhite on your TextField will take care of that. In my case, I have to preserve whitespace, so some pre-processing of the text is necessary to strip out the offending characters.

Also, in my demo I have padding on my TextArea. This throws off getCharBoundaries, and I compensate by passing an xOffset and yOffset value into the Highlighter class.

Speaking of TextAreas... In the Flex components that use a TextField, there is a property called textField, which would be ideal for my Highlighter class to make use of. But, no. It is protected. Am I really going to extend every component in the Flex framework that I want to use my Highlighter class with? Please. For now, I iterate through the children of the TextArea until I find a TextField. It seems to work fine, but I'd prefer to not resort to such hackery. Anyone else got an alternative?

I'm really happy with the Highlighter class so far, but I'm no architect. I could really use some feedback on what should be public, private, protected, etc... and just architectural advice in general, I guess. How can I make this thing fit in better with the Flex framework? Are there changes I could make that would simplify things, or improve performance? Looking forward to your comments.