Changing a Box container’s direction in Flex

The following example shows you how you can change the direction of a Box container in Flex by setting the direction property to one of the constants in the BoxDirection class. The <mx:Box /> container is the superclass of the HBox container and VBox container. The subclasses (HBox and VBox) do not add any new functionality, they simply set the direction property automatically to “horizontal” or “vertical”.

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.

Tagged as: direction