Automatically Scroll Flex Mobile TextArea

If you’re doing any mobile development with the Flex 4.5 (Hero) SDK or Flash Builder Burrito, this tip may be useful to you. A fairly typical use of a TextArea in an application is to use it as a log where you would want it to scroll automatically as text is being added. Currently if you’re using the Mobile theme on your project, the Spark TextArea will not automatically scroll when text is appended to it as it does in a non-mobile application. It will scroll only if you are over it (if it’s non-editable) or in it and move the mouse wheel, not just as text is being appended. The reason behind this difference in behavior from a non-mobile to mobile-themed application is that the Flex Hero mobile theme uses the optimized set of components and for the TextArea, it’s actually using a MobileTextField component as the textDisplay part in the skin versus the RichEditableText component that is used in the regular Spark TextArea for the textDisplay. Now you could do something like use a non-optimized component such as the RichEditableText either directly in your application or in a custom TextArea skin as the textDisplay part, such as:

<!--- Defines the scroller that is used to scroll the TextArea control. -->
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" 
				minViewportInset="1" measuredSizeIncludesScrollBars="false" hasFocusableChildren="false">
        <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
        <s:RichEditableText id="textDisplay"
                  widthInChars="15" />

but the obvious problem with this is there’s a reason they built the SDK with optimized components, so we should try to work with what we have in the optimized TextArea. RichEditableText has the Text Layout Framework (TLF) support underlying, thus would not be a good choice as far as performance is concerned. Since the MobileTextField is the component used for the textDisplay skin part, we can actually use the scrollV and scrollH properties on it to scroll vertically or horizontally accordingly after text is appended to the TextArea. An example is shown here with text being added to a TextArea on a button click, and a counter is incremented to show that it’s automatically scrolling as text is appended:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="" 
		xmlns:s="library://" title="Home">
			import spark.components.supportClasses.MobileTextField;
			private var cnt:int = 0;
			protected function addText():void
				ta.appendText('More text... ' + cnt++ + '\n');
		<s:VerticalLayout paddingTop="30" paddingBottom="5" paddingLeft="5" paddingRight="5" gap="5"  
	<s:Label text="Auto-Scrolling TextArea" fontSize="30"/>
	<s:TextArea id="ta" width="95%" height="200" editable="false"/>
	<s:Button label="Add Text" click="addText()"/>

A screenshot of the above home view running in the mobile emulator in Flash Builder Burrito is shown here, but you really have to try out the code in your project to see the auto-scrolling:

Note that when you scroll vertically, the units are in lines versus pixels when you scroll horizontally. I also noticed there are verticalScrollPosition and horizontalScrollPosition properties which also appear to scroll when incremented. I was curious why there are both, and took a look at the class in the Flex 4.5 SDK. In there I noticed that when you set those properties it’s actually doing a calculation to see which is smaller, the value you’re setting versus the maxScrollV property if set, so keep this in mind if you plan to use those properties instead (similar case for the horizontalScrollPosition setter):

public function set verticalScrollPosition(value:Number):void
        scrollV = Math.min(Math.max(0, int(value)), maxScrollV);

You should remember this MobileTextField is used behind the scenes when trying to use other properties you might need that are not available in the optimized TextArea such as htmlText as well. See this post by Brian Rinaldi for more information about using htmlText in your mobile TextArea…

Lastly, a couple things to note in regards to this MobileTextFieldd component… You cannot use it in MXML markup, it is a text primitive to be used in ActionScript skins and item renderers. Another thing to note is that the name of this class changes to StyleableTextField in future SDK releases so keep this in mind if you are using something newer than the MAX preview build.


5 Responses to “Automatically Scroll Flex Mobile TextArea”

  1. Which WordPress plugin do you use for code highlighting?

  2. I just used the List element with a single text item renderer. It scrolls perfectly.

    You can see my Times Of India app from the Adroid market or visit the blog entry

  3. Thanks for the tips, awesome.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: