Flex Bindings in AS3 Projects
Posted: July 29th, 2008 | Author: Tiago Bilou | Filed under: Actionscript3, Tutorial | 31 Comments »Since 99.9% of the work we do is Flash, we pretty much use flex builder to develop Actionscript Projects. One of the things I really wanted to have was bindings. Here's how to use Flex Bindings in Actionscript only projects.
Remember that the Flash framework (textfields, movieclips, sprites, etc) doesn't dispatch the data-binding event. This means that pretty much the only things you can bind are variables.
Make sure you add the flex framework.swc to your project Library Path to have access to the mx.binding.util class.
ChangeWatcher:
Acts like the watch on AS2. It watches a variable for changes and when something happens fires an event. Make sure you call the canWatch to ensure that you can watch it!
There are 3 ways to specify the second parameter, the chain.
- A String containing the name of a public bindable property of the host object.
ChangeWatcher.watch(this, "myvar", handler) - An Object in the form: { name: property name, access: function(host) { return host[name] } }. The Object contains the name of a public bindable property, and a function which serves as a getter for that property.
ChangeWatcher.watch(this, { name:"myvar", getter: function():String { return "something" }}, handler); - A non-empty Array containing any combination of the first two options. This represents a chain of bindable properties accessible from the host. For example, to watch the property host.a.b.c, call the method as: watch(host, ["a","b","c"]
BindingUtils.bindProperty
Works pretty much the same way as the watch, but instead of having to handle and event it allows you to immediately bind two properties one-way.
The first two parameters are for the the target, the second parameters are the triggers.
BindingUtils.bindProperty( this, "va1", this, "var2");
you can also use the same syntax for the chain.
References:
Language References
Another Tutorial
Can you please give some example code to demo?
Cheers
Seconding the request to look at some working example code. Cheers!
Very interesting. I was wondering if there was a way to do this. Thanks for posting. Could you post an example using this code?
I needed to have an application that would change it’s language dynamically at runtime. This meant replacing all the textfields texts.
I developed a class that binds the strings (tokens) to the textfields. When the user switches the language button the binded variable points to another array of tokens and all the textfields change.
Will that add to the SWF size? Just wondering
I would say yes, because you are including a couple of function from the flex framework. It shouldn’t be much though
Great job, interesting interview. Thank you.
Hi, I found your blog on this new directory of WordPress Blogs at blackhatbootcamp.com/listofwordpressblogs. I dont know how your blog came up, must have been a typo, i duno. Anyways, I just clicked it and here I am. Your blog looks good. Have a nice day. James.
Thx james
It ´s very interesting and like Scott I was wondering if there was a way to do that.
I have to accept that I have many problems with applications and such a things. But it’s really nice to find any response to any problem we have in internet. These kind of blogs schould stay forever!!!
Thanks for the post!
This is great! I encourage you to check out bumpslide, David Knape’s AS3 framework which includes a bindable model for pure AS3 projects…
I would also like to say that I am quite interested in the code you’ve described here, as it may be relevant to a project I’m working on myself. As such, if it’s not too much trouble, I’d also like to be informed and/or see it in action myself whenever you get the chance to make it available.
Thanks in advance.
is there any Deadline? We´d appreciate it, if you could let us know, as we are really interested in the code!
Yes please, keep me updated also! Regards from germany, Marco
Update-info is really much appriciated!
Great job, absolute interesting interview. Thank you for that cool article.
Great job, its a interesting article.
A great job.
Best job!
fantastic article, thanks
thanks for sharing this. was looking pretty long for a solution.
Great job, its a interesting thing.
Hey, very interesting. Are there any news on it, yet?
Actually learned something new, works nicely.
Yes please, keep me updated also! Great article – Best Regards from germany
Great article
and best regards!!!
Nice article, very interesting. thanks
i have been trying to make the code below work. no success. it is an actionscript file not flex.
ChangeWatcher.canWatch(buttons, “left”); always give ‘false’.
————————————————
import mx.binding.utils.ChangeWatcher;
import mx.events.FlexEvent;
import mx.events.PropertyChangeEvent;
var buttons:Object = {left:0, right:0};
var watchable:Boolean = ChangeWatcher.canWatch(buttons, “left”);
ChangeWatcher.watch(buttons, “left”, fnWatch);
function fnWatch(e:PropertyChangeEvent){
trace(“buttons changed”);
};
trace(“watchable ” + watchable.toString());
test1_btn.addEventListener(MouseEvent.CLICK, leftClicked);
function leftClicked(e:MouseEvent){
buttons.left = (buttons.left + 1)%2;
};
test2_btn.addEventListener(MouseEvent.CLICK, rightClicked);
function rightClicked(e:MouseEvent){
buttons.right = (buttons.right + 1)%2;
};
1–BindingUtils is 4k.
2–BindingUtils does work dandy for AS3 projects. you can also import BindingUtils into a fla/document project, but it won’t work, because the Flash IDE won’t write code for the binding metadata.
This was more or less an exercise resulting from my evaluation of AS3 Signals to see what they have to offer. To be honest, I wouldn’t use it over Binding in Flex. However, I wanted to publish the API as I do feel it would provide value for those who might disregard AS3 Signals because of data binding limitations. This would also suit non-Flex projects well. One argument which I feel would warrant the use of AS3 Signals over Flex data binding would be if something a bit more light weight was warranted (for instance, where event bubbling isn’t necessary, such as in the PM examples).
Yes, essentially what the SignalDataBinding API buys you is the ability to implement data binding in AS3 projects. I wouldn’t necessarily suggest using it in place of Data Binding in Flex, however if ever Signals were being used exclusively and data binding was needed the SignalDataBinding API would provide a convenient solution.