How to resize text container efficiently?

[stoem]

Hi all,

I'm new to TLF and have managed to put together a small test project to try out right-to-left support. Maybe due to the overwhelming number of classes and APIs I am struggling a bit to create the equivalent of an autoresizing text field which grows as the user adds new text to it.

I have a container (a canvas) to which I add my TextFlow. Example:

                              textFlow = new TextFlow();

                              textFlow.direction = Direction.RTL;

                              var p:ParagraphElement = new ParagraphElement();

                              var s:SpanElement = new SpanElement();

                              textFlow.addChild(p);

                              p.addChild(s);

                              s.text = "وثيقة إثبات صلة القرابة مصدقة من سفارة دولة الإمارات – إذا لم يكن اسم المكفول مدرجاً في جواز سفر";

                              textFlow.flowComposer.addController(new ContainerController(this, container.width, container.height));

                              textFlow.flowComposer.updateAllControllers();

This works fine. Now I'd like the user to be able to add more text and grow the canvas container so that it fits the size of the text contained within. What's the best way to do that? Is there an Event I can listen to that informs me once new text has been added? If so, where should I look?

My plan was to then update the container size with logic along this line:

			var controller:ContainerController = textFlow.flowComposer.getControllerAt(0);
			var rec:Rectangle = controller.getContentBounds();
			_container.width = rec.width;
			_container.height = rec.height;

			controller.setCompositionSize( _container.width, _container.height );
			textFlow.flowComposer.updateAllControllers();

Am I on the right track here? Unfortunately I cannot use the Spark components in this project since this logic is contained within a custom MX component.

Regards,

Stefan

[stoem]

Some input on this would be greatly appreciated.

Thanks,

Stefan

[Gang_Cai]

Every input should trigger a re-compose of TLF. You'd better listen to the CompositionCompleteEvent.COMPOSITION_COMPLETE to decide if the text is over the boundary.

Why not make the scrollPolicy is on. TLF will automatically make your text to be scrolled.

[stoem]

Thanks, I will give that a try.

Unfortunately I cannot use scrolling since the entire text must be visible to the user as one chunk.

[casper_no]

I'm assuming you want a text field that has a fixed width and height is adjusted to amount of text.

It's not well documented, but setting a containerController's height or width to NaN will make it dynamic:

                    ie, new ContainerController(this, container.width, NaN)) gives you a container with fixed width and dynamic height

You can use controller.getContentBounds(); to measure the height of the current text, and as Gang writes, it's best to do that after a CompositionCompleteEvent.COMPOSITION_COMPLETE event to be sure all changes are in place

[stoem]

Thanks guys, that's extremely helpful.

Using the tips above I now have something that may become a workable solution. Remember I need a pure AS3 based approach for a RTL text object that supports a dynamically resizing container. Here's a test class I created that allows you to pass in a reference to a container (I use a Canvas) and then adds the text to it. Maybe someone else will find this helpful.

package {

    import flash.geom.Rectangle;

    import flashx.textLayout.container.ContainerController;

    import flashx.textLayout.edit.EditManager;

    import flashx.textLayout.elements.ParagraphElement;

    import flashx.textLayout.elements.SpanElement;

    import flashx.textLayout.elements.TextFlow;

    import flashx.textLayout.events.CompositionCompleteEvent;

    import flashx.textLayout.formats.Direction;

    import mx.core.UIComponent;

    /** This example demonstrates custom event handling on a LinkElement.  In one case a click handler is added to a LinkElement.  In the other class the click handler is a event:EventName string.  */

    public class TLFWrapper extends UIComponent

    {

        private var textFlow:TextFlow;

        private var pCustomClick:ParagraphElement;

        private var pNamedEvent:ParagraphElement;

        private var _container:UIComponent;

        private const PADDING:int = 10;

        private const PADDINGBOTTOM:int = 25;

        public function TLFWrapper( container:UIComponent=null )

        {               

            this._container = container;

            textFlow = new TextFlow();

            textFlow.fontSize = 18;

            textFlow.paragraphSpaceBefore = 2;

            textFlow.paragraphSpaceAfter = 2

            textFlow.paddingBottom = textFlow.paddingTop = textFlow.paddingLeft = textFlow.paddingRight = PADDING;

            textFlow.direction = Direction.RTL;

            var p:ParagraphElement = new ParagraphElement();

            var s:SpanElement = new SpanElement();

            textFlow.addChild(p);

            p.addChild(s);

            s.text = "وثيقة إثبات صلة القرابة مصدقة من سفارة دولة الإمارات – إذا لم يكن اسم المكفول مدرجاً في جواز سفر";

            textFlow.flowComposer.addController(new ContainerController(this, NaN, NaN));

            textFlow.flowComposer.updateAllControllers();

            var controller:ContainerController = textFlow.flowComposer.getControllerAt(0);

            var rec:Rectangle = controller.getContentBounds();                       

            _container.width = rec.width;

            _container.height = rec.height;

            controller.setCompositionSize( _container.width, _container.height );

            textFlow.flowComposer.updateAllControllers();

            textFlow.interactionManager = new EditManager();

            textFlow.addEventListener(CompositionCompleteEvent.COMPOSITION_COMPLETE, onCompositionComplete);

        }

        protected function onCompositionComplete(event:CompositionCompleteEvent):void

        {

            var controller:ContainerController = textFlow.flowComposer.getControllerAt(0);

            trace(controller.compositionWidth + " x " + controller.compositionHeight);

            var rec:Rectangle = controller.getContentBounds();

            _container.width = rec.width;

            _container.height = rec.height;

            controller.setCompositionSize( _container.width, _container.height );

            textFlow.flowComposer.updateAllControllers();

        }

        public function addText():void

        {

            var para:SpanElement = textFlow.getFirstLeaf() as SpanElement;

            para.text += " وثيقة إثبات صلة القرابة مصدقة من سفارة دولة الإمارات – إذا لم يكن اسم المكفول مدرجاً في جواز سفر";

            textFlow.flowComposer.updateAllControllers();

        }

    }

}

[casper_no]

Have you tried without setting setCompositionSize ? If you set width initially and height to NaN, it should not be necessary. I only use the composition_complete event to track height of text to be able to place other elements aligned to bottom of text.

[stoem]

Thanks, yes I did try it without calling setCompositionSize but somehow it had undesired results. The code as it stands comes closest to what I need. It may not be pretty but it seems to work 🙂

[casper_no]

Ok. just checking. It's been working without glitches for me, but then I haven't been working with RTL text, only vanilla LTR. Glad it worked out.