Autoscroll Textarea

One of the ways I like to debug my Flex applications is putting a TextArea item that is visible when needed to display certain items that usually would be display in a trace.  The benefit of this little trick is that I can see what is going on without having to go through Flex Builder.  Also, I happened to create a web service debugging application and it displayed the error and result text from the web service.  When displaying either debug or general result information, it is helpful if the TextArea scrolls up to show the latest information added.  I found code on the to do this in Flex 3, but things changed in Flex 4.  So I did a little searching and found some code that had a little too much code.  There is a warning at the bottom of that post which states the API at the time was in Beta.  Maybe adding event listeners is the more correct way to automatically scroll the TextArea, but it certainty isn’t the quickest way.  Since the Flex 3 version was fairly simple, I took what I saw there and applied it in the way the old method worked.

The first thing is that the scroller is now it is own component within the TextArea.  So, you first have to access that withing the TextArea.  Then you need to choose either the vertical or horizontal scrollbar.  Since I set the width and the words automatically wrap, I only need the vertical scrollbar.  Then you get the value of the scrollbar, which you can read or set.  The key is to set the scrollbar to its maximum position, which in the case of a vertical scoller would show the bottom of the TextArea.  You change this value with the valueCommit function, that allows you to change things after a value is added.  Just don’t change the content value or you go into a loop.

<s:TextArea id="fooText" width="200" height="200"
valueCommit="fooText.scroller.verticalScrollBar.value = fooText.scroller.verticalScrollBar.maximum" />

Unfortunately, it doesn’t seem to scroll completely down to the bottom completely.  I’ve created a little application to show text being added to the TextArea.  Every 10 seconds a random set of words will be added to each of the TextAreas.  As the amount of text increases, the TextArea with the dynamic scroller will scroll down, while the other TextArea just increases the scroller size.  To generate the random words, I used a few quotes from the Mark Twain quote site.  From those quotes, I used a script to convert the phrase words into an array. I modified the examples in order to pass in the array that I want to add the words to and get back a new array of words.  From there I used a basic random number in range script to get a random number of words.  Once I had the random number of words, I just grabbed that many words in a loop from the Array.  Finally, I adjusted the first word to make sure it had the first letter as upperCase and the rest of the words to lowerCase.

public static function getArrayFromString(inputPhrase:String, sourceArray:Array):Array {
var reg:RegExp = /\W/i;
var wordsAsArray:Array = inputPhrase.replace(reg, "").split(" ");

for(var w:int=0; w < wordsAsArray.length; w++){
sourceArray.push(wordsAsArray[w].toString());
}

return sourceArray;
}

public static function upperCase(str:String) : String {
var firstChar:String = str.substr(0, 1);
var restOfString:String = str.substr(1, str.length);

return firstChar.toUpperCase() + restOfString.toLowerCase();
}

Here is the example. When the text expands past the available area for the first time, bot TextAreas look the same.  When the next random phrase is created, then the difference is more apparent.