“Be inspired, enjoy your work, keep learning and never forget to play.” — gskinner

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.

  1. A String containing the name of a public bindable property of the host object.

    ChangeWatcher.watch(this, "myvar", handler)

  2. 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);

  3. 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

31 Comments on “Flex Bindings in AS3 Projects”

  1. 1 smith said at 12:07 pm on July 29th, 2008:

    Can you please give some example code to demo?

    Cheers

  2. 2 Steve said at 1:22 pm on July 29th, 2008:

    Seconding the request to look at some working example code. Cheers!

  3. 3 Scott said at 2:03 pm on July 29th, 2008:

    Very interesting. I was wondering if there was a way to do this. Thanks for posting. Could you post an example using this code?

  4. 4 Tiago Bilou said at 3:23 pm on July 29th, 2008:

    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.

  5. 5 Shinchi said at 4:00 pm on July 29th, 2008:

    Will that add to the SWF size? Just wondering

  6. 6 Tiago Bilou said at 5:38 pm on July 29th, 2008:

    I would say yes, because you are including a couple of function from the flex framework. It shouldn’t be much though

  7. 7 Pod sosnami said at 8:56 pm on August 19th, 2008:

    Great job, interesting interview. Thank you.

  8. 8 James said at 9:50 am on September 18th, 2008:

    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.

  9. 9 Idoru said at 11:30 am on September 23rd, 2008:

    Thx james :)

  10. 10 Billigflug said at 12:16 pm on December 16th, 2008:

    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!

  11. 11 Garten said at 7:57 pm on February 20th, 2009:

    This is great! I encourage you to check out bumpslide, David Knape’s AS3 framework which includes a bindable model for pure AS3 projects…

  12. 12 Gummistiefel said at 10:24 pm on June 4th, 2009:

    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.

  13. 13 activetraffic.de said at 10:22 am on August 18th, 2009:

    is there any Deadline? We´d appreciate it, if you could let us know, as we are really interested in the code!

  14. 14 Marco Pe said at 10:33 am on August 18th, 2009:

    Yes please, keep me updated also! Regards from germany, Marco

  15. 15 Freizeit & Garten said at 8:47 am on August 20th, 2009:

    Update-info is really much appriciated!

  16. 16 xtcommerce templates said at 6:52 pm on August 23rd, 2009:

    Great job, absolute interesting interview. Thank you for that cool article.

  17. 17 Mrio said at 7:00 pm on September 21st, 2009:

    Great job, its a interesting article.

  18. 18 Seoflatrate.net said at 7:02 pm on September 21st, 2009:

    A great job.

  19. 19 Mike said at 6:22 pm on October 5th, 2009:

    Best job!

  20. 20 Ecommerce Blog said at 10:33 pm on October 11th, 2009:

    fantastic article, thanks :)

  21. 21 Außenwerbung said at 5:41 pm on October 26th, 2009:

    thanks for sharing this. was looking pretty long for a solution.

  22. 22 Alleinunterhalter Köln said at 5:42 pm on October 26th, 2009:

    Great job, its a interesting thing.

  23. 23 Etikettendrucker said at 4:07 pm on November 2nd, 2009:

    Hey, very interesting. Are there any news on it, yet?

  24. 24 Kaufen und Sparen said at 6:04 pm on February 11th, 2010:

    Actually learned something new, works nicely.

  25. 25 Easyfinanz24 said at 2:51 pm on February 12th, 2010:

    Yes please, keep me updated also! Great article – Best Regards from germany ;-)

  26. 26 Netyu said at 11:38 am on March 11th, 2010:

    Great article :-) and best regards!!!

  27. 27 Rechnung schreiben said at 7:10 pm on April 16th, 2010:

    Nice article, very interesting. thanks

  28. 28 neil said at 9:15 pm on June 7th, 2010:

    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;
    };

  29. 29 Matt Garland said at 11:53 pm on June 15th, 2010:

    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.

  30. 30 Magnetschmuck said at 2:26 am on July 27th, 2010:

    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).

  31. 31 Urban Classics said at 2:28 am on July 27th, 2010:

    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.

Leave a Reply