ActionScript 3 Bindable Dynamic Objects

Jacob Wright
June 26th, 2007

So I've been working heavily in Flex lately (and AIR). Been making my own components and building user interfaces for Cascade. For a project I'm working on at work it implements its own localization. It uses a method called getString('myString') to load a string up from the XML strings file.

This was not good for interfaces with lots of strings in it. It required giving every label, every input, every button and id and then after the strings were loaded assigning them all. One of the MXML files I was looking at had over 50 strings to be set and the listener to the string loading ended up being half the page almost! (maybe I exaggerate)

I like binding, and so I set about to create a dynamic object that implemented binding. Putting a [Bindable] tag at the top of a dynamic class didn't do it. So I made it a proxy and still no go. Finally, after thinking about how it works under the hood, I was sure I knew how I could make it work.... and it did.

I specified the event which would trigger the binding updates to "propertyChange", the default. This gives me the responsibility of dispatching the event after a bound property is set. Then, implementing IEventDispatcher so that I COULD dispatch an event, and extending Proxy so that I could make sure it happened after setting a property, I came up with the following solution:

package flight.utils
{
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.events.IEventDispatcher;
    import flash.utils.Proxy;
    import flash.utils.flash_proxy;import mx.events.PropertyChangeEvent;
    import mx.events.PropertyChangeEventKind;use namespace flash_proxy;
   
    [Bindable("propertyChange")]
    dynamic public class BindableObject extends Proxy implements IEventDispatcher
    {
       
        protected var strings:Object;
        protected var eventDispatcher:EventDispatcher;
       
        public function BindableObject()
        {
            strings = {};
            eventDispatcher = new EventDispatcher(this);
        }
       
        flash_proxy override function getProperty(name:*):*
        {
            return strings[name] || name;
        }
       
        flash_proxy override function setProperty(name:*, value:*):void
        {
            var oldValue:* = strings[name];
            strings[name] = value;
            var kind:String = PropertyChangeEventKind.UPDATE;
            dispatchEvent(new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE, false, false, kind, name, oldValue, value, this));
        }
       
        public function hasEventListener(type:String):Boolean
        {
            return eventDispatcher.hasEventListener(type);
        }
       
        public function willTrigger(type:String):Boolean
        {
            return eventDispatcher.willTrigger(type);
        }
       
        public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0.0, useWeakReference:Boolean=false):void
        {
            eventDispatcher.addEventListener(type, listener, useCapture, priority, useWeakReference);
        }
       
        public function removeEventListener(type:String, listener:Function, useCapture:Boolean=false):void
        {
            eventDispatcher.removeEventListener(type, listener, useCapture);
        }
       
        public function dispatchEvent(event:Event):Boolean
        {
            return eventDispatcher.dispatchEvent(event);
        }
    }
}

So I can create an object, "strings", and bind all my buttons and labels to properties of the strings object (e.g. ) and when my XML is loaded and the dynamic properties on the strings object are set, my components will automatically update.

9 Responses to “ActionScript 3 Bindable Dynamic Objects”

  1. Mike Says:
    December 19th, 2007 at 10:14 am

    Are your text fields in mxml? I’m curious to see how the other end of the binding would work if the view is created in AS3.

    -Mike

  2. Piers Says:
    January 4th, 2008 at 6:21 am

    Thanks for that it works a treat.

    The binding in MXML is just like any other, mine looks like the following

    where browse is a dynamic property, and bindableObject is an instance of the BindableObject class.

  3. Piers Says:
    January 4th, 2008 at 6:23 am

    Oops - it appears XML is stripped out of comments. Let us pretend

    (mx:Button label=”{bindableObject.browse}” click=”browseClick()”/)

  4. Alberto Says:
    January 9th, 2008 at 11:28 am

    Why didn’t you use the mx.utils.ObjectProxy? I think it accomplishes the same goal as your code. Anyway thanks for sharing.

    Alberto

  5. Werbeagentur Says:
    January 26th, 2008 at 9:48 pm

    Many thanks for the Code. I think it could be usefully for my little own project

    thanks from Germany, Werbeagentur

  6. werbeagentur Says:
    March 9th, 2008 at 7:58 am

    The code works perfectly with dynamic objects - many thanks, Werbeagentur

  7. Rob Says:
    April 4th, 2008 at 6:40 am

    HI,

    I couldn’t find your contact information, so though it would be best just to post on a comment to get in touch.

    I was looking at your date functions http://jacwright.com/projects/javascript/date_format

    and noticed a bug on the function to return the date suffix, the last if statement should read:

    date.getDay() % 10 == 3 && date.getDay() != 1

    rather than

    date.getDay() % 10 == 13 && date.getDay() != 1

    (13- 3)

    Thanks it’s really helpful looking at the logic behind it!

    Rob

  8. Rob Says:
    April 4th, 2008 at 7:13 am

    Sorry got that wrong too:

    It should be

    date.getDay() % 10 == 13 && date.getDay() != 3

    rather than

    date.getDay() % 10 == 13 && date.getDay() != 1

    The 3 to 1

  9. Jacob Wright Says:
    April 7th, 2008 at 11:25 am

    Thanks Rob for the catch, it should be:

    date.getDay() % 10 == 3 && date.getDay() != 13

    Fixed.

Leave a Reply