<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.effects.easing.Elastic;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var myDP:ArrayCollection = new ArrayCollection(
                ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']);

            private function deleteItem():void {
                // As each item is removed, the index of the other items changes.
                // So first get the items to delete, then determine their indices
                // as you remove them.
                var toRemove:Array = [];
                for (var i:int = 0; i < tlist0.selectedItems.length; i++)
                    toRemove.push(tlist0.selectedItems[i]);
                for (i = 0; i < toRemove.length; i++)
                    myDP.removeItemAt(myDP.getItemIndex(toRemove[i]));
            }

            private var zcount:int = 0;
            private function addItem():void {
                // Always add the new item after the third item,
                // or after the last item if the length is less than 3.
                myDP.addItemAt("Z"+zcount++,Math.min(3,myDP.length));
            }
        ]]>
    </fx:Script>

    <!-- Define a custom data effect as a Halo Sequence effect. -->
    <fx:Declarations>
        <mx:Sequence id="itemsChangeEffect1">
            <mx:Blur
                blurYTo="12" blurXTo="12"
                duration="300"
                perElementOffset="150"
                filter="removeItem"/>
            <mx:Parallel>
                <mx:Move
                    duration="750"
                    easingFunction="{Elastic.easeOut}"
                    perElementOffset="20"/>
                <mx:RemoveItemAction
                    startDelay="400"
                    filter="removeItem"/>
                <mx:AddItemAction
                    startDelay="400"
                    filter="addItem"/>
                <mx:Blur
                    startDelay="410"
                    blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0"
                    duration="300"
                    filter="addItem"/>
            </mx:Parallel>
        </mx:Sequence>
    </fx:Declarations>

    <s:Panel title="AddItemEffect/RemoveItemEffect Example" width="75%" height="75%" >
        <s:VGroup left="20" right="20" top="20" bottom="20">
        <!-- This TileList uses a custom data change effect -->
        <mx:TileList id="tlist0"
            height="100%" width="100%"
            fontSize="18" fontStyle="italic"
            columnCount="4" rowCount="4"
            direction="horizontal"
            dataProvider="{myDP}"
            allowMultipleSelection="true"
            offscreenExtraRowsOrColumns="4"
            itemsChangeEffect="{itemsChangeEffect1}"/>

            <s:Button
                label="Delete selected item(s)"
            click="deleteItem();"/>
            <s:Button
                label="Add item"
            click="addItem();"/>
        </s:VGroup>
    </s:Panel>
</s:Application>