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. <mx:Button label=”{strings.ok}”/>) and when my XML is loaded and the dynamic properties on the strings object are set, my components will automatically update.
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
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.
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()”/)
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
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
March 9th, 2008 at 7:58 am
The code works perfectly with dynamic objects – many thanks, Werbeagentur
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
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
April 7th, 2008 at 11:25 am
Thanks Rob for the catch, it should be:
date.getDay() % 10 == 3 && date.getDay() != 13
Fixed.
October 9th, 2008 at 7:30 pm
[...] normal value object, but you make it dynamic and you will need to extend Proxy to make it bindable. See this solution here. (I’ve also read this solution in the Flex 3 [...]
March 5th, 2009 at 3:19 pm
Hi Jac, nice Script, we will implement it in our new Project http://www.scooble.de
thx,
mo
April 20th, 2009 at 10:42 am
Thanks for this script.
But if you working with boolean and it’s “false” you get the name of your property.
I just modify getProperty function to not return name.
use
return strings[name];
instead of
return strings[name] || name;
June 11th, 2009 at 3:49 pm
Ah, this is just what I needed – thanks.
I’ve tweaked it a bit, though, to make it “behave” like a normal object: added a toString method (otherwise you get an unhelpful “The Proxy class does not implement callProperty…” error) and inherited from IUID so it will play well with List UI Components.
Take a look at the code here: http://wolever.net/~wolever/BindableObject.as
Also, would you mind formally releasing this code either into the public domain or a liberal MIT-esque license, to alleviate any possible concern with using it?
Thanks!
David
November 2nd, 2009 at 1:10 pm
thanks for this usefull code. works beautiful!!!
December 16th, 2009 at 4:44 pm
Thanks man! I just started building this very concept, got stuck and found this. Supernice!
March 3rd, 2010 at 1:53 am
Well, this is kind of what I need. A dynamically-created object. Except what I really need is a dynamically-created Value Object that I can pass back-and-forth between my Flex app and the ColdFusion9 back-end. I just can’t wrap my head around how to do that, though. Can you tell me how to adapt your bindable dynamic object into a bindable dynamic value object that will work with CF9? Is that even possible?
March 3rd, 2010 at 9:26 am
Laurence, by implementing the other Proxy methods that allow one to iterate over an object (for-i-in) you can allow that to happen. However, if you are using Flex, ObjectProxy is already there for you. Just use ObjectProxy for your dynamic bindable value objects.
March 31st, 2010 at 6:01 pm
very helpful! thank you!
July 6th, 2010 at 5:03 pm
I’ve been using a variant of this class for a dynamic model class in Flex. Now I am using it for an 1) AS project 2) in conjunction with your Flight Binding class. I’m getting an error.
var model:BindableModel=new BindableModel();
model.addProperty(“testProperty”);
var source:Binding=new Binding(model, “testProperty”);
source.bind(this, “someProp”);
model.testProperty=”value”;
trace (“should be value: “+someProp);
This brings up this error:
ReferenceError: Error #1069: Property testProperty not found on flash.events.EventDispatcher and there is no default value.
at flight.binding::Binding/onPropertyChange()[/Users/mattgarland/Documents/Classes/Actionscript/3/flight/binding/Binding.as:359]
The code there:
update(source[prop], pathIndex+1);
Strangely, if I use array access in my code:
model.testProperty=”initValue”;
trace (model["testProperty'"])//traces “initValue”
..it works, but it causes an undefined property error in the scope of Binding.
Also strange, the error suggests that the source might be the composed dispatcher and not the model, but it traces out correctly (my model like your bindable object is IEventDispatcher but not EventDispatcher).
Not sure why this is happening. Any ideas? Of course you might never have meant for these two pieces of code to be mashed together…
July 6th, 2010 at 5:26 pm
It was just that I forget to set the target in the constructor in the composed dispatcher.
dispatcher = new EventDispatcher(this);
//dispatcher = new EventDispatcher(); DUH!
Both pieces of code work beautifully, thanks! Can’t wait to see docs for Reflex.
July 6th, 2010 at 7:13 pm
Matt, glad you figured it out!
July 13th, 2010 at 5:35 am
Very nice indeed. Thanks Jac.
July 14th, 2010 at 10:37 pm
It solved our problem related to data binding in flex composite component… Many thanks for the same
October 4th, 2010 at 12:23 pm
muito legal eu vi.
February 14th, 2011 at 6:48 am
[...] ActionScript 3 Bindable Dynamic Objects [...]
June 28th, 2011 at 6:01 pm
Holly smokes, that works!
I adapted it to pass in an Object in the constructor, and have it act as a bindable proxy to that dynamic object.
Well done!