explorers’ club

Assume that you are creating a component in MXML such as some multi-state cell renderer or something that implements IDataRenderer.

All mx.core.Container subclasses have a convenient little event hook called dataChange.  Anytime you set a value to the data property, the component dispatches an event of type FlexEvent.DATA_CHANGE.  To hook into this you simple access it in MXML like so:

<mx:VBox dataChange="do something"/>

With this in mind I suggest that those wishing to do more complex visual changes to their component that {binding} cannot address do the following:

• create a flag to indicate a data change has occured:

  private var bDataChange:Boolean = false;

• connect the dataChange hook to the flag:

  <mx:VBox dataChange="bDataChange = true;"/>

• address the data change in the call to update the display list:

  override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
  {
      super.updateDisplayList(unscaledWidth, unscaledHeight);
      if (bDataChange)
      {
          bDataChange = false;
          //do your custom logic here
       }
  }

The nice bit about this is that you are doing the necessary logic to update the display list when it makes sense to do so (via the already established update framework in the Flex API).  It also reduces the need to override the getter/setter for the data property.