Adobe Flex Mobile - TextArea refuses to scroll on

Question

I'm trying to make the Spark TextArea component automatically scroll down as text is added to it.

When the TextArea is first populated, the vertical scrollbar is at the bottom. But if I append more text, it just outright refuses to scroll. Its working on the iOS platform, but it won't on Android!!

I've tried doing the following, according to the example found here: http://devgirl.org/2010/12/16/automatically-scroll-flex-mobile-textarea/

StyleableTextField(TextArea1.textDisplay).htmlText += textHTML;
StyleableTextField(TextArea1.textDisplay).scrollV++;

I've also tried the following two lines of code:

StyleableTextField(TextArea1.textDisplay).verticalScrollPosition = int.MAX_VALUE - 1;
TextArea1.scrollToRange(int.MAX_VALUE, int.MAX_VALUE);

NOTHING WORKS! Whenever the TextArea is updated, it just scrolls back up to the top, or doesn't move at all.

I even tried changing the program so that the HTML content is displayed in a StageWebView instead. But I can't get that one to scroll at all, even on the iPad. I tried calling a JavaScript function (document.getElementById('id').focus()) as well as inserting a hidden anchor tag into the code, and calling loadURL() on it. Neither solution worked.

Can someone please help me out with this? I am absolutely stumped.

Answer 1

You can use default textfield but be mindful that you have to handle everything like Autoscroll to that textfield when textinput is focused in (so if you place the textinput too close the area of the keyboard, it will be covered by the keyboard), SoftKeyboardType may not appear correctly (like Number keyboard)... From my point of view, stage text is the best possible option for textinput.

This is my work around to make your StageText textinput works as expected.

1. Copy the content of StyleableStageText and create a new file like ExtendedStyleableStageText

2. In ExtendedStyleableStageText add 2 functions:

   public function freezeStageText(){ if(stageText){ if(stageText.visible){ createProxyImage(); } stageText.visible = false; stageText.stage = null; } }

   public function unFreezeStageText():void{ if(stageText){ if(!stageText.visible){ disposeProxyImage(); } stageText.visible = true; stageText.stage = stage; }
   }

3. Copy the content of spark.skins.mobile.supportClasses.StageTextSkinBase to a new file like ExtendedStageTextSkinBase.

4. In your ExtendedStageTextSkinBase change textDisplay to ExtendedStyleableStageText

5. Copy the content of spark.skins.mobile.StageTextInputSkin and create your our own textinput skin file. In your skin, the skin class should extend your newly created ExtendedStageTextSkinBase file and add the function

       protected function commitCurrentState():void{
         super.commitCurrentState();
         if(currentState == 'disabled'){
            textDisplay.freezeStageText();
         }else{
            textDisplay.unFreezeStageText();
         }
       }
   

6. In any of your view that need to use the textinput, if you need to display a popup on top of the view, make sure to change all your textinput enabled to false, or if you need to position the text correctly when scrolling, you can add TouchInteractionStart and TouchInteractionEnd to the scroller then listen to the event, when user starts touching and scroll the scroller, disabled all the text input that are visible in the view and when user stops touching, re-enabled all the textinputs.

Hope this helps.

Answer 2

TextArea and TextInput do not support scrolling if they are using their StageText skins. You would need to set your TextArea to use "TextAreaSkin" for scrolling to work at all.
TextArea and TextInput don't even support scrolling/panning for the softkeyboard while using StageText skins.

The reason for this is that when TextArea is using the StageText skin, AIR is actually using an OS native text box and laying it ontop of your displayList. This is why Text boxes using StageText skins will always appear ontop of all other display objects.
This can be good since we can have native display objects in our apps, giving us access to all the services the OS has to offer (auto-correct, "next"/"done" buttons on android's soft keyboard, etc), but theres alot of situations where you cannot use them.

So you will either have to go back to the TextAreaSkin, which stinks because you dont get the device native softkeyboard anymore, or find a way around your need to scroll.

I don't know about StageWebView, but I suspect that it has the same problem (native component layed ontop of displayList).