Skip to main content
A
Arvind Mehta
Known Participant
September 30, 2009
Question

TabElement Not Supported with TextLayout Framework

  • September 30, 2009
  • 1 reply
  • 2555 views

Hi

     I am creating application using textLayout Framework with Flex 3(SDK 3.4).

     I write a code like i have two SpanElements i.e. spanElement1 and spanelement2 ans one TabElement.

         code like this:

// First Span--------------------------------

        var paraElement:ParagraphElement = new ParagraphElement();

        var spanElement1:SpanElement = new SpanElement();

         spanElement1.text ="A";

         paraElement.addChild(spanElement1);

// TabELement-------------------------------------------------

        var tabElement:TabElement = new TabElement ();

         paraElement.addChild(tabElement);     

// Second Span--------------------------

        var spanElement2:SpanElement = new SpanElement();

         spanElement2.text ="B";

         paraElement.addChild(spanElement2);

The output of above code is :----------------


          A

          B

What i want Output like-----------------------

        A     B

TabElement gives output same as the output of BreakElement

so how can use TabElement.

If anyone know the solution of above problem then please reply .

This topic has been closed for replies.

1 reply

R
Adobe Employee
rdermer
Adobe Employee
September 30, 2009

You also need to set tabStops.  For example, paraElement.tabStops = "36 72".

By default in current player a tab without a tabStop results in a new line.  Current thinking is that's a bug and player will add default tab stops.

Richard

A
Arvind MehtaAuthor
Known Participant
October 5, 2009

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="paragraphFormat()">
    <mx:Script>
        <![CDATA[
            import flashx.textLayout.container.DisplayObjectContainerController;
            import flashx.textLayout.elements.SpanElement;
            import flashx.textLayout.elements.ParagraphElement;
            import flash.text.engine.TabAlignment;
            import flashx.textLayout.formats.TabStopFormat;
            import flashx.textLayout.formats.ParagraphFormat;
            import flashx.textLayout.elements.TextFlow;
           
            private var textContainer:Sprite = null;
            public function paragraphFormat():void
            {
                textContainer = new Sprite();
                var textFlow:TextFlow = new TextFlow();
                var paraFormat:ParagraphFormat = new ParagraphFormat();
                paraFormat.marginLeft = 15;
                paraFormat.marginTop = 15;
                paraFormat.marginRight = 15;
                paraFormat.marginBottom = 15;
                paraFormat.textIndent = 8;
               
                var tabStop1:TabStopFormat = new TabStopFormat();
                tabStop1.alignment = TabAlignment.CENTER;
                tabStop1.position = 100;
                paraFormat.tabStops = new Array(tabStop1);               
                textFlow.hostParagraphFormat = paraFormat;
               
               
                var p:ParagraphElement = new ParagraphElement();
                var span:SpanElement = new SpanElement();
                span.text = "123\t\t\t456.";
                //trace("text : "+ span.text);
                span.fontSize = 32;
                p.addChild(span);
                textFlow.addChild(p);
               
                textFlow.flowComposer.addController(new DisplayObjectContainerController(textContainer,400,500));
                textFlow.flowComposer.updateAllContainers();
                canvas.rawChildren.addChild(textContainer);
            }

        ]]>
    </mx:Script>
    <mx:Canvas id="canvas" width="720" height="540"  backgroundColor="#ECE9D8" verticalScrollPolicy="auto" borderColor="#000000"  />
</mx:Application>

here is the code i have three "\t" in between the text .

now the output is  like

                                   123

                                   456

please give anty solution how I add three or more tab in the text.

R
Adobe Employee
robin_briggs
Adobe Employee
October 6, 2009

The problem here is that you have more tabs than tabstops, so the extra tabs take up the remaining space on the line.You can either just use one tab, with one tabstop set where you want it, or use multiple tabs with multiple tabstops.

I also notice you're using an older build. You can get a newer (improved!) build posted as part of the Flex Gumbo SDK.

Here's some newer code that would work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="paragraphFormat()">
    <mx:Script>
        <![CDATA[
            import flashx.textLayout.container.ContainerController;
            import flashx.textLayout.elements.SpanElement;
            import flashx.textLayout.elements.ParagraphElement;
            import flash.text.engine.TabAlignment;
            import flashx.textLayout.formats.TabStopFormat;
            import flashx.textLayout.formats.TextLayoutFormat;
            import flashx.textLayout.elements.TextFlow;
          
            private var textContainer:Sprite = null;
            public function paragraphFormat():void
            {
                textContainer = new Sprite();
                var textFlow:TextFlow = new TextFlow();
                var paraFormat:TextLayoutFormat = new TextLayoutFormat();
                paraFormat.paragraphStartIndent = 15;
                paraFormat.paragraphSpaceBefore = 15;
                paraFormat.paragraphEndIndent = 15;
                paraFormat.paragraphSpaceAfter = 15;
                paraFormat.textIndent = 8;
              
                var tabStop1:TabStopFormat = new TabStopFormat();
                tabStop1.alignment = TabAlignment.CENTER;
                tabStop1.position = 100;
                var tabStop2:TabStopFormat = new TabStopFormat();
                tabStop2.alignment = TabAlignment.CENTER;
                tabStop2.position = 200;
                 var tabStop3:TabStopFormat = new TabStopFormat();
                tabStop3.alignment = TabAlignment.CENTER;
                tabStop3.position = 300;
                paraFormat.tabStops = [tabStop1, tabStop2, tabStop3];              
                textFlow.hostFormat = paraFormat;
              
              
                var p:ParagraphElement = new ParagraphElement();
                var span:SpanElement = new SpanElement();
                span.text = "123\t\t\t456.";
                //trace("text : "+ span.text);
                span.fontSize = 32;
                p.addChild(span);
                textFlow.addChild(p);
              
                textFlow.flowComposer.addController(new ContainerController(textContainer,400,500));
                textFlow.flowComposer.updateAllControllers();
                canvas.rawChildren.addChild(textContainer);
            }

        ]]>
    </mx:Script>
    <mx:Canvas id="canvas" width="720" height="540"  backgroundColor="#ECE9D8" verticalScrollPolicy="auto" borderColor="#000000"  />
</mx:Application>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices