Setting a specific number of columns in a TileList control in Flex

The following example shows how you can resize a Flex TileList control to a certain number of columns by setting the columnCount property in MXML or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_columnCount_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="One" />
                <mx:Object label="Two" />
                <mx:Object label="Three" />
                <mx:Object label="Four" />
                <mx:Object label="Five" />
                <mx:Object label="Six" />
                <mx:Object label="Seven" />
                <mx:Object label="Eight" />
                <mx:Object label="Nine" />
                <mx:Object label="Ten" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="columnCount:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="5"
                        value="5"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="{slider.value}"
            columnWidth="100"
            rowCount="2"
            rowHeight="100"
            verticalScrollPolicy="on" />

</mx:Application>

View source is enabled in the following example.

You can also set the columnCount property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_columnCount_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function slider_change(evt:SliderEvent):void {
                tileList.columnCount = evt.value;
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="One" />
                <mx:Object label="Two" />
                <mx:Object label="Three" />
                <mx:Object label="Four" />
                <mx:Object label="Five" />
                <mx:Object label="Six" />
                <mx:Object label="Seven" />
                <mx:Object label="Eight" />
                <mx:Object label="Nine" />
                <mx:Object label="Ten" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="columnCount:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="5"
                        value="5"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="5"
            columnWidth="100"
            rowCount="2"
            rowHeight="100"
            verticalScrollPolicy="on" />

</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/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_columnCount_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.HSlider;
            import mx.controls.TileList;
            import mx.core.ScrollPolicy;
            import mx.events.SliderEvent;

            private var arrColl:ArrayCollection;
            private var slider:HSlider;
            private var tileList:TileList;

            private function init():void {
                arrColl = new ArrayCollection();
                arrColl.addItem({label:"One"});
                arrColl.addItem({label:"Two"});
                arrColl.addItem({label:"Three"});
                arrColl.addItem({label:"Four"});
                arrColl.addItem({label:"Five"});
                arrColl.addItem({label:"Six"});
                arrColl.addItem({label:"Seven"});
                arrColl.addItem({label:"Eight"});
                arrColl.addItem({label:"Nine"});
                arrColl.addItem({label:"Ten"});

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

                var formItem:FormItem = new FormItem();
                formItem.label = "columnCount:";
                formItem.addChild(slider);

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

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

                tileList = new TileList();
                tileList.dataProvider = arrColl;
                tileList.columnCount = 5;
                tileList.columnWidth = 100;
                tileList.rowCount = 2;
                tileList.rowHeight = 100;
                tileList.verticalScrollPolicy = ScrollPolicy.ON;
                addChild(tileList);
            }

            private function slider_change(evt:SliderEvent):void {
                tileList.columnCount = evt.value;
            }
        ]]>
    </mx:Script>

</mx:Application>

Tagged as: columnCount