Flex Examples » TileList http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Alternating tile background colors for items in a TileList control in Flex http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/#comments Sun, 10 Aug 2008 19:47:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ The following example shows how you can set alternating background colors for tiles in a Flex TileList control by setting the alternatingItemColors style using MXML, CSS or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ --> <mx:Application name="TileList_alternatingItemColors_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 [...]]]> The following example shows how you can set alternating background colors for tiles in a Flex TileList control by setting the alternatingItemColors style using MXML, CSS or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_alternatingItemColors_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:Object label="Eleven" />
                <mx:Object label="Twelve" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="4"
            columnWidth="120"
            rowCount="3"
            rowHeight="80"
            alternatingItemColors="[#FFFFFF,#CCCCCC,#999999]" />

</mx:Application>

View source is enabled in the following example.

You can also set the alternatingItemColors 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/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_alternatingItemColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TileList {
            alternatingItemColors: #FFFFFF, #CCCCCC, #999999;
        }
    </mx:Style>

    <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:Object label="Eleven" />
                <mx:Object label="Twelve" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="4"
            columnWidth="120"
            rowCount="3"
            rowHeight="80" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_alternatingItemColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                var colorArr:Array = [0xFFFFFF, 0xCCCCCC, 0x999999];
                tileList.setStyle("alternatingItemColors", colorArr);
            }
        ]]>
    </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:Object label="Eleven" />
                <mx:Object label="Twelve" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="4"
            columnWidth="120"
            rowCount="3"
            rowHeight="80"
            initialize="init();" />

</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/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_alternatingItemColors_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.controls.TileList;

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

            private function init():void {
                var arrColl:ArrayCollection = 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"});
                arrColl.addItem({label:"Eleven"});
                arrColl.addItem({label:"Twelve"});

                var colorArr:Array = [0xFFFFFF, 0xCCCCCC, 0x999999];

                tileList = new TileList();
                tileList.dataProvider = arrColl;
                tileList.columnCount = 4;
                tileList.columnWidth = 120;
                tileList.rowCount = 3;
                tileList.rowHeight = 80;
                tileList.setStyle("alternatingItemColors", colorArr);
                addChild(tileList);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/feed/ 1 Setting the row height of a tile in a TileList control in Flex http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/ http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/#comments Sun, 10 Aug 2008 06:58:05 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/ In a previous example, “Setting the column width of a tile in a TileList control in Flex”, we saw how you could change the width of a tile in a Flex TileList control by setting the columnWidth property.

The following example shows how you can set the row height of a tile in a [...]]]> In a previous example, “Setting the column width of a tile in a TileList control in Flex”, we saw how you could change the width of a tile in a Flex TileList control by setting the columnWidth property.

The following example shows how you can set the row height of a tile in a Flex TileList control by setting the rowHeight property in MXML and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowHeight_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="rowHeight:">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="100"
                        value="100"
                        snapInterval="1"
                        tickInterval="5"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="5"
            columnWidth="100"
            rowCount="2"
            rowHeight="{slider.value}"
            alternatingItemColors="[#FFFFFF,#EEEEEE]" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowHeight_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.rowHeight = 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="rowHeight:">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="100"
                        value="100"
                        snapInterval="1"
                        tickInterval="5"
                        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"
            alternatingItemColors="[#FFFFFF,#EEEEEE]" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/feed/ 0 Setting the column width of a tile in a TileList control in Flex http://blog.flexexamples.com/2008/08/09/setting-the-column-width-of-a-tile-in-a-tilelist-control-in-flex/ http://blog.flexexamples.com/2008/08/09/setting-the-column-width-of-a-tile-in-a-tilelist-control-in-flex/#comments Sun, 10 Aug 2008 06:49:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/09/setting-the-column-width-of-a-tile-in-a-tilelist-control-in-flex/ The following example shows how you can set the column width of a tile in a Flex TileList control by setting the columnWidth property in MXML and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/09/setting-the-column-width-of-a-tile-in-a-tilelist-control-in-flex/ --> <mx:Application name="TileList_columnWidth_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 [...]]]> The following example shows how you can set the column width of a tile in a Flex TileList control by setting the columnWidth property in MXML and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/09/setting-the-column-width-of-a-tile-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_columnWidth_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="columnWidth:">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="100"
                        value="100"
                        snapInterval="1"
                        tickInterval="5"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="5"
            columnWidth="{slider.value}"
            rowCount="2"
            rowHeight="100"
            alternatingItemColors="[#FFFFFF,#EEEEEE]" />

