Setting the layout direction of a TileList control in Flex

The following example shows how you can toggle the item layout direction of the Flex TileList control by setting the direction property to “horizontal” or “vertical”.

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>

Tagged as: direction