flashapache-flexactionscriptbindablemetatag

is binding simple a shortcut for addeventlistener


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


Solution

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