Using tab stops with the TextArea control in Flex

The following example shows how you can set tab stops on the Flex TextArea control by setting the tabStops property on a TextFormat object and setting the defaultTextFormat property or setTextFormat() method, or by setting the TextArea control’s htmlText property to an HTML string with a <TextFormat> tag.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="TextArea_tabStops_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init1():void {
                var tf:TextFormat = new TextFormat();
                tf.tabStops = [100, 200, 300, 400];

                textArea1.mx_internal::getTextField().setTextFormat(tf);
            }

            private function init3():void {
                textArea3.htmlText = "<TEXTFORMAT TABSTOPS='100,200,300,400'><P>The quick<TAB/>brown fox<TAB/>jumps over<TAB/>the lazy<TAB/>dog.</P><P>The<TAB/>quick brown<TAB/>fox jumps<TAB/>over the<TAB/>lazy dog.</P></TEXTFORMAT>";
            }

            private function init4():void {
                var tf:TextFormat = new TextFormat();
                tf.tabStops = [100, 200, 300, 400];

                textArea4.mx_internal::getTextField().defaultTextFormat = tf;
                textArea4.text = "The quick\\tbrown fox\\tjumps over\\tthe lazy\\tdog.\\nThe\\tquick brown\\tfox jumps\\tover the\\tlazy dog.";

                textArea4.validateNow();
                trace(textArea4.htmlText);
            }
        ]]>
    </mx:Script>

    <mx:TextArea id="textArea1"
            condenseWhite="true"
            width="500"
            creationComplete="init1();">
        <mx:htmlText>
            <![CDATA[
                <p>The quick<tab/>brown fox<tab/>jumps over<tab/>the lazy<tab/>dog.</p><p>The<tab/>quick brown<tab/>fox jumps<tab/>over the<tab/>lazy dog.</p>
            ]]>
        </mx:htmlText>
    </mx:TextArea>

    <mx:TextArea id="textArea2"
            condenseWhite="true"
            width="500">
        <mx:htmlText>
            <![CDATA[
                <TEXTFORMAT TABSTOPS="100,200,300,400"><P>The quick<TAB/>brown fox<TAB/>jumps over<TAB/>the lazy<TAB/>dog.</P><P>The<TAB/>quick brown<TAB/>fox jumps<TAB/>over the<TAB/>lazy dog.</P></TEXTFORMAT>
            ]]>
        </mx:htmlText>
    </mx:TextArea>

    <mx:TextArea id="textArea3"
            condenseWhite="true"
            width="500"
            initialize="init3();" />

    <mx:TextArea id="textArea4"
            width="500"
            initialize="init4();" />

</mx:Application>