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

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>