Skip to main content
nikos101
Inspiring
May 17, 2011
Answered

Trying to get mulitple columns in TLF

  • May 17, 2011
  • 1 reply
  • 1189 views

What do I need to do in order to get the divs into 2 columns while have the elements outside of the divs in 1 column? Will I have to use 2 RichTexts to do this?

<RichText textJustify="distribute">
           
      <p>normal text in 1 column</p>

// I want these div each in 2 seperate columns next to each other
            <div>
               
                <p>
                   
                    text
                </p>
            </div>
           
           
            <div >
               
                <p>
                   
                   
                 text
                </p>
     
            </div></>

This topic has been closed for replies.
Correct answer Jin-Huang

RichText is a kind of Sprite or "Container".

As to TLF now, a container can be divided into several columns but cannot be divided like a table as what you want.

So your two divs must be in two different containers.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="onCreationComplete()">
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.container.ContainerController;
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.edit.EditManager;
            import flashx.textLayout.elements.TextFlow;
            [Bindable]
            var markup:String = "<?xml version=\"1.0\" encoding=\"utf-8\"?>"+
                "<TextFlow xmlns=\"http://ns.adobe.com/textLayout/2008\">"+
                "<div><p><span>TextConverter.importToFlow(markup,TextConverter.TEXT_LAYOUT_FORMAT);</span></p></div>"+
                "</TextFlow>";
            private var textFlow1:TextFlow = TextConverter.importToFlow(markup,TextConverter.TEXT_LAYOUT_FORMAT);   
            private var textFlow2:TextFlow = TextConverter.importToFlow(markup,TextConverter.TEXT_LAYOUT_FORMAT);
            private function onCreationComplete():void {
                textFlow1.columnCount = 2;
                var c1:Sprite = new Sprite();
                var c2:Sprite = new Sprite();
                c2.y = 100;
                rt.addChild(c1);
                rt.addChild(c2);
               
                var cc1:ContainerController = new ContainerController(c1,100,100);
                var cc2:ContainerController = new ContainerController(c2,100,100);
                textFlow1.flowComposer.addController(cc1);
                textFlow1.flowComposer.updateAllControllers();
                textFlow2.flowComposer.addController(cc2);
                textFlow2.flowComposer.updateAllControllers();
            }
        ]]>
       
    </fx:Script>
    <s:RichText id="rt"/>
</s:Application>

In my code, I just regard RichText as a Sprite and ignore all other functions. If you don't create Flex project but a actionsripte project, you can just use Sprite to hold all the text.

1 reply

Jin-HuangCorrect answer
Adobe Employee
May 17, 2011

RichText is a kind of Sprite or "Container".

As to TLF now, a container can be divided into several columns but cannot be divided like a table as what you want.

So your two divs must be in two different containers.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="onCreationComplete()">
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.container.ContainerController;
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.edit.EditManager;
            import flashx.textLayout.elements.TextFlow;
            [Bindable]
            var markup:String = "<?xml version=\"1.0\" encoding=\"utf-8\"?>"+
                "<TextFlow xmlns=\"http://ns.adobe.com/textLayout/2008\">"+
                "<div><p><span>TextConverter.importToFlow(markup,TextConverter.TEXT_LAYOUT_FORMAT);</span></p></div>"+
                "</TextFlow>";
            private var textFlow1:TextFlow = TextConverter.importToFlow(markup,TextConverter.TEXT_LAYOUT_FORMAT);   
            private var textFlow2:TextFlow = TextConverter.importToFlow(markup,TextConverter.TEXT_LAYOUT_FORMAT);
            private function onCreationComplete():void {
                textFlow1.columnCount = 2;
                var c1:Sprite = new Sprite();
                var c2:Sprite = new Sprite();
                c2.y = 100;
                rt.addChild(c1);
                rt.addChild(c2);
               
                var cc1:ContainerController = new ContainerController(c1,100,100);
                var cc2:ContainerController = new ContainerController(c2,100,100);
                textFlow1.flowComposer.addController(cc1);
                textFlow1.flowComposer.updateAllControllers();
                textFlow2.flowComposer.addController(cc2);
                textFlow2.flowComposer.updateAllControllers();
            }
        ]]>
       
    </fx:Script>
    <s:RichText id="rt"/>
</s:Application>

In my code, I just regard RichText as a Sprite and ignore all other functions. If you don't create Flex project but a actionsripte project, you can just use Sprite to hold all the text.

nikos101
nikos101Author
Inspiring
May 17, 2011

thnaks mate, how do I insure my 1st div takes up the entire column?

Adobe Employee
May 18, 2011

To balance the text in first container, I think you can reset first container's height according to the last textline(

flash.text.engine.TextLine)'s boundary after the first display. I did not find the related attribute for user to set easily.