by Paul Williams

 Comments (6)

Created

May 30, 2006

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.

COMMENTS

  • By AlexU - 4:09 PM on May 30, 2006   Reply

    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? (;

  • By JabbyPanda - 10:48 PM on May 30, 2006   Reply

    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.

  • By Iuliu - 1:02 AM on June 2, 2006   Reply

    I hope, Adobe will include this in Flex documentation.

    It’s absolutely useful when programming with Cairngorm.

  • By luchyx - 10:12 AM on November 10, 2006   Reply

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

    Thanks..!

  • By Juan Carlos M. - 9:13 PM on January 16, 2007   Reply

    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.

  • By Paul - 8:12 AM on January 17, 2007   Reply

    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

ADD A COMMENT