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.

 

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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/22/setting-text-alignment-on-an-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_textAlign_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import flashx.textLayout.formats.Direction;
            import flashx.textLayout.formats.TextAlign;
        ]]>
    </Script>

    <Declarations>
        <Array id="textAlignDP">
            <String>{TextAlign.START}</String>
            <String>{TextAlign.LEFT}</String>
            <String>{TextAlign.CENTER}</String>
            <String>{TextAlign.RIGHT}</String>
            <String>{TextAlign.END}</String>
            <String>{TextAlign.JUSTIFY}</String>
        </Array>
        <Array id="directionDP">
            <String>{Direction.LTR}</String>
            <String>{Direction.RTL}</String>
        </Array>
        <String id="lorem" source="data/lorem.html" />
    </Declarations>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="textAlign:">
                <ComboBox id="textAlignComboBox"
                        dataProvider="{textAlignDP}" />
            </FormItem>
            <FormItem label="direction:">
                <ComboBox id="directionComboBox"
                        dataProvider="{directionDP}" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxTextArea id="fxTextArea"
            content="{lorem}"
            textAlign="{textAlignComboBox.selectedItem}"
            direction="{directionComboBox.selectedItem}"
            widthInChars="80"
            heightInLines="25"
            marginTop="20" />

</Application>

View source is enabled in the following example.

You can also set the textAlign and direction styles in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/22/setting-text-alignment-on-an-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_textAlign_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Style>
        FxTextArea {
            textAlign: "justify";
            direction: "rtl";
            marginTop: 20;
        }
    </Style>

    <Declarations>
        <String id="lorem" source="data/lorem.html" />
    </Declarations>

    <FxTextArea id="fxTextArea"
            content="{lorem}"
            widthInChars="80"
            heightInLines="25" />

</Application>

Or, you can set the textAlign and direction styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/22/setting-text-alignment-on-an-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_textAlign_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import flashx.textLayout.formats.Direction;
            import flashx.textLayout.formats.TextAlign;
            import mx.events.ListEvent;

            private function textAlignComboBox_change(evt:ListEvent):void {
                var value:String = evt.currentTarget.selectedItem;
                fxTextArea.setStyle("textAlign", value);
            }

            private function directionComboBox_change(evt:ListEvent):void {
                var value:String = evt.currentTarget.selectedItem;
                fxTextArea.setStyle("direction", value);
            }
        ]]>
    </Script>

    <Declarations>
        <Array id="textAlignDP">
            <String>{TextAlign.START}</String>
            <String>{TextAlign.LEFT}</String>
            <String>{TextAlign.CENTER}</String>
            <String>{TextAlign.RIGHT}</String>
            <String>{TextAlign.END}</String>
            <String>{TextAlign.JUSTIFY}</String>
        </Array>
        <Array id="directionDP">
            <String>{Direction.LTR}</String>
            <String>{Direction.RTL}</String>
        </Array>
        <String id="lorem" source="data/lorem.html" />
    </Declarations>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="textAlign:">
                <ComboBox id="textAlignComboBox"
                        dataProvider="{textAlignDP}"
                        change="textAlignComboBox_change(event);" />
            </FormItem>
            <FormItem label="direction:">
                <ComboBox id="directionComboBox"
                        dataProvider="{directionDP}"
                        change="textAlignComboBox_change(event)" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxTextArea id="fxTextArea"
            content="{lorem}"
            widthInChars="80"
            heightInLines="25"
            marginTop="20" />

</Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/22/setting-text-alignment-on-an-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_textAlign_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <Declarations>
        <String id="lorem" source="data/lorem.html" />
    </Declarations>

    <Script>
        <![CDATA[
            import flashx.textLayout.formats.Direction;
            import flashx.textLayout.formats.TextAlign;
            import mx.events.ListEvent;
            import mx.controls.ComboBox;
            import mx.components.FxTextArea;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.ApplicationControlBar;

            private var textAlignDP:Array;
            private var directionDP:Array;
            private var textAlignComboBox:ComboBox;
            private var directionComboBox:ComboBox;
            private var fxTextArea:FxTextArea;

            private function init():void {
                textAlignDP = [];
                textAlignDP.push(TextAlign.START);
                textAlignDP.push(TextAlign.LEFT);
                textAlignDP.push(TextAlign.CENTER);
                textAlignDP.push(TextAlign.RIGHT);
                textAlignDP.push(TextAlign.END);
                textAlignDP.push(TextAlign.JUSTIFY);

                directionDP = [];
                directionDP.push(Direction.LTR);
                directionDP.push(Direction.RTL);

                textAlignComboBox = new ComboBox();
                textAlignComboBox.dataProvider = textAlignDP;
                textAlignComboBox.addEventListener(ListEvent.CHANGE,
                            textAlignComboBox_change);

                directionComboBox = new ComboBox();
                directionComboBox.dataProvider = directionDP;
                directionComboBox.addEventListener(ListEvent.CHANGE,
                            directionComboBox_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "textAlign:";
                formItem1.addChild(textAlignComboBox);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "direction:";
                formItem2.addChild(directionComboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                fxTextArea = new FxTextArea();
                fxTextArea.content = lorem;
                fxTextArea.widthInChars = 80;
                fxTextArea.heightInLines = 25;
                fxTextArea.setStyle("marginTop", 20);
                addChild(fxTextArea);
            }

            private function textAlignComboBox_change(evt:ListEvent):void {
                var value:String = evt.currentTarget.selectedItem;
                fxTextArea.setStyle("textAlign", value);
            }

            private function directionComboBox_change(evt:ListEvent):void {
                var value:String = evt.currentTarget.selectedItem;
                fxTextArea.setStyle("direction", value);
            }
        ]]>
    </Script>

</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.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .buttonBarButtonStyles {
            textAlign: left;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Red"
                icon="@Embed('assets/bullet_red.png')" />
        <mx:Object label="Orange"
                icon="@Embed('assets/bullet_orange.png')" />
        <mx:Object label="Yellow"
                icon="@Embed('assets/bullet_yellow.png')" />
        <mx:Object label="Green"
                icon="@Embed('assets/bullet_green.png')" />
        <mx:Object label="Blue"
                icon="@Embed('assets/bullet_blue.png')" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="buttonHeight:">
                <mx:HSlider id="slider"
                        minimum="16"
                        maximum="48"
                        value="24"
                        snapInterval="1"
                        tickInterval="2"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[horizontal,vertical]" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            buttonHeight="{slider.value}"
            direction="{comboBox.selectedItem}"
            buttonStyleName="buttonBarButtonStyles" />

</mx:Application>

View source is enabled in the following example.

You can also set the buttonHeight style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ButtonBar {
            buttonHeight: 16;
            buttonStyleName: buttonBarButtonStyles;
        }

        .buttonBarButtonStyles {
            textAlign: left;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Red"
                icon="@Embed('assets/bullet_red.png')" />
        <mx:Object label="Orange"
                icon="@Embed('assets/bullet_orange.png')" />
        <mx:Object label="Yellow"
                icon="@Embed('assets/bullet_yellow.png')" />
        <mx:Object label="Green"
                icon="@Embed('assets/bullet_green.png')" />
        <mx:Object label="Blue"
                icon="@Embed('assets/bullet_blue.png')" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[horizontal,vertical]" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            direction="{comboBox.selectedItem}" />

</mx:Application>

Or, you can set the buttonHeight style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ButtonBar {
            buttonHeight: 24;
            buttonStyleName: buttonBarButtonStyles;
        }

        .buttonBarButtonStyles {
            textAlign: left;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                buttonBar.setStyle("buttonHeight", evt.value);
            }

            private function comboBox_change(evt:ListEvent):void {
                buttonBar.direction = comboBox.selectedItem.toString();
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red"
                icon="@Embed('assets/bullet_red.png')" />
        <mx:Object label="Orange"
                icon="@Embed('assets/bullet_orange.png')" />
        <mx:Object label="Yellow"
                icon="@Embed('assets/bullet_yellow.png')" />
        <mx:Object label="Green"
                icon="@Embed('assets/bullet_green.png')" />
        <mx:Object label="Blue"
                icon="@Embed('assets/bullet_blue.png')" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="buttonHeight:">
                <mx:HSlider id="slider"
                        minimum="16"
                        maximum="48"
                        value="24"
                        snapInterval="1"
                        tickInterval="2"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[horizontal,vertical]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.BoxDirection;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ButtonBar;
            import mx.controls.ComboBox;
            import mx.controls.HSlider;
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            [Embed("assets/bullet_red.png")]
            private const BulletRedIcon:Class;

            [Embed("assets/bullet_orange.png")]
            private const BulletOrangeIcon:Class;

            [Embed("assets/bullet_yellow.png")]
            private const BulletYellowIcon:Class;

            [Embed("assets/bullet_green.png")]
            private const BulletGreenIcon:Class;

            [Embed("assets/bullet_blue.png")]
            private const BulletBlueIcon:Class;

            private var buttonBarButtonStyles:CSSStyleDeclaration;
            private var arr:Array;
            private var slider:HSlider;
            private var comboBox:ComboBox;
            private var buttonBar:ButtonBar;

            private function init():void {
                arr = [];
                arr.push({label:"Red", icon:BulletRedIcon});
                arr.push({label:"Orange", icon:BulletOrangeIcon});
                arr.push({label:"Yellow", icon:BulletYellowIcon});
                arr.push({label:"Green", icon:BulletGreenIcon});
                arr.push({label:"Blue", icon:BulletBlueIcon});

                buttonBarButtonStyles = new CSSStyleDeclaration(".buttonBarButtonStyles");
                buttonBarButtonStyles.setStyle("textAlign", "left");

                slider = new HSlider();
                slider.minimum = 16;
                slider.maximum = 48;
                slider.value = 24;
                slider.snapInterval = 1;
                slider.tickInterval = 2;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE,
                            slider_change);

                comboBox = new ComboBox();
                comboBox.dataProvider = [BoxDirection.HORIZONTAL, BoxDirection.VERTICAL];
                comboBox.addEventListener(ListEvent.CHANGE,
                            comboBox_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "buttonHeight:";
                formItem1.addChild(slider);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "direction:";
                formItem2.addChild(comboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                buttonBar = new ButtonBar();
                buttonBar.dataProvider = arr;
                buttonBar.setStyle("buttonHeight", 24);
                buttonBar.setStyle("buttonStyleName", "buttonBarButtonStyles");
                addChild(buttonBar);
            }

            private function slider_change(evt:SliderEvent):void {
                buttonBar.setStyle("buttonHeight", evt.value);
            }

            private function comboBox_change(evt:ListEvent):void {
                buttonBar.direction = comboBox.selectedItem.toString();
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/23/setting-the-layout-direction-of-a-tilelist-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                tileList.direction = evt.item.label;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="horizontal" />
        <mx:Object label="vertical" />
    </mx:Array>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" />
                <mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" />
                <mx:Object label="Fireworks" icon="@Embed('assets/fw_appicon-tn.gif')" />
                <mx:Object label="Flash" icon="@Embed('assets/fl_appicon-tn.gif')" />
                <mx:Object label="Flash Player" icon="@Embed('assets/fl_player_appicon-tn.gif')" />
                <mx:Object label="Flex" icon="@Embed('assets/fx_appicon-tn.gif')" />
                <mx:Object label="Illustrator" icon="@Embed('assets/ai_appicon-tn.gif')" />
                <mx:Object label="Lightroom" icon="@Embed('assets/lr_appicon-tn.gif')" />
                <mx:Object label="Photoshop" icon="@Embed('assets/ps_appicon-tn.gif')" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        dataProvider="{arr}"
                        selectedIndex="0"
                        itemClick="toggleButtonBar_itemClick(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            alternatingItemColors="[#FFFFFF,#EEEEEE]"
            columnCount="3"
            columnWidth="100"
            rowCount="2"
            rowHeight="100"
            direction="horizontal"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="on" />

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        FormItem {
            labelStyleName: myFormItemLabelStyleName;
        }

        .myFormItemLabelStyleName {
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Form id="form">
        <mx:FormItem label="horizontal:"
                direction="horizontal">
            <mx:Image source="{Icons.AIR_ICON}"
                    toolTip="Adobe AIR" />
            <mx:Image source="{Icons.FLASH_ICON}"
                    toolTip="Adobe Flash" />
            <mx:Image source="{Icons.FLASH_PLAYER_ICON}"
                    toolTip="Adobe Flash Player" />
            <mx:Image source="{Icons.FLEX_ICON}"
                    toolTip="Adobe Flex" />
        </mx:FormItem>
        <mx:FormItem label="vertical:"
                direction="vertical">
            <mx:Image source="{Icons.AIR_ICON}"
                    toolTip="Adobe AIR" />
            <mx:Image source="{Icons.FLASH_ICON}"
                    toolTip="Adobe Flash" />
            <mx:Image source="{Icons.FLASH_PLAYER_ICON}"
                    toolTip="Adobe Flash Player" />
            <mx:Image source="{Icons.FLEX_ICON}"
                    toolTip="Adobe Flex" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

/src/Icons.as

/** http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ */
package {
    [Bindable]
    public class Icons {
        public function Icons() {
        }

        [Embed("assets/air_appicon-tn.gif")]
        public static var AIR_ICON:Class;

        [Embed("assets/fl_appicon-tn.gif")]
        public static var FLASH_ICON:Class;

        [Embed("assets/fl_player_appicon-tn.gif")]
        public static var FLASH_PLAYER_ICON:Class;

        [Embed("assets/fx_appicon-tn.gif")]
        public static var FLEX_ICON:Class;
    }
}

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/13/setting-the-layout-direction-of-a-flex-controlbar-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
        <mx:Object label="DataGrid" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar id="toggleButtonBar"
                selectedIndex="1"
                itemClick="cBar.direction = event.label;">
            <mx:dataProvider>
                <mx:Array>
                    <mx:String>horizontal</mx:String>
                    <mx:String>vertical</mx:String>
                </mx:Array>
            </mx:dataProvider>
        </mx:ToggleButtonBar>
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            width="320"
            height="160">
        <mx:List id="list"
                dataProvider="{arr}"
                width="100%"
                rowCount="{arr.length}" />
        <mx:ControlBar id="cBar"
                direction="vertical"
                horizontalAlign="right">
            <mx:Button label="Submit" />
            <mx:Button label="Cancel" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/08/setting-horizontal-and-vertical-gaps-between-buttons-in-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="The" />
        <mx:Object label="quick" />
        <mx:Object label="brown" />
        <mx:Object label="fox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalGap:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-2"
                        maximum="10"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            verticalGap="{slider.value}"
            direction="vertical" />

</mx:Application>

View source is enabled in the following example.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/08/setting-horizontal-and-vertical-gaps-between-buttons-in-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="The" />
        <mx:Object label="quick" />
        <mx:Object label="brown" />
        <mx:Object label="fox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-2"
                        maximum="10"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            horizontalGap="{slider.value}"
            direction="horizontal" />

</mx:Application>

View source is enabled in the following example.

You could also set the horizontalGap or verticalGap style in an external .CSS file or <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    ButtonBar {
        horizontalGap: 16;
    }
</mx:Style>

Or, you can set the horizontalGap or verticalGap style using ActionScript, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        private function init():void {
            buttonBar.setStyle("horizontalGap", 16);
        }
    ]]>
</mx:Script>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/changing-a-box-containers-direction-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
            backgroundColor: haloSilver;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.containers.BoxDirection;

            private function comboBox_init():void {
                var arr:Array = [];
                arr.push({label:BoxDirection.HORIZONTAL});
                arr.push({label:BoxDirection.VERTICAL});
                comboBox.dataProvider = arr;
            }

            private function comboBox_change(evt:ListEvent):void {
                box.direction = comboBox.selectedLabel;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox"
                        initialize="comboBox_init();"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Box id="box" direction="horizontal" styleName="myBox">
        <mx:Image source="Button.png" toolTip="Button" />
        <mx:Image source="ButtonBar.png" toolTip="ButtonBar" />
        <mx:Image source="CheckBox.png" toolTip="CheckBox" />
        <mx:Image source="ColorPicker.png" toolTip="ColorPicker" />
        <mx:Image source="ComboBox.png" toolTip="ComboBox" />
    </mx:Box>

</mx:Application>

View source is enabled in the following example.

 

<mx:Legend dataProvider="{lineChart}" direction="horizontal" />

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/17/changing-a-chart-legends-direction/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                var idx:uint = ToggleButtonBar(evt.currentTarget).selectedIndex;
                legend.direction = arr[idx];
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Array id="arr">
        <mx:String>horizontal</mx:String>
        <mx:String>vertical</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar id="toggleButtonBar"
                dataProvider="{arr}"
                selectedIndex="0"
                itemClick="toggleButtonBar_itemClick(event);" />
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">

        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false"
                    title="Price" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                    categoryField="@date"
                    title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}"
                    canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries yField="@close"
                    form="curve"
                    displayName="Close" />
            <mx:LineSeries yField="@open"
                    form="curve"
                    displayName="Open" />
        </mx:series>
    </mx:LineChart>

    <mx:ControlBar>
        <mx:Legend id="legend"
                dataProvider="{lineChart}"
                direction="horizontal" />
    </mx:ControlBar>

</mx:Application>

View source is enabled in the following example.

 

<mx:LineChart dataProvider="{dp}">

    <mx:backgroundElements>
        <mx:GridLines direction="vertical" />
    </mx:backgroundElements>

</mx:LineChart>

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/15/displaying-grid-lines-in-a-flex-linechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="GridLines direction:">
                <mx:ToggleButtonBar id="toggleButtonBar" selectedIndex="0">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>horizontal</mx:String>
                            <mx:String>vertical</mx:String>
                            <mx:String>both</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ToggleButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">

        <mx:backgroundElements>
            <mx:GridLines direction="{toggleButtonBar.dataProvider.getItemAt(toggleButtonBar.selectedIndex)}" />
        </mx:backgroundElements>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false" title="Price" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries yField="@open" form="curve" displayName="Open" />
        </mx:series>
    </mx:LineChart>

</mx:Application>

View source is enabled in the following example.