Skip to main content
JF Software
Inspiring
September 22, 2010
Question

How to manage linked containers with different Widths?

  • September 22, 2010
  • 1 reply
  • 976 views

I have two linked containers. When I update the compositionSize on one of them, they both change. They share the same textFlow, so my code is simply:

containerController.setCompositionSize(this.width, this.height);

textFlow.flowComposer.updateAllControllers();

- I would expect this only to update the width of the specified controller/container pair, but it operates on both of them.

What am I doing wrong?

Many thanks in advance.

Jude Fisher / JcFx.Eu

This topic has been closed for replies.

1 reply

Adobe Employee
September 23, 2010

Are you sure you are setting the size on only one? Can you send some code that shows this? What version of TLF are you using?

- robin

JF Software
Inspiring
September 24, 2010

Robin,

I'm working with Air 2.0, and version of the TLF which shipped with Flex 4.1.0.

My code is a bit distributed across various objects in a fairly complex solution but here are the relevant sections.

There are two separate views, each of which creates its own controller:

        protected var containerController:ContainerController;

        protected function renderStoryView():void
        {
            createTextHolder();
            if (!containerController)
            {
                containerController = new ContainerController(textHolder, this.width, this.height);
                containerController.horizontalScrollPolicy = ScrollPolicy.OFF;
                containerController.verticalScrollPolicy = ScrollPolicy.OFF;
            }
            storyFlow.flowComposer.addController(containerController);
            setContainerFormat();
            fixParagraphSpacing();
            updateStoryFlowControllers();
        }

         protected function createTextHolder():void
        {
            tryToRemoveDisplayObject(textHolder);
            textHolder = addChild(new UIComponent()) as UIComponent;
        }

         protected function updateStoryFlowControllers():void
        {
            storyFlow.flowComposer.updateAllControllers();
        }

Normally each view has its own textFlow associated with it, but in the case of two linked views, they share the same text Flow. The code which does that is here:

          if (!ModelTextFrame.IsChild)
            {
                View.StoryFlow = ModelTextFrame.MyParentStory.StoryFlow;
            }
            else
            {
                var parentController:TextFrameController = MySpreadController.GetTextFrameBySelf(ModelTextFrame.PreviousTextFrame);
                View.StoryFlow = parentController.View.StoryFlow; // This View now has the same TextFlow as another one.
            }

This works fine, and the text flows from one container to the next as expected. When a view is resized the following function is called:

     protected function updateControllerDimensions():void
        {
            //AirConsole.Debug("TextFrameView updateControllerDimensions: " + this.width);
            containerController.setCompositionSize(this.width, this.height);
            updateStoryFlowControllers();
        }

This sets the composition size on only the local containerController, but then calles updateAllControllers() on the shared textFlow. The expected result would be for only the local container to change size, but for the text to reflow across both containers to take account of the change. What actually happens is that the dimensions change on both the linked fields.

I've used the debugger to verify that the updateControllerDimensions() function is being called on only one of the views, and to confirm that there are two controllers attached to the flowComposer (one for each view, as expected).

I don't have time this week to break this out into a test application that I could post here but will try to do so next week. In the meantime, anything that might mean I don't have to do that would be welcome.

Many thanks, as always.

Jude Fisher / JcFx.Eu

Adobe Employee
September 28, 2010

I wrote a small app that shows the functionality, and it seems to be working for me. Can you try this and take a look and see what you're doing differently?

Thanks!

package {
   
    import flash.display.Sprite;
    import flash.geom.Rectangle;
   
    import flashx.textLayout.container.ContainerController;
    import flashx.textLayout.conversion.TextConverter;
    import flashx.textLayout.elements.*;
    import flashx.textLayout.formats.TextLayoutFormat;
   
    [SWF(width="600", height="400")]
    public class Bug extends Sprite
    {
        private var textFlow:TextFlow;
       
        public function Bug()
        {
            const markup:String = '<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" textAlign="start" fontFamily="Minion Pro" fontSize="16">I. Down the Rabbit-Hole<p textAlign="center" fontSize="24">Chapter I</p>' +
                '<p textAlign="center" fontSize="24">Down the Rabbit-Hole</p>' +
                '<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”</p>' +
                '<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p> ' +
                '</TextFlow>';
            textFlow = TextConverter.importToFlow(markup, TextConverter.TEXT_LAYOUT_FORMAT);
           
            var firstSprite:Sprite = new Sprite();
            addChild(firstSprite);
            var firstController:ContainerController = new ContainerController(firstSprite, 200, 300);
            textFlow.flowComposer.addController(firstController);
            var secondSprite:Sprite = new Sprite();
            secondSprite.x = 250;
            addChild(secondSprite);
            var secondController:ContainerController = new ContainerController(secondSprite, 200, 300);
            textFlow.flowComposer.addController(secondController);
            textFlow.flowComposer.updateAllControllers();
            traceController(firstController);
            traceController(secondController);
           
            firstController.setCompositionSize(100, firstController.compositionHeight);
            traceController(firstController);
            traceController(secondController);
            textFlow.flowComposer.updateAllControllers();

        }
       
        private function traceController(controller:ContainerController):void
        {
            trace("Controller size", controller.compositionWidth, ",", controller.compositionHeight);
        }

    }
   
}