</mx:Application>

View source is enabled in the following example.

You an also set the columnWidth property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/09/setting-the-column-width-of-a-tile-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_columnWidth_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.columnWidth = 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="columnWidth:">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="100"
                        value="100"
                        snapInterval="1"
                        tickInterval="5"
                        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"
            alternatingItemColors="[#FFFFFF,#EEEEEE]" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/09/setting-the-column-width-of-a-tile-in-a-tilelist-control-in-flex/feed/ 0 Setting a specific number of rows in a TileList control in Flex http://blog.flexexamples.com/2008/08/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/ http://blog.flexexamples.com/2008/08/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/#comments Sat, 09 Aug 2008 06:51:47 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/ In a previous example, “Setting a specific number of columns in a TileList control in Flex”, we saw how to resize a TileList control based on a specific number of columns by setting the columnCount property.

The following example shows how you can resize a Flex TileList control to a certain number of rows [...]]]> In a previous example, “Setting a specific number of columns in a TileList control in Flex”, we saw how to resize a TileList control based on a specific number of columns by setting the columnCount property.

The following example shows how you can resize a Flex TileList control to a certain number of rows by setting the rowCount 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/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowCount_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="rowCount:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="3"
                        value="3"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="4"
            columnWidth="100"
            rowCount="{slider.value}"
            rowHeight="50"
            verticalScrollPolicy="on"
            dragEnabled="true"
            dragMoveEnabled="true"
            dropEnabled="true" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowCount_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.rowCount = 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="rowCount:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="3"
                        value="3"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            columnCount="4"
            columnWidth="100"
            rowCount="3"
            rowHeight="50"
            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/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowCount_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 = 3;
                slider.value = 3;
                slider.snapInterval = 1;
                slider.tickInterval = 1;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "rowCount:";
                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 = 4;
                tileList.columnWidth = 100;
                tileList.rowCount = 3;
                tileList.rowHeight = 50;
                tileList.verticalScrollPolicy = ScrollPolicy.ON;
                addChild(tileList);
            }

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

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/feed/ 2 Setting a specific number of columns in a TileList control in Flex http://blog.flexexamples.com/2008/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/ http://blog.flexexamples.com/2008/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/#comments Fri, 08 Aug 2008 06:53:20 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/07/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" [...]]]> 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>
 
]]> http://blog.flexexamples.com/2008/08/07/setting-a-specific-number-of-columns-in-a-tilelist-control-in-flex/feed/ 10 Dynamically loading XML files using the HTTPService tag http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/ http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/#comments Sun, 30 Mar 2008 06:59:35 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/ In previous examples, “Creating a simple image gallery with the Flex TileList control” and “Creating a simple image gallery with the Flex HorizontalList control”, we saw how you could create a simple image gallery using the TileList and HorizontalList controls.

The following example shows how you can load XML files using the HTTPService [...]]]> In previous examples, “Creating a simple image gallery with the Flex TileList control” and “Creating a simple image gallery with the Flex HorizontalList control”, we saw how you could create a simple image gallery using the TileList and HorizontalList controls.

