Automatically Scroll Flex Mobile TextArea

December 16, 2010By 31 Comments

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"
                  heightInLines="10"
                  widthInChars="15" />
</s:Scroller>
...

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="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="Home">

	<fx:Script>
		<![CDATA[
			import spark.components.supportClasses.MobileTextField;
			private var cnt:int = 0;

			protected function addText():void
			{
				ta.appendText('More text... ' + cnt++ + '\n');
				MobileTextField(ta.textDisplay).scrollV++;
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout paddingTop="30" paddingBottom="5" paddingLeft="5" paddingRight="5" gap="5"
						  horizontalAlign="center"/>
	</s:layout>
	<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()"/>
</s:View>

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 MobileTextField.as 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.

Filed in: Flex 4Flex 4.5/MobileFlex/AIRMobile Development Tags:

About the Author ()

Comments (31)

Trackback URL | Comments RSS Feed

  1. Marc says:

    Which WordPress plugin do you use for code highlighting?

  2. aphtk says:

    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 http://aphatak.blogspot.com/2010/11/and-take-that-too-times-of-india.html

  3. Mario says:

    Thanks for the tips, awesome.

  4. Jason says:

    Thanks for the great post. We’re already working on this related bug for the final release: https://bugs.adobe.com/jira/browse/SDK-27485.

  5. Saran says:

    Thanks a lot for this awesome tip! :) you just saved my day!

  6. Marco says:

    I have a question (if anyone is listening), when I apply htmlText to a flex 4.5 mobile textArea e.g.:

    StyleableTextField(aboutTA.textDisplay).htmlText = “Text etc” ;

    the textArea’s scroll position is at the very bottom, whereas I would like it to be at the top.

    I tried both:
    StyleableTextField(aboutTA.textDisplay).scrollV = 1;
    StyleableTextField(aboutTA.textDisplay).verticalScrollPosition = 1;

    However I’ve had no luck….does anyone have any suggestions/advice?

  7. Richard says:

    Hi Marcos,

    I think that i have a similar issue using the StyleableTextField(myTextArea.textDisplay).htmlText feature. Unfortunately i haven’t been able to figure out either.

    However i did notice when i switch from portrait mode to landscape mode (or vice versa) scrolling starts working. When I swicth back to the original mode it also works. Just doesn’t seem to work when the view is first loaded. :(

    Would also like to find out if anyone has a suggestion on how to fix

    • Hi guys, would using something like:

      StyleableTextField(ta.textDisplay).setFocus();
      StyleableTextField(ta.textDisplay).setSelection(0,0);
      

      work for you? It moves the caret to the top of the text area so if you start typing it will start at the top, but not sure if that solves your needs?

      Cheers!
      Holly

  8. Marco says:

    Champion! I’m gonna try it today and will let you know how it goes. Thanks again for the advice. I might also try the selectRange(0,0).

    With Respect
    Marco

  9. Marco says:

    hmmm…the following methods:

    setFocus();
    setSelection(0,0);
    selectRange(0,0);

    didn’t work but I’ll tinker later on to find out what the issue is…I tried it without tags such as and and it didn’t automatically scroll to the bottom. Will let you all know if I have any luck. Hope everyone is good!

    With Respect
    Marco

  10. Marco says:

    ps..the tags I tried were paragraph and break tags. Just for reference to my previous post.

    :-)
    M

  11. Marco says:

    Quick Update…I added the HTML text as per the View’s creation complete handler rather than the TextArea’s creation complete handler and the scroller is at the top which is great.

    The only issue now is that the scroller’s behaviour is active only when you use an arrow key to mouse down past the visible text. So if you try to scroll down without first setting focus into the Text Area, the scroller doesn’t work.

    When I tinker next I’ll let you know how it goes.

    Peace and Respect
    Marco

  12. Richard says:

    Hello Holly and Marco,

    Thank you both for your suggestions!
    I was able to use a combination of your suggestions to solve my issue.

    1. Using the setfocus function. Ex: StyleableTextField(ta.textDisplay).setFocus();

    and

    2. Using the view creation handler instead of the viewActivate function Ex:
    view1_creationCompleteHandler(event:FlexEvent):void

    Scrolling is now working as it should. :)

  13. daylyn says:

    thks for the post!

  14. Steve Ricketts says:

    I don’t have MobileTextField in my support classes:

    import spark.components.supportClasses.MobileTextField;

    I know I’m missing something but don’t know what. Using FB 4.5.1

  15. Steve Ricketts says:

    My bad… you said it changes to StyleableTextField in future releases.

  16. Manu George says:

    I just used the following code to scroll to the text being added.

    textArea.selectRange(int.MAX_VALUE, int.MAX_VALUE);

    Works perfectly fine on my mobile app. I use Flashbuilder 4.5.1

  17. Barno says:

    Hello, I have a problem,
    I want to associate with the HTML text field,
    but this is not scrollable because in my textArea editable = false.

    i use editable = false because on iPhone, this isn’t editable.

    http://pastebin.com/6DPRyKcG

    some help?

  18. Manu George says:

    textArea.scrollToRange(textArea.text.length, textArea.text.length);

    This worked perfectly fine for me on both mobile devices and flash player.

    • hubcin says:

      hey George,I want the scroller scroll to bottom every time I add a new text in my textArea,but textArea.scrollToRange method is just doesn’t work for me . I added textFlow in my textArea and then call this method . If I use textArea.appand(), the scroller will be strictly at the bottom of my textArea. But I can’t use this appand() method because I need to display multi color of text in my textArea. any suggestion ? :)

  19. Pierre Chaillet says:

    Hello Holly,

    The following syntax is not working anymore in Flex 4.6

    StyleableTextField(iam.textDisplay).htmlText=”Bingo”;
    StyleableTextField(ta.textDisplay).setFocus();
    StyleableTextField(ta.textDisplay).setSelection(0,0);

    How can we resolve this problem ?

    Thanks

    • polaris says:

      you can add setFocus() in addToStage event.
      that can working.

      but using those method, it also cannot touch scrolling when added. Using FB 4.6 on mobile platform.

      Please help!
      thanks

    • polaris says:

      additional´╝Ü
      i’m using the skinClass=”spark.skins.mobile.TextAreaSkin” for text Area. Otherwise the syntax is error at StyleableTextField.

      thanks!

  20. Hi,

    I need to know can we add image in TextArea through StyleableTextField htmlText because my app for device(not supported TextLayoutFramework) .

    Please help !

    Thanks

  21. Hi,

    Any other way to add image in TextArea (For Tablet)?

    Thanks

Leave a Reply