How to assign tabs to a Spark RichtText with TextLayoutFramework

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

How to assign tabs to a Spark RichtText with TextLayoutFramework

FrankD

I'm experimenting with the TextLayoutFramework to try to use tabs. Based on some examples this should work, but doesn't...

Any ideas why the txt is shown as follows with spaces instead of linebreaks or tabs?

111111 222222 33333 44444 55555 66666 77777

This is the code used:

<fx:Script>
    <![CDATA[
        import flash.text.engine.TabAlignment;

        import flashx.textLayout.conversion.TextConverter;
        import flashx.textLayout.formats.TabStopFormat;
        import flashx.textLayout.formats.TextLayoutFormat;

        private function setText() : void
        {
            // Test content
            var txt : String = "<p><span>111111\n222222\t33333\t44444\t55555\n66666\t77777</span></p>";
            var xml : XML = new XML("<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>" + txt + "</TextFlow>");

            // Define three tab positions
            var tabStop1:TabStopFormat = new TabStopFormat();
            tabStop1.alignment = TabAlignment.START;
            tabStop1.position = 50;

            var tabStop2:TabStopFormat = new TabStopFormat();
            tabStop2.alignment = TabAlignment.CENTER;
            tabStop2.position = 150;

            var tabStop3:TabStopFormat = new TabStopFormat();
            tabStop3.alignment = TabAlignment.END;
            tabStop3.position = 250;

            // Define the formatter
            var format:TextLayoutFormat = new TextLayoutFormat();
            format.tabStops = new Array(tabStop1, tabStop2, tabStop3);

            // Put the text in the textbox
            txtBox.textFlow = TextConverter.importToFlow(xml, TextConverter.TEXT_LAYOUT_FORMAT);

            // Assign the formatter to the textbox
            txtBox.textFlow.format = format;
        }
    ]]>
</fx:Script>

<s:RichText id="txtBox" top="25" left="25" width="400" height="200" />

Reply | Threaded
Open this post in threaded view
|

Re: How to assign tabs to a Spark RichtText with TextLayoutFramework

Alex Harui
Did you try this? http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/

From: Frank Delporte <[hidden email]<mailto:[hidden email]>>
Reply-To: "[hidden email]<mailto:[hidden email]>" <[hidden email]<mailto:[hidden email]>>, "[hidden email]<mailto:[hidden email]>" <[hidden email]<mailto:[hidden email]>>
Date: Tuesday, February 2, 2016 at 5:41 AM
To: "[hidden email]<mailto:[hidden email]>" <[hidden email]<mailto:[hidden email]>>
Subject: How to assign tabs to a Spark RichtText with TextLayoutFramework

Same question asked on http://stackoverflow.com/questions/35151142/flex-sdk-how-to-assign-tabs-to-a-spark-richttext-with-textlayoutframework

I'm experimenting with the TextLayoutFramework to try to use tabs. Based on some examples this should work, but doesn't...

Any ideas why the txt is shown as follows with spaces instead of linebreaks or tabs?

111111 222222 33333 44444 55555 66666 77777

This is the code used:

<fx:Script>
    <![CDATA[
        import flash.text.engine.TabAlignment;

        import flashx.textLayout.conversion.TextConverter;
        import flashx.textLayout.formats.TabStopFormat;
        import flashx.textLayout.formats.TextLayoutFormat;

        private function setText() : void
        {
            // Test content
            var txt : String = "<p><span>111111\n222222\t33333\t44444\t55555\n66666\t77777</span></p>";
            var xml : XML = new XML("<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>" + txt + "</TextFlow>");

            // Define three tab positions
            var tabStop1:TabStopFormat = new TabStopFormat();
            tabStop1.alignment = TabAlignment.START;
            tabStop1.position = 50;

            var tabStop2:TabStopFormat = new TabStopFormat();
            tabStop2.alignment = TabAlignment.CENTER;
            tabStop2.position = 150;

            var tabStop3:TabStopFormat = new TabStopFormat();
            tabStop3.alignment = TabAlignment.END;
            tabStop3.position = 250;

            // Define the formatter
            var format:TextLayoutFormat = new TextLayoutFormat();
            format.tabStops = new Array(tabStop1, tabStop2, tabStop3);

            // Put the text in the textbox
            txtBox.textFlow = TextConverter.importToFlow(xml, TextConverter.TEXT_LAYOUT_FORMAT);

            // Assign the formatter to the textbox
            txtBox.textFlow.format = format;
        }
    ]]></fx:Script><s:RichText id="txtBox" top="25" left="25" width="400" height="200" />

Reply | Threaded
Open this post in threaded view
|

Re: How to assign tabs to a Spark RichtText with TextLayoutFramework

FrankD
thanks for the tip!

any idea how to add alignment to this way of defining the tabs?
txtBox.setStyle("tabStops", "150 250 550");
Reply | Threaded
Open this post in threaded view
|

Re: How to assign tabs to a Spark RichtText with TextLayoutFramework

Alex Harui


On 2/3/16, 4:58 AM, "FrankD" <[hidden email]> wrote:

>thanks for the tip!
>
>any idea how to add alignment to this way of defining the tabs?
>txtBox.setStyle("tabStops", "150 250 550");
>

I've never worked with tab stops.  Maybe this is the answer:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/t
extLayout/formats/ITextLayoutFormat.html#tabStops

HTH,
-Alex

Reply | Threaded
Open this post in threaded view
|

Re: How to assign tabs to a Spark RichtText with TextLayoutFramework

Harbs
In reply to this post by FrankD
Tab stops can be set in two ways: Shorthand and explicitly.

Shorthand would be something like this:
format.tabStops ="s150 s250 s550";

explicitly would be something like this:

var stops:Array = [];
var stop:TabStopFormat;
stop = new TabStopFormat();
stop.position = 150;
stop.alignment = TabAlignment.START;
stops.push(stop);
stop = new TabStopFormat();
stop.position = 250;
stop.alignment = TabAlignment.START;
stops.push(stop);
stop = new TabStopFormat();
stop.position = 550;
stop.alignment = TabAlignment.START;
stops.push(stop);
format.tabStops = stops;

You can use shrthand letters for each of the TabAlignment options (s,e,c or d). More details in the asdocs[1].

[1]https://flex.apache.org/asdoc/flashx/textLayout/formats/TextLayoutFormat.html#tabStops

On Feb 3, 2016, at 2:58 PM, FrankD <[hidden email]> wrote:

> thanks for the tip!
>
> any idea how to add alignment to this way of defining the tabs?
> txtBox.setStyle("tabStops", "150 250 550");
>
>
>
> --
> View this message in context: http://apache-flex-users.2333346.n4.nabble.com/How-to-assign-tabs-to-a-Spark-RichtText-with-TextLayoutFramework-tp11883p11896.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.

Reply | Threaded
Open this post in threaded view
|

Re: How to assign tabs to a Spark RichtText with TextLayoutFramework

FrankD
thanks for the tips! Based on these, this seams to be the easiest way:

var txt : String = "11111\n222222222222222\t333\t44444444\t555555\n66666\t77777777\t88\t99999\naaaa\tbbbbbbbb\tcccccccc\tddd";
txtBox.text = txt;
txtBox.setStyle("tabStops", "e200 c250 s300");

<s:RichText id="txtBox" top="25" left="25" width="600" height="200" />