Flex Examples » tabStops http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Defining tab stops on a Spark TextArea control in Flex 4 http://blog.flexexamples.com/2009/09/29/defining-tab-stops-on-a-spark-textarea-control-in-flex-4/ http://blog.flexexamples.com/2009/09/29/defining-tab-stops-on-a-spark-textarea-control-in-flex-4/#comments Tue, 29 Sep 2009 19:11:37 +0000 Peter deHaan http://blog.flexexamples.com/?p=1934 The following example shows how you can set up tab stops on a Spark TextArea control in Flex 4 by setting the tabStops style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/29/defining-tab-stops-on-a-spark-textarea-control-in-flex-4/ --> <s:Application name="Spark_TextArea_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:VGroup horizontalCenter="0" verticalCenter="0"> <s:Label text="Defined on TextArea:" /> <s:TextArea tabStops="100 200 300" width="400" [...]]]> The following example shows how you can set up tab stops on a Spark TextArea control 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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/09/29/defining-tab-stops-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_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:VGroup horizontalCenter="0" verticalCenter="0">
        <s:Label text="Defined on TextArea:" />
        <s:TextArea tabStops="100 200 300" width="400" heightInLines="3">
            <s:p>0<s:tab/>100<s:tab/>200<s:tab/>300</s:p>
        </s:TextArea>
 
        <s:Label text="Defined on ParagraphElement:" height="50" verticalAlign="bottom" />
        <s:TextArea width="400" heightInLines="3">
            <s:p tabStops="100 200 300">0<s:tab/>100<s:tab/>200<s:tab/>300</s:p>
        </s:TextArea>
 
        <s:Label text="Defined on TextFlow:" height="50" verticalAlign="bottom" />
        <s:TextArea width="400" heightInLines="3">
            <s:textFlow>
                <s:TextFlow tabStops="100 200 300">
                    <s:p>0<s:tab/>100<s:tab/>200<s:tab/>300</s:p>
                </s:TextFlow>
            </s:textFlow>
        </s:TextArea>
    </s:VGroup>
 
</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.

 
]]> http://blog.flexexamples.com/2009/09/29/defining-tab-stops-on-a-spark-textarea-control-in-flex-4/feed/ 1 Setting tab stops on a Spark RichText control in Flex 4 http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/#comments Wed, 26 Aug 2009 18:53:10 +0000 Peter deHaan http://blog.flexexamples.com/?p=1754 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.

<?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> [...]]]> 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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.


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.

 
]]> http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/feed/ 4 Creating a custom multi-column item renderer for the Spark List control in Flex 4 http://blog.flexexamples.com/2009/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/#comments Mon, 09 Mar 2009 14:46:36 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/ The following example shows how you can create a multi-column custom item renderer for a Spark List control in Flex 4 by setting the itemRenderer property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/ --> <s:Application name="Spark_List_itemRenderer_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <fx:Script> <![CDATA[ private function lst_labelFunc(item:Object):String { return item.name + "\t" + currFormatter.format(item.price); } ]]> </fx:Script>   [...]]]> The following example shows how you can create a multi-column custom item renderer for a Spark List control in Flex 4 by setting the itemRenderer property.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            private function lst_labelFunc(item:Object):String {
                return item.name + "\t" + currFormatter.format(item.price);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <mx:CurrencyFormatter id="currFormatter" precision="2" />
    </fx:Declarations>
 
    <s:List id="lst"
            labelFunction="lst_labelFunc"
            itemRenderer="skins.TabItemRenderer"
            horizontalCenter="0" verticalCenter="0"
            width="200" height="112">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object name="The"   price="0.23" />
                <fx:Object name="quick" price="1.03" />
                <fx:Object name="brown" price="0.98" />
                <fx:Object name="fox"   price="1.19" />
                <fx:Object name="jumps" price="0.28" />
                <fx:Object name="over"  price="0.42" />
                <fx:Object name="the"   price="0.09" />
                <fx:Object name="lazy"  price="0.81" />
                <fx:Object name="dog"   price="0.72" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

The custom Spark List control item renderer, skins/TabItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/ -->
<s:ItemRenderer name="TabItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        autoDrawBackground="true">
    <!-- states -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>
 
    <s:RichText id="labelDisplay"
            tabStops="D160"
            verticalCenter="0"
            left="3" right="3" top="6" bottom="4" />
 
</s:ItemRenderer>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/feed/ 1 Using tab stops with the TextArea control in Flex http://blog.flexexamples.com/2009/02/03/using-tab-stops-with-the-textarea-control-in-flex/ http://blog.flexexamples.com/2009/02/03/using-tab-stops-with-the-textarea-control-in-flex/#comments Tue, 03 Feb 2009 16:36:32 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/03/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 [...]]]> 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>
 
]]> http://blog.flexexamples.com/2009/02/03/using-tab-stops-with-the-textarea-control-in-flex/feed/ 0 Setting tab stops in a TextView control in Flex Gumbo http://blog.flexexamples.com/2009/01/13/setting-tab-stops-in-a-textview-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/01/13/setting-tab-stops-in-a-textview-control-in-flex-gumbo/#comments Wed, 14 Jan 2009 06:31:27 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/13/setting-tab-stops-in-a-textview-control-in-flex-gumbo/ The following example shows how you can set the tab stops in a Flex Gumbo TextView control by setting the tabStops property using a string-based shorthand.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. [...]]]> The following example shows how you can set the tab stops in a Flex Gumbo TextView control by setting the tabStops property using a string-based shorthand.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/13/setting-tab-stops-in-a-textview-control-in-flex-gumbo/ -->
<Application name="TextView_tabStops_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="Toggle grid lines:">
                <CheckBox id="checkBox" selected="false" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <Canvas backgroundColor="white">
        <TextView id="textView"
                tabStops="S0 C100 E200 D270"
                width="300">
            <content>
                <p>1.The<tab/>1.Quick<tab/>1.Brown<tab/>$123.456</p>
                <p>2.Fox<tab/>2.Jumps<tab/>2.Over<tab/>$24.7</p>
                <p>3.The<tab/>3.Lazy<tab/>3.Dog<tab/>$7.11</p>
            </content>
        </TextView>
        <Group id="lineGroup"
                visible="{checkBox.selected}"
                height="100%">
            <VRule x="0" height="100%" />
            <VRule x="100" height="100%" />
            <VRule x="200" height="100%" />
            <VRule x="270" height="100%" />
        </Group>
    </Canvas>

