explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Quick hint: Complex Component Development in MXML

5 Comments

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).  This will prevent many Null Pointer Exceptions (NPEs) due to a child component not being present when setting the component data from the overridden setter.  AND It also reduces the need to override the getter/setter for the data property in the first place.

Advertisements

5 thoughts on “Quick hint: Complex Component Development in MXML

  1. This is useful to know. I was using the override getters and setters at one point for this a few years ago. I don’t even want to think about what I went through with the custom getters and setters and change dispatch and so on.

  2. Pingback: links for 2009-04-28 | diamondTearz

  3. Pingback: diamondTearz » links for 2009-04-28

  4. Pingback: links for 2009-04-28

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s