Setting tab stops on a Spark RichText control in Flex 4

The following example shows how you can use tab stops on a Spark RichText primitive in Flex 4 by setting the tabStops style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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>

View source is enabled in the following example.

[GoogleAdsWide]

You can also set tabs in a RichText control by setting the text property and using \t, as seen in the following example:

<?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>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?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>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

4 thoughts on “Setting tab stops on a Spark RichText control in Flex 4

  1. Jean-Marie,
    Take a look at the TileList, DataGrid or the Grid component… “Grid component?” yes there was a table like component in Flex with rows and columns.

  2. Please help…

    Is it possible to get indented bullet-style text like using a TextFlow element and MXML

    Here is a paragraph
    – When this indented paragraph wraps at the end
    of the line it indents like this
    – This next line will do the same as above
    Now we are back to a regular paragraph
    All of this should be within one TextFlow

    *****************
    Here’s what I was trying, but it wraps back to the left margin
    *** Tells me I am to spammy when i put example

    Thanks

  3. My example above does not show how it should look, the line beginning ‘of the line’ should be lined up beneath the W in When…

    Apparently I can’t show an example here. It does exactly what I am trying to prevent.

Comments are closed.