Setting an effect when the items in a data provider change on a List control in Flex

The following example shows how you can add a data effect when the items in a data provider change in a Flex List control by setting the itemsChangeEffect effect style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DefaultListEffect id="defaultListEffect" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            itemsChangeEffect="{defaultListEffect}"
            variableRowHeight="true"
            width="200" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        List {
            itemsChangeEffect: ClassReference("mx.effects.DefaultTileListEffect");
        }
    </mx:Style>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            variableRowHeight="true"
            width="200" />

</mx:Application>

Or, you can set the itemsChangeEffect effect using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.effects.DefaultListEffect;

            private function init():void {
                list.setStyle("itemsChangeEffect", DefaultListEffect);
            }

            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            variableRowHeight="true"
            width="200"
            initialize="init();" />

</mx:Application>

Tagged as: itemsChangeEffect