Question

I never really understood the point of binding, beyond it being effectively shorthand for addeventlistener.

is there more to it? am I missing something?

thanks,
dsdsdsdsd

Answer 1

Data binding is all about declaratively defining how data is displayed in the UI. Under the hood, it is a bit more complicated, because there are more needs than just hooking addEventListener to support the features of data binding.

It is a very powerful feature, actually, and to understand it more, we can look at a simple “Hello World” application:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark">
    <s:HGroup>
        <s:TextInput id="input" />
        <s:Label text="Hello {input.text}" />
    </s:HGroup>

</s:Application>

Now, compile this app with the --keep compiler flag and look at the new folder “bin-debug/generated”. We are interested in HelloWorld-generated.as

Here is where that binding gets defined and called from the constructor:

private function _HelloWorld_bindingsSetup():Array
{
    var result:Array = [];

    result[0] = new mx.binding.Binding(this,
        function():String
        {
            var result:* = "Hello " + (input.text);
            return (result == undefined ? null : String(result));
        },
        null,
        "_HelloWorld_Label1.text"
        );


    return result;
}

A little later, in the HelloWorld constructor, you get a call to set up the watchers:

        _watcherSetupUtil.setup(this,
                function(propertyName:String):* { return target[propertyName]; },
                function(propertyName:String):* { return HelloWorld[propertyName]; },
                bindings,
                watchers);

Which really just does this:

watchers[0] = new mx.binding.PropertyWatcher("input", 
                                            { propertyChange: true }, 
                                            [ bindings[0] ] , 
                                            propertyGetter );
watchers[1] = new mx.binding.PropertyWatcher("text",
                                             { change: true,
                                               textChanged: true },
                                             [ bindings[0] ],
                                             null);

Things get more complicated with two-way bindings.