(flex) - effect play on data change - custom itemrenderer - apache-flex

Question

I've got datagrid with custom itemrenderer. I want to play animatecolor effect for a cell in which data was changed. I don't want to play that effect for all cells.
Here is code of itemrenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Declarations>
<s:Sequence id = "updateEffect">
<s:AnimateColor colorFrom ="0xffffff"
colorTo ="0xb9d30d"
target = "{lblData}"
duration ="5000"/>
<s:AnimateColor colorFrom ="0xb9d30d"
colorTo ="0xffffff"
target = "{lblData}"
duration ="5000"/>
</s:Sequence>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
override public function prepare(hasBeenRecycled:Boolean):void {
if(data)
{
lblData.text = data[column.dataField];
if(data.selected == true)
{
lblData.setStyle("color","#61afda");
lblData.setStyle("textAlign","center");
lblData.setStyle("fontWeight","bold");
lblData.setStyle("fontSize","19");
lblData.setStyle("paddingLeft","10");
lblData.setStyle("paddingRight","10");
lblData.setStyle("paddingBottom","0");
lblData.setStyle("paddingTop","2");
containter.setStyle("backgroundAlpha","1.0");
containter.setStyle("backgroundColor","0x2f3437");
}
else
{
lblData.setStyle("color","#d4d4d4");
lblData.setStyle("textAlign","center");
lblData.setStyle("fontWeight","bold");
lblData.setStyle("fontSize","12");
lblData.setStyle("paddingLeft","10");
lblData.setStyle("paddingRight","10");
lblData.setStyle("paddingBottom","5");
lblData.setStyle("paddingTop","4");
containter.setStyle("backgroundAlpha","0.0");
updateEffect.play();
}
}
}
]]>
</fx:Script>
<s:SkinnableContainer
id ="containter"
width ="100%"
height ="100%">
<s:HGroup
width ="100%"
height ="100%">
<s:Label
id ="lblData"
width ="100%"
height ="100%"
maxDisplayedLines ="1"
styleName ="FPlayGcItemRenderStyle"/>
</s:HGroup>
</s:SkinnableContainer>
Any suggestions?

Answer 1

I don't know if its the best way but I generally add a listener to my data when I need to update properties dynamically in my item renderers.
//This is inside an item renderer
private var _myClass:FunkyClass;
override protected function set data( value:Object ):void
{
super.data = value;
if( value != null )
{
if( _myClass != null )
{
_myClass.removeEventListener(
'MyFunkyClass.DataChange' , updateSomething);
}
_myClass = value as FunkyClass;
_myClass.addEventListener(
'MyFunkyClass.DataChange' , updateSomething);
}
}
private function updateSomething( event:Event ):void
{
//change colors, visibility and so forth
}
Of course your data class has to extend EventDispatcher. I would also be interested in seeing how other folks in the community have solved this problem.