2006
05.30

If you are developing an MVC application with Flex, sooner or later you are going to want to trigger some functionality in your view when a property in your model changes. A common approach for achieving this is to use a binding tag in conjunction with a property setter in your view component. You bind your view’s property setter to the relevant model property and put your view logic in the setter function. Every time the property changes, your view logic executes.

I have never been particularly satisfied with this approach because it requires me to add a ‘fake’ property to my view component. So I created the Observe tag as a possible alternative, and I think it may also qualify as the world’s smallest tag:

package com.adobe.ac.util
{
public class Observe
{
public var handler : Function;

public function set source( source : * ) : void
{
handler.call();
}
}
}

You use the tag as follows:

<util:Observe source="{ model.myProperty }"
handler="{ this.myFunction }"/>

Because this is such a large and complex component, I need to call on the ever-resourceful Flex community to test it. So feel free to use it in your applications if you want to, and please let me know if you find any bugs.

Update: Please check Alex Uhlmann’s blog for a more recent update of the Observe tag.

6 comments so far

Add Your Comment
  1. I love binding. Everything that makes it faster to do is fantastic! But…can my handler method also accept the parameter that’s listened to? And…could I listen to a specific parameter value? (;

  2. Looks good,
    I appreciate your sense fo humour too :)
    We use data binding awfully a lot, but basically we bind in view to our customized MXML component properties that are set by setter/ getter like:

    —————————
    [ChangeEvent("deleteEnabledChange")]
    public function get deleteEnabled() : Boolean {
    return _deleteButtonVisible;
    }

    public function set deleteEnabled(value : Boolean) : Void {
    _deleteButtonVisible = value;
    SimpleButton(deleteButton)._visible = false;
    dispatchEvent(new Event(”deleteEnabledChange”, this));
    }
    —————————

    ps. We are using Flex 1.5 for now.

  3. I hope, Adobe will include this in Flex documentation.

    It’s absolutely useful when programming with Cairngorm.

  4. Yes, The smallest and the smaller.!
    I add a property called //public var enabled.
    To turn off or on the handler.call() function.

    Thanks..!

  5. Hi Paul…
    I have a little question…
    what are the benefits of Observe over ChangeWatcher.watch?

    I have made a test… but it seems that Observe fires before change and ChangeWatcher.watch fires after change of the property.

    My code is something like this:

    //in constructor
    observer = new Observe()
    observer.handler = observerHandler;
    observer.source = items;
    ChangeWatcher.watch(this, “items”, changeWatcherHandler);

    //handlers
    private function observerHandler():void{
    trace(”observerHandler items.length :”+items.length);
    }

    private function changeWatcherHandler(event:Event):void{
    trace(”changeWatcherHandler items.length :”+items.length);
    }

    //Results in trace output:
    observerHandler items.length :0
    changeWatcherHandler items.length :797

    Am I doing something wrong ? Have I misunderstand documentation?

    Thanks for your comments.

  6. Hi Juan,

    You can only use the Observe tag in MXML because it relies on the curly braces {} binding mechanism.

    For binding in ActionScript, you should use ChangeWatcher or BindingUtils.

    Cheers,

    Paul