Site search

Categories

December 2008
M T W T F S S
« Nov   Apr »
1234567
891011121314
15161718192021
22232425262728
293031  

Friends

Bindable interfaces with custom events

I’m surprised I haven’t stumbled across this before, but it caused a little head-scratching in a recent project. The problem involves having a class with a mixture of binding tags (i.e. with and without custom events), but assumes you are programming to the interface the class implements. In this case making it bindable proves a little unintuitive.

Imagine you have an class called Artist with two getter/setter properties: name and age. One of them uses a standard binding tag: [Bindable], the other uses a bindable tag with a custom event: [Bindable(event="artistAgeUpdate")]. Now you may be inclined to copy the tags into your interface and paste them above the getter/setter pair, like so:

package bindingTest
{
        public interface IArtist
        {
                [Bindable]
                function get name():String;
                function set name(value:String):void;
               
                [Bindable(event=“artistAgeUpdate”)]
                function get age():int;
                function set age(value:int):void;
        }
}

But this will give you the following compiler error:

Error: [Bindable] not allowed on global or package-level functions

Also, putting a [Bindable] tag above the interface definition doesn’t work either, which is different to how classes work. The compiler won’t actually throw an error in this case, but the binding won’t work.

The propertyChange event

The solution is to specify an event for every bindable tag. This means you must use “propertyChange” for any normal [Bindable] tag used in your class. This is the event type the standard binding system dispatches. Take a look at PropertyChangeEvent in the Flex docs for more info.

package bindingTest
{
        public interface IArtist
        {
                [Bindable(event=“propertyChange”)]
                function get name():String;
                function set name(value:String):void;
               
                [Bindable(event=“artistAgeUpdate”)]
                function get age():int;
                function set age(value:int):void;
        }
}

It seems classes and interfaces treat binding tags in slightly different ways. I guess the moral of the story is you should specify custom events for every bindable property. But that’s a lot of work. On the other hand it makes debugging those binding call-stacks a little easier as you can quickly identify the event type.