<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <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>