TextFlow autoscroll with multiple lines
If you're using TextFlow for a chat room or in similar cases, when users keep adding text to the flow and you need to kepp the latest messages visible, you have to pay attention about when to set the verticalScrollPosition.
In fact, if you wait for the CompositionCompleteEvent.COMPOSITION_COMPLETE event to trigger to set it, you'll have issues with multiple lines. To be precise, only the first line of the message will be shown even if the text will scroll up to make space for all the lines.
The correct way to make it scroll, is to call composeToPosition() on the flowComposer right after adding the new text and, this will force a recalculation of the bound sizes and a recomposition of the text, then immediatly set the verticalScrollPosition.
After an update of the controllers the text will show correctly at the right position.
In fact, if you wait for the CompositionCompleteEvent.COMPOSITION_COMPLETE event to trigger to set it, you'll have issues with multiple lines. To be precise, only the first line of the message will be shown even if the text will scroll up to make space for all the lines.
The correct way to make it scroll, is to call composeToPosition() on the flowComposer right after adding the new text and, this will force a recalculation of the bound sizes and a recomposition of the text, then immediatly set the verticalScrollPosition.
After an update of the controllers the text will show correctly at the right position.
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.container.ContainerController;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.container.ScrollPolicy;
import flash.display.Sprite;
import flash.geom.Rectangle;
var container:Sprite = new Sprite();
addChild(container);
var size:Rectangle = new Rectangle(0,0,200,300);
var chat:TextFlow = TextConverter.importToFlow("", TextConverter.PLAIN_TEXT_FORMAT);
var roller:ContainerController = new ContainerController(container, size.width, size.height);
roller.verticalScrollPolicy = ScrollPolicy.ON;
chat.flowComposer.addController(roller);
chat.flowComposer.updateAllControllers();
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, onTimerTick);
timer.start();
function onTimerTick(event:TimerEvent):void {
var text:String;
switch(timer.currentCount%3)
{
case 0:
text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies lobortis nulla, et posuere nibh lacinia ut. Sed dolor sapien, porta nec sodales vitae, commodo vel quam. Nam sit amet nibh et nisl pulvinar scelerisque a vitae ligula. Maecenas vehicula dictum sollicitudin.";
break;
case 1:
text = "Phasellus eget pretium sem. Curabitur ut nunc at nunc posuere congue. Nullam id velit nisl, ut condimentum urna. Nam erat arcu, hendrerit pulvinar posuere non, lobortis a risus. Vivamus dolor odio, accumsan ut ultrices sed, tristique et tellus. Sed cursus lacinia dui ac condimentum. Aenean et accumsan orci.";
break;
case 2:
text = "Vestibulum mollis porttitor posuere. In varius, ipsum nec placerat viverra, ipsum massa scelerisque diam, at pharetra sem metus eu neque. Pellentesque bibendum neque sapien, sit amet tincidunt magna. Suspendisse potenti. Etiam fermentum iaculis augue vel ullamcorper. Morbi ante arcu, suscipit placerat ornare viverra, elementum a tortor.";
break;
}
appendText(text);
}
function appendText(text:String):void {
var flow:TextFlow = TextConverter.importToFlow(text, TextConverter.PLAIN_TEXT_FORMAT);
var paragraph:ParagraphElement = flow.getChildAt(0) as ParagraphElement;
chat.addChild(paragraph);
roller.flowComposer.composeToPosition(); // call a recomposition so later we'll have the real size from getContentBounds
roller.verticalScrollPosition = roller.getContentBounds().height - roller.compositionHeight;
roller.flowComposer.updateAllControllers();
}