What does [Bindable] mean in actionscript?

Question

[Bindable]
/**
* Display output of video device.
*/              
public var videoLocal : Video;

Anyone knows?

Solution 1

[Bindable] is a one of several meta tags that you can use in flex ActionScript code. It can be applied to properties, or methods that are marked in any scope. It cannot be used with static class members.

The key to using the [Bindable] meta tag is understanding what is going on under the hood when you use it. Essentially using data binding is a type of shorthand for adding event listeners and dispatching events.

There are two basic forms of the [Bindable] tag. The first is just [Bindable] followed by a var/property declaration. The Second is [Bindable(event="eventname")] followed by either a var/property declaration, a function/method declaration or one half of a getter/setter declaration.

I'll explain the longer notation first since the other builds on the same concept but with even more shorthand.

When you use [Bindable(event="eventname")] you are essentially telling the compiler that this var/property/function/method (call this the instance member) is 'available' to be used as the source for data binding. You are also telling it that when the value of the instance member has been invalidated/changed and it needs to be re-read that the "eventname" event will be dispatched.
In this longer form this all you are doing. You the developer are responsible for actually dispatching the "eventname" event whenever the value needs to be updated in the binding subscribers.

The real efficiency of using data binding comes on the subscribing side. The typical notation you will see in MXML is value="{instance.propertyName}" When you use the notation { } you are telling the compiler to do the following:

1. Create an event listener that listens to the event named in the bindable meta tag
2. In that event listener re-read the instance.propertyName and update this value

If you use the shorter form [Bindable], and you add the tag before a property/var, the compiler fills in the blanks and adds some additional functionality to make the property bindable. Essentially you are telling the compiler "add the events and methods you need to make this property bindable"
Now the way to think of what the compiler will do under the hood is this.

1. make a private version of your var
2. create an "event" to trigger the binding
3. create a getter function with scope and name of your original var that returns the private verson of the var when called.
4. create a setter function with scope and name of your original var that sets the private version of the var when called AND dispatches the triggering event.

In essence the compiler will do much of the work for you.

    [Bindable]
    public var xyz

is equivalent to

    private var _xyz:String;

    [Bindable(event="updateXYZValue")]
    public function get xyz():String{
        return _xyz;
    }

    public function set xyz(newxyz:String):void{
        _xyz = newxyz;
        dispatchEvent(new Event("updateXYZValue"));
    }

The only functional differences in these is that in the first instance;

1. you do not know the name of the event that will be dispatched to trigger the binding
2. there is no way to update the underlying value without triggering the data binding

This second example also demonstrates one special case of the [Bindable] meta tag. This is that when you are applying it to a getter/setter pair defined for the same variable name you need only apply it to one or the other, it will apply to both. Typically you should set it on the getter.

You can use either notation on a function/method however if you do not specify an event the binding will never be triggered so if you are trying to bind to a function you should alway specify an event. It is also possible to specify more than one triggering event by stacking the tag. eg.

    [Bindable(event="metaDataChanged")]
    [Bindable(event="metaObjectUpdated")]
    public function readMyMetaData():MetaDataObject{
        var myMetaDataObject:MetaDataObject;
            .
            .
            .

        return myMetaDataObject;
    }

This would presume that somewhere else you your class you will dispatch this metaDataChanged event or the metaObjectUpdated event when you want trigger the binding.

Also note that with this notation you can tie the binding of any instance member to any event that the instance will dispatch. Even inherited events that you yourself do not generate such as FrameEnter, OnChange, etc...

Data bindings can also be setup and destroyed during runtime. If you are interested in this take a look at the mx.binding.utils classes.

Solution 2

It is used in Databinding with Flex, you can read more about it here

http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_2.html

Creating properties to use as the source for data binding

When you create a property that you want to use as the source of a data binding expression, Flex can automatically copy the value of the source property to any destination property when the source property changes. To signal to Flex to perform the copy, you must use the [Bindable] data tag to register the property with Flex.

Solution 3

As an addition to what Justin said, you can actually use two ways data binding in Flex with the @ character. Here's an example:

<s:TextInput id="txt1" text="@{txt2.text}" />

For a working example with source code enabled you can check out this article I wrote a while back:

Two-ways data binding in Flex

Comments

[Vanlalhriata]

Check Mihai's answer below for two-way binding