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/10/27/setting-word-wrapping-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_layout_horizontalAlign_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:List id="lst"
            alternatingItemColors="[#DFDFDF,#EEEEEE]"
            useVirtualLayout="false"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
                <fx:Object label="Fusce pulvinar nisi ac leo rhoncus nec malesuada arcu accumsan." />
                <fx:Object label="Sed at metus eu mauris malesuada ornare." />
                <fx:Object label="Vestibulum et ante non arcu facilisis sagittis." />
                <fx:Object label="Praesent euismod bibendum tortor, pharetra pharetra nibh ultricies convallis." />
                <fx:Object label="Sed at mi quis urna lobortis mattis." />
                <fx:Object label="Nulla aliquet ante nec nisi auctor et pharetra leo blandit." />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</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.

 

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/02/25/setting-the-horizontal-alignment-on-a-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_layout_VerticalLayout_horizontalAlign_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">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="horizontalAlign:">
                <s:DropDownList id="comboBox"
                          selectedIndex="4">
                    <s:dataProvider>
                        <s:ArrayList source="[left,center,right,justify,contentJustify]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:List id="list"
            alternatingItemColors="[#DFDFDF,#EEEEEE]"
            width="260"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="{comboBox.selectedItem}"
                    requestedRowCount="6" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>0. The quick brown fox jumps over the lazy dog</fx:String>
                <fx:String>1. The</fx:String>
                <fx:String>2. Quick</fx:String>
                <fx:String>3. Brown</fx:String>
                <fx:String>4. Fox</fx:String>
                <fx:String>5. Jumps</fx:String>
                <fx:String>6. Over</fx:String>
                <fx:String>7. The</fx:String>
                <fx:String>8. Lazy</fx:String>
                <fx:String>9. Dog</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

View source is enabled in the following example.

Or you can set the horizontalAlign property using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-horizontal-alignment-on-a-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_layout_VerticalLayout_horizontalAlign_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">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="horizontalAlign:">
                <s:DropDownList id="comboBox"
                        selectedIndex="4"
                        change="comboBox_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[left,center,right,justify,contentJustify]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
 
            protected function comboBox_changeHandler(evt:IndexChangeEvent):void {
                VerticalLayout(list.layout).horizontalAlign = comboBox.selectedItem;
            }
        ]]>
    </fx:Script>
 
    <s:List id="list"
            alternatingItemColors="[#DFDFDF,#EEEEEE]"
            width="260"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    requestedRowCount="6" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>0. The quick brown fox jumps over the lazy dog</fx:String>
                <fx:String>1. The</fx:String>
                <fx:String>2. Quick</fx:String>
                <fx:String>3. Brown</fx:String>
                <fx:String>4. Fox</fx:String>
                <fx:String>5. Jumps</fx:String>
                <fx:String>6. Over</fx:String>
                <fx:String>7. The</fx:String>
                <fx:String>8. Lazy</fx:String>
                <fx:String>9. Dog</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/19/horizontally-aligning-tabs-within-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_horizontalAlign_test"
        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="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalAlign:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="center" />
                            <mx:Object label="right" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Box backgroundColor="haloSilver">
        <mx:TabBar id="tabBar"
                dataProvider="{arr}"
                width="600"
                tabWidth="100"
                tabHeight="40"
                horizontalAlign="{comboBox.selectedItem.label}"
                direction="horizontal" />
    </mx:Box>

</mx:Application>

View source is enabled in the following example.

You can also set the horizontalAlign 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/03/19/horizontally-aligning-tabs-within-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_horizontalAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TabBar {
            horizontalAlign: center;
            tabWidth: 100;
            tabHeight: 40;
        }

    </mx:Style>

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

    <mx:Box backgroundColor="haloSilver">
        <mx:TabBar id="tabBar"
                dataProvider="{arr}"
                width="600"
                direction="horizontal" />
    </mx:Box>

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/19/horizontally-aligning-tabs-within-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_horizontalAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function comboBox_change(evt:ListEvent):void {
                tabBar.setStyle("horizontalAlign", comboBox.selectedItem.label);
            }
        ]]>
    </mx:Script>

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalAlign:">
                <mx:ComboBox id="comboBox"
                        change="comboBox_change(event);">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="center" />
                            <mx:Object label="right" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Box backgroundColor="haloSilver">
        <mx:TabBar id="tabBar"
                dataProvider="{arr}"
                width="600"
                tabWidth="100"
                tabHeight="40"
                direction="horizontal" />
    </mx:Box>

</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/03/19/horizontally-aligning-tabs-within-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_horizontalAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

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

            private var arr:Array;
            private var comboBox:ComboBox;
            private var tabBar:TabBar;

            private function init():void {
                arr = [];
                arr.push({label:"Button"});
                arr.push({label:"ButtonBar"});
                arr.push({label:"ColorPicker"});
                arr.push({label:"ComboBox"});

                var dp:Array = [];
                dp.push({label:"left"});
                dp.push({label:"center"});
                dp.push({label:"right"});

                comboBox = new ComboBox();
                comboBox.dataProvider = dp;
                comboBox.addEventListener(ListEvent.CHANGE,
                            comboBox_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "horizontalAlign:";
                formItem.addChild(comboBox);

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

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

                tabBar = new TabBar();
                tabBar.dataProvider = arr;
                tabBar.width = 600;
                tabBar.setStyle("tabWidth", 100);
                tabBar.setStyle("tabHeight", 40);
                tabBar.direction = BoxDirection.HORIZONTAL;

                var box:Box = new Box();
                box.setStyle("backgroundColor", "haloSilver");
                box.addChild(tabBar);
                addChild(box);
            }

            private function comboBox_change(evt:ListEvent):void {
                tabBar.setStyle("horizontalAlign",
                            comboBox.selectedItem.label);
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

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

    <mx:Style>
        Form {
            backgroundColor: white;
            backgroundAlpha: 0.2;
            borderColor: black;
            borderStyle: solid;
            borderThickness: 1;
        }

        FormItem {
            labelStyleName: myFormItemLabelStyleName;
        }

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

    <mx:Form id="form" width="300">
        <mx:FormItem label="left:"
                horizontalAlign="left"
                width="100%">
            <mx:Image source="@Embed('assets/air_appicon-tn.gif')" />
        </mx:FormItem>
        <mx:FormItem label="center:"
                horizontalAlign="center"
                width="100%">
            <mx:Image source="@Embed('assets/fl_appicon-tn.gif')" />
        </mx:FormItem>
        <mx:FormItem label="right:"
                horizontalAlign="right"
                width="100%">
            <mx:Image source="@Embed('assets/fx_appicon-tn.gif')" />
        </mx:FormItem>
    </mx:Form>

</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/02/24/aligning-items-horizontally-in-a-controlbar-container-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 {
                cBar.setStyle("horizontalAlign", evt.label);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="left" />
        <mx:Object label="center" />
        <mx:Object label="right" />
    </mx:Array>

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

    <mx:Panel id="panel"
            width="320"
            height="160">
        <mx:Label text="Button" />
        <mx:Label text="ButtonBar" />
        <mx:Label text="CheckBox" />
        <mx:Label text="ColorPicker" />
        <mx:Label text="ComboBox" />
        <mx:Label text="DataGrid" />

        <mx:ControlBar id="cBar">
            <mx:Button label="Submit" />
            <mx:Button label="Cancel" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

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

<mx:Style>
    ControlBar {
        horizontalAlign: center;
    }
</mx:Style>

Or, you can set the horizontalAlign style in MXML directly, using the following snippet:

<mx:ControlBar id="cBar" horizontalAlign="center">
    <mx:Button label="Submit" />
    <mx:Button label="Cancel" />
</mx:ControlBar>

 

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/09/25/using-the-tabnavigator-controls-taboffset-style-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="tabOffset:">
                <mx:HSlider id="slider"
                        minimum="-100"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="10"
                        dataTipPrecision="0"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="horizontalAlign:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>left</mx:String>
                            <mx:String>center</mx:String>
                            <mx:String>right</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TabNavigator id="tabNavigator"
            width="100%"
            height="100%"
            tabOffset="{slider.value}"
            horizontalAlign="{comboBox.selectedItem}">
        <mx:VBox label="Panel 1" backgroundColor="haloOrange">
            <mx:Label text="TabNavigator container panel 1"/>
        </mx:VBox>
        <mx:VBox label="Panel 2" backgroundColor="haloGreen">
            <mx:Label text="TabNavigator container panel 2"/>
        </mx:VBox>
        <mx:VBox label="Panel 3" backgroundColor="haloBlue">
            <mx:Label text="TabNavigator container panel 3"/>
        </mx:VBox>
        <mx:VBox label="Panel 4" backgroundColor="haloSilver">
            <mx:Label text="TabNavigator container panel 4"/>
        </mx:VBox>
    </mx:TabNavigator>

</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/2007/09/09/changing-tab-alignment-within-a-flex-tabnavigator-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="left" />
        <mx:Object label="center" />
        <mx:Object label="right" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="horizontalAlign:" />
        <mx:ComboBox id="comboBox"
                dataProvider="{arr}" />
    </mx:ApplicationControlBar>

    <mx:TabNavigator id="tabNavigator"
            width="100%"
            height="100%"
            horizontalAlign="{comboBox.selectedItem.label}">

        <mx:VBox label="Tab 1">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

        <mx:VBox label="Tab 2">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

        <mx:VBox label="Tab 3">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

    </mx:TabNavigator>

</mx:Application>

View source is enabled in the following example.

Essentially, what the previous code snippet is doing is using binding to detect when the selected item in the ComboBox changes, and then sets the horizontalAlign style to the selected value. So, for example, if you selected “center” from the ComboBox control’s drop down menu, Flex would interpret it as:

<mx:TabNavigator id="tabNavigator"
        width="100%"
        height="100%"
        horizontalAlign="center">

    <VBox />

</mx:TabNavigator>

You could also set the horizontalAlign style within a <mx:Style /> block using the following snippet:

<mx:Style>
    TabNavigator {
        horizontalAlign: center;
    }
</mx:Style>

The above snippet sets the style globally for all TabNavigator containers. If you wanted to set the style on a single TabNavigator container you could change the “TabNavigator” style name to something like “.MyTabNavigator” (with a leading period), and then set the styleName property witin the desired TabNavigator container to “MyTabNavigator” (with no leading period).
Also note that you could use either the “horizontalAlign” style name or “horizontal-align” style name in the CSS.

Finally, you could also set the horizontalAlign style in ActionScript using the setStyle() method, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        private function init():void {
            tabNavigator.setStyle("horizontalAlign", "center");
        }
    ]]>
</mx:Script>

For the previous snippet to work, you’d need to call the init() method from somewhere in your MXML, such as your main <mx:Application /> tag’s creationComplete event handler.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/changing-a-tile-containers-horizontal-and-vertical-alignment/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="horizontalAlign:" />
        <mx:ComboBox id="hAlign">
            <mx:dataProvider>
                <mx:String>left</mx:String>
                <mx:String>center</mx:String>
                <mx:String>right</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>

        <mx:Spacer width="100" />

        <mx:Label text="verticalAlign:" />
        <mx:ComboBox id="vAlign">
            <mx:dataProvider>
                <mx:String>top</mx:String>
                <mx:String>middle</mx:String>
                <mx:String>bottom</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:ApplicationControlBar>

    <mx:Tile id="tile"
            backgroundColor="haloSilver"
            tileHeight="50"
            tileWidth="50"
            horizontalAlign="{hAlign.selectedItem}"
            verticalAlign="{vAlign.value}">
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
    </mx:Tile>

</mx:Application>

View source is enabled in the following example.

In retrospect, perhaps it isn’t as obvious as I would have hoped. What’s happening in the above example is we set the tile height and width to 50 pixels each. Within each tile, is a 30 pixel square box. So if you change the horizontal alignment to “center” and vertical alignment to “middle”, the red box should be beautifully centered within the the grid.