Setting tab stops on a Spark RichText control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_tabStops_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="direction:">
                <s:DropDownList id="dropDownList" requireSelection="true">
                    <s:dataProvider>
                        <s:ArrayList source="[ltr,rtl]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel title="Spark RichText tabStops/tab test"
            horizontalCenter="0" verticalCenter="0">
        <mx:VRule x="100" />
        <mx:VRule x="200" />
        <mx:VRule x="300" />
 
        <s:RichText id="richTxt"
                direction="{dropDownList.selectedItem}"
                tabStops="100 200 300"
                paragraphSpaceAfter="20"
                width="400">
            <s:content>
                <s:p direction="ltr" fontWeight="bold">0px<s:tab/>100px<s:tab/>200px<s:tab/>300px</s:p>
                <s:p>Col 1<s:tab/>Col 2<s:tab/>Col 3<s:tab/>Col 4</s:p>
            </s:content>
        </s:RichText>
    </s:Panel>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_tabStops_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="direction:">
                <s:DropDownList id="dropDownList" requireSelection="true">
                    <s:dataProvider>
                        <s:ArrayList source="[ltr,rtl]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel title="Spark RichText tabStops/tab test"
            horizontalCenter="0" verticalCenter="0">
        <mx:VRule x="100" />
        <mx:VRule x="200" />
        <mx:VRule x="300" />
 
        <s:RichText id="richTxt"
                text="Col 1{'\t'}Col 2{'\t'}Col 3{'\t'}Col 4"
                direction="{dropDownList.selectedItem}"
                tabStops="100 200 300"
                paragraphSpaceAfter="20"
                width="400" />
    </s:Panel>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_tabStops_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.Direction;
            import mx.collections.ArrayList;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.VRule;
            import mx.core.FlexGlobals;
            import spark.components.DropDownList;
            import spark.components.Panel;
            import spark.events.IndexChangeEvent;
            import spark.primitives.RichText;
 
            private var dropDownList:DropDownList;
            private var pnl:Panel;
            private var richTxt:RichText;
 
            private function init():void {
                dropDownList = new DropDownList();
                dropDownList.dataProvider = new ArrayList([Direction.LTR, Direction.RTL]);
                dropDownList.requireSelection = true;
                dropDownList.addEventListener(IndexChangeEvent.CHANGE, dropDownList_change);
 
                var formItem:FormItem = new FormItem();
                formItem.label = "direction:";
                formItem.addElement(dropDownList);
 
                var form:Form = new Form();
                form.addElement(formItem);
 
                Application(FlexGlobals.topLevelApplication).controlBarContent = [form];
 
                richTxt = new RichText();
                richTxt.text = "Col 1\tCol 2\tCol 3\tCol 4";
                richTxt.setStyle("tabStops", "100 200 300");
                richTxt.setStyle("paragraphSpaceAfter", 20);
                richTxt.width = 400;
 
                var vRule1:VRule = new VRule();
                vRule1.x = 100;
 
                var vRule2:VRule = new VRule();
                vRule2.x = 200;
 
                var vRule3:VRule = new VRule();
                vRule3.x = 300;
 
                pnl = new Panel();
                pnl.title = "Spark RichText tabStops/tab test";
                pnl.horizontalCenter = 0;
                pnl.verticalCenter = 0;
                pnl.addElement(vRule1);
                pnl.addElement(vRule2);
                pnl.addElement(vRule3);
                pnl.addElement(richTxt);
                addElement(pnl);
            }
 
            protected function dropDownList_change(evt:IndexChangeEvent):void {
                richTxt.setStyle("direction", dropDownList.selectedItem);
            }
        ]]>
    </fx:Script>
 
</s:Application>