</Application>

This entry is based on a beta version of the Flex Gumbo 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 Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/01/13/setting-tab-stops-in-a-textview-control-in-flex-gumbo/feed/ 0 Setting tab stops in an FxTextArea control in Flex Gumbo http://blog.flexexamples.com/2008/10/31/setting-tab-stops-in-an-fxtextarea-control-in-flex-gumbo/ http://blog.flexexamples.com/2008/10/31/setting-tab-stops-in-an-fxtextarea-control-in-flex-gumbo/#comments Sat, 01 Nov 2008 06:12:22 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/31/setting-tab-stops-in-an-fxtextarea-control-in-flex-gumbo/ The following example shows how you can set tab stops in a Flex Gumbo FxTextArea control by setting the tabStops style to an array of TabStopFormat objects.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder [...]]]> The following example shows how you can set tab stops in a Flex Gumbo FxTextArea control by setting the tabStops style to an array of TabStopFormat objects.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/31/setting-tab-stops-in-an-fxtextarea-control-in-flex-gumbo/ -->
<FxApplication name="FxTextArea_tabStops_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:formats="flashx.textLayout.formats.*">
    <layout>
        <BasicLayout />
    </layout>

    <Style>
        HBox {
            paddingLeft: 20;
            paddingRight: 20;
            paddingTop: 20;
            paddingBottom: 20;
        }
    </Style>

    <HBox width="100%" height="100%">
        <FxTextArea id="fxTextArea"
                width="100%"
                height="100%">
            <content>
                <String source="data/mlb2008.html" />
            </content>
            <tabStops>
                <formats:TabStopFormat alignment="start" />
                <formats:TabStopFormat alignment="end"
                        position="400" />
                <formats:TabStopFormat alignment="end"
                        position="500" />
            </tabStops>
        </FxTextArea>
    </HBox>

</FxApplication>

data/mlb2008.html

<!-- data/mlb2008.html -->
<p fontSize="18" textAlign="center">AL East</p>
<p fontWeight="bold">Team<tab/>W<tab/>L</p>
<p>Tampa Bay<tab/>97<tab/>71</p>
<p>Boston<tab/>95<tab/>67</p>
<p>New York<tab/>89<tab/>73</p>
<p>Toronto<tab/>86<tab/>76</p>
<p>Baltimore<tab/>68<tab/>93</p>

<p fontSize="18" textAlign="center">AL Central</p>
<p fontWeight="bold">Team<tab/>W<tab/>L</p>
<p>Chicago<tab/>89<tab/>74</p>
<p>Minnesota<tab/>88<tab/>75</p>
<p>Cleveland<tab/>81<tab/>71</p>
<p>Kansas City<tab/>75<tab/>87</p>
<p>Detroit<tab/>74<tab/>88</p>

<p fontSize="18" textAlign="center">AL West</p>
<p fontWeight="bold">Team<tab/>W<tab/>L</p>
<p>Los Angeles<tab/>100<tab/>62</p>
<p>Texas<tab/>79<tab/>83</p>
<p>Oakland<tab/>75<tab/>86</p>
<p>Seattle<tab/>61<tab/>101</p>

<p fontSize="18" textAlign="center">NL East</p>
<p fontWeight="bold">Team<tab/>W<tab/>L</p>
<p>Philadelphia<tab/>92<tab/>70</p>
<p>New York<tab/>89<tab/>73</p>
<p>Florida<tab/>84<tab/>77</p>
<p>Atlanta<tab/>72<tab/>90</p>
<p>Washington<tab/>59<tab/>102</p>

<p fontSize="18" textAlign="center">NL Central</p>
<p fontWeight="bold">Team<tab/>W<tab/>L</p>
<p>Chicago<tab/>97<tab/>64</p>
<p>Milwaukee<tab/>90<tab/>72</p>
<p>Houston<tab/>86<tab/>75</p>
<p>St. Louis<tab/>86<tab/>76</p>
<p>Cincinnati<tab/>74<tab/>88</p>
<p>Pittsburgh<tab/>67<tab/>95</p>

<p fontSize="18" textAlign="center">NL West</p>
<p fontWeight="bold">Team<tab/>W<tab/>L</p>
<p>Los Angeles<tab/>84<tab/>78</p>
<p>Arizona<tab/>82<tab/>80</p>
<p>Colorado<tab/>74<tab/>88</p>
<p>San Francisco<tab/>72<tab/>90</p>
<p>San Diego<tab/>63<tab/>99</p>

View source is enabled in the following example.

This entry is based on a beta version of the Flex Gumbo 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 Gumbo SDK.

 
]]> http://blog.flexexamples.com/2008/10/31/setting-tab-stops-in-an-fxtextarea-control-in-flex-gumbo/feed/ 0