The following example shows how you can load XML files using the HTTPService tag so that you can dynamically load different galleries.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;

            private var alert:Alert;

            private function loadGallery(src:String):void {
                httpService.url = src;
                httpService.send();
            }

            private function httpService_fault(evt:FaultEvent):void {
                var title:String = evt.type + " (" + evt.fault.faultCode + ")";
                var text:String = evt.fault.faultString;
                alert = Alert.show(text, title);
                xmlListColl.removeAll();
            }

            private function httpService_result(evt:ResultEvent):void {
                var xmlList:XMLList = XML(evt.result).images.image;
                xmlListColl = new XMLListCollection(xmlList);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="xmlListColl" />

    <mx:HTTPService id="httpService"
            resultFormat="e4x"
            fault="httpService_fault(event);"
            result="httpService_result(event)" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="gallery 1"
                click="loadGallery('gallery1.xml');" />
        <mx:Button label="gallery 2"
                click="loadGallery('gallery2.xml');" />

        <mx:Button label="gallery 404"
                click="loadGallery('gallery404.xml');" />
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{xmlListColl}"
            itemRenderer="TileListItemRenderer"
            columnCount="3"
            columnWidth="150"
            rowCount="2"
            rowHeight="100" />

</mx:Application>

TileListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/ -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Image source="{data.@src}"
            horizontalCenter="0"
            verticalCenter="0" />

    <mx:Label text="{data.@lbl}"
            fontWeight="bold"
            horizontalCenter="0"
            bottom="0" />

</mx:Canvas>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/feed/ 23 Setting the layout direction of a TileList control in Flex http://blog.flexexamples.com/2008/03/23/setting-the-layout-direction-of-a-tilelist-control-in-flex/ http://blog.flexexamples.com/2008/03/23/setting-the-layout-direction-of-a-tilelist-control-in-flex/#comments Mon, 24 Mar 2008 05:06:51 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/23/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; } [...]]]> 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>
 
]]> http://blog.flexexamples.com/2008/03/23/setting-the-layout-direction-of-a-tilelist-control-in-flex/feed/ 1 Changing live dragging on a TileList control in Flex http://blog.flexexamples.com/2008/03/16/changing-live-dragging-on-a-tilelist-control-in-flex/ http://blog.flexexamples.com/2008/03/16/changing-live-dragging-on-a-tilelist-control-in-flex/#comments Sun, 16 Mar 2008 14:47:43 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/16/changing-live-dragging-on-a-tilelist-control-in-flex/ The following example shows how you can enable or disable live dragging on a Flex TileList control by setting the liveScrolling property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/16/changing-live-dragging-on-a-tilelist-control-in-flex/ --> <mx:Application 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="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" /> <mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" /> [...]]]> The following example shows how you can enable or disable live dragging on a Flex TileList control by setting the liveScrolling property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/16/changing-live-dragging-on-a-tilelist-control-in-flex/ -->
<mx:Application 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="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: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="liveScrolling:">
                <mx:CheckBox id="checkBox"
                        creationComplete="checkBox.selected = tileList.liveScrolling;" />
            </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"
            verticalScrollPolicy="on"
            liveScrolling="{checkBox.selected}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/16/changing-live-dragging-on-a-tilelist-control-in-flex/feed/ 7 Creating a simple image gallery with the Flex TileList control http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/#comments Sat, 08 Mar 2008 19:54:24 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ [...]]]> Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        global {
            modal-transparency: 0.9;
            modal-transparency-color: white;
            modal-transparency-blur: 9;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.effects.Resize;
            import mx.events.ResizeEvent;
            import mx.events.ListEvent;
            import mx.controls.Image;
            import mx.events.ItemClickEvent;
            import mx.managers.PopUpManager;

            private var img:Image;

            private function tileList_itemClick(evt:ListEvent):void {
                img = new Image();
                // img.width = 300;
                // img.height = 300;
                img.maintainAspectRatio = true;
                img.addEventListener(Event.COMPLETE, image_complete);
                img.addEventListener(ResizeEvent.RESIZE, image_resize);
                img.addEventListener(MouseEvent.CLICK, image_click);
                img.source = evt.itemRenderer.data.@fullImage;
                img.setStyle("addedEffect", image_addedEffect);
                img.setStyle("removedEffect", image_removedEffect);
                PopUpManager.addPopUp(img, this, true);
            }

            private function image_click(evt:MouseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as Image);
            }

            private function image_resize(evt:ResizeEvent):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }

            private function image_complete(evt:Event):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
        ]]>
    </mx:Script>

    <mx:WipeDown id="image_addedEffect" startDelay="100" />

    <mx:Parallel id="image_removedEffect">
        <mx:Zoom />
        <mx:Fade />
    </mx:Parallel>

    <mx:XML id="xml" source="gallery.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />

    <mx:TileList id="tileList"
            dataProvider="{xmlListColl}"
            itemRenderer="CustomItemRenderer"
            columnCount="4"
            columnWidth="125"
            rowCount="2"
            rowHeight="100"
            themeColor="haloSilver"
            verticalScrollPolicy="on"
            itemClick="tileList_itemClick(event);" />

</mx:Application>

View CustomItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="center"
        verticalAlign="middle">

    <mx:Image source="{data.@thumbnailImage}" />

    <mx:Label text="{data.@title}" />

</mx:VBox>

View gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<gallery>
    <image title="Flex"
        thumbnailImage="assets/fx_appicon-tn.gif"
        fullImage="assets/fx_appicon.jpg" />
    <image title="Flash"
            thumbnailImage="assets/fl_appicon-tn.gif"
            fullImage="assets/fl_appicon.jpg" />
    <image title="Illustrator"
            thumbnailImage="assets/ai_appicon-tn.gif"
            fullImage="assets/ai_appicon.jpg" />
    <image title="Dreamweaver"
            thumbnailImage="assets/dw_appicon-tn.gif"
            fullImage="assets/dw_appicon.jpg" />
    <image title="ColdFusion"
            thumbnailImage="assets/cf_appicon-tn.gif"
            fullImage="assets/cf_appicon.jpg" />
    <image title="Flash Player"
            thumbnailImage="assets/fl_player_appicon-tn.gif"
            fullImage="assets/fl_player_appicon.jpg" />
    <image title="Fireworks"
            thumbnailImage="assets/fw_appicon-tn.gif"
            fullImage="assets/fw_appicon.jpg" />
    <image title="Lightroom"
            thumbnailImage="assets/lr_appicon-tn.gif"
            fullImage="assets/lr_appicon.jpg" />
    <image title="Photoshop"
            thumbnailImage="assets/ps_appicon-tn.gif"
            fullImage="assets/ps_appicon.jpg" />
</gallery>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/feed/ 92 Using the Flex TileList class’s new dataChangeEffect style in Flex 3 http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/ http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/#comments Sat, 29 Sep 2007 01:59:54 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/ The following example shows how you can add nice list effects when items are reordered in a TileList control.

For more information on the new List and Data effects, see “Flex 3:Feature Introductions: List and Data Effects”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/ --> <mx:Application [...]]]> The following example shows how you can add nice list effects when items are reordered in a TileList control.

For more information on the new List and Data effects, see “Flex 3:Feature Introductions: List and Data Effects”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DefaultTileListEffect id="myTileListEffect"
            fadeOutDuration="500"
            fadeInDuration="500"
            moveDuration="1500" />

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object source="assets/Accordion.png"
                        label="Accordion" />
                <mx:Object source="assets/ApplicationControlBar.png"
                        label="ApplicationControlBar" />
                <mx:Object source="assets/Box.png"
                        label="Box" />
                <mx:Object source="assets/Button.png"
                        label="Button" />
                <mx:Object source="assets/ButtonBar.png"
                        label="ButtonBar" />
                <mx:Object source="assets/CheckBox.png"
                        label="CheckBox" />
                <mx:Object source="assets/ColorPicker.png"
                        label="ColorPicker" />
                <mx:Object source="assets/ComboBox.png"
                        label="ComboBox" />
                <mx:Object source="assets/DataGrid.png"
                        label="DataGrid" />
                <mx:Object source="assets/DateChooser.png"
                        label="DateChooser" />
                <mx:Object source="assets/DateField.png"
                        label="DateField" />
                <mx:Object source="assets/HorizontalList.png"
                        label="HorizontalList" />
                <mx:Object source="assets/HRule.png"
                        label="HRule" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:TileList id="tileList"
            dataChangeEffect="{myTileListEffect}"
            dataProvider="{arrColl}"
            itemRenderer="TileListItemRenderer"
            dragEnabled="true"
            dropEnabled="true"
            dragMoveEnabled="true"
            columnWidth="100"
            rowHeight="100"
            width="100%"
            height="100%" />

</mx:Application>

View TileListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        styleName="plain"
        verticalAlign="middle"
        horizontalAlign="center"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        width="100%"
        height="100%">

    <mx:Image source="{data.source}" />
    <mx:Label text="{data.label}"
            truncateToFit="true"
            width="96" />

</mx:VBox>

View source is enabled in the following example.

It seems that the dataChangeEffect effect was renamed to itemsChangeEffect in Flex 3 SDK build #184751 (Sat Oct 13 2007 — go to Adobe Labs: Flex 3 Software Development Kit (SDK) to download the latest nightly builds of the Flex 3 SDK). The previous example should still work as typed, although you’ll need to change the dataChangeEffect to itemsChangeEffect if you’re using a Flex 3 SDK build newer than October 13, 2007. For more information, see “dataChangeEffect is declared as a Style, not an Effect, and is not triggered by the dataChange event” in the public Flex bug base.

 
]]> http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/feed/ 39