TextAreaDecorator Fix For TextArea Component

Yesterday, I posted on how I was running into trouble with the TextArea component when trying to display HTML content with multiple images. The scrollbar/thumb would not initialize correctly. Today, I was able to narrow down the problem to a timing issue and offer a workaround that involved some voodoo: Asking the TextArea component to redraw itself after a certain amount of time. Where the voodoo came into place was determining exactly how much time was needed as the component (actually, the TextField used in the label) doesn't have an event to notify you that it has initialized with new content.

I'm happy to report that I now have a much better solution: I wrote a class that decorates a TextArea and handles the scrollbar fix for you automatically. (It's not a complete Decorator implementation as it doesn't pass unhandled requests to the actual component but I thought that would be overkill. You're more than welcome to implement this with a trusty __resolve if you feel the need to! :))

Here's a demonstration of the bug (complete with cheesy promotional material and thumbnail portrait of yours truly) and the workaround: The TextArea to the left is a regular one and the one on the right has the decorator applied. Notice the difference in thumb heights. Page down using the track in each one to see the bug more clearly.

Using the decorator couldn't be simpler. Here's the code from the demo above:

ActionScript:
  1. // Import the TextAreaDecorator
  2. import com.ariaware.arp.utils.TextAreaDecorator;
  3.  
  4. // Apply the Decorator to the second TextArea component
  5. var myTextAreaDecorator:TextAreaDecorator = new TextAreaDecorator ( secondTextArea );
  6. myTextAreaDecorator.watchAndFix();

As you can see, you create an instance of the decorator, passing it a reference to your TextArea component. Then, you call the watchAndFix() method before setting the text property of your TextArea. The decorator then starts listening for changes to the htmlText property of the TextArea's label. When it hears that the property has changed, it starts looking through the TextArea's label for external media, checking to see if they have loaded. Once all external media (jpgs, swfs) have loaded, it fixes the scrollbar/thumb by asking the TextArea to redraw itself (using its invalidate() method.)

Note: You have to call this method *every time* before you set the text property as the watch is removed each time it performs a fix. (This is to prevent circular references.)

Also note: This should only be used on HTML TextAreas containing images or swfs. The bug does not appear to be present in plain text TextAreas or HTML TextAreas that do not contain images/swfs.

I hope you find this fix useful. As always, please feel free to send me your comments and suggestions regarding this, ARP or whatever else you want to get off your chest :)

You can download the demo (TextAreaDecorator.zip; 193kb), which contains the FLA and TextAreaDecorator class. The class will be included, among quite a few other new goodies, in the next ARP release.

Comments