Data binding in Flex

The following examples show a few different ways to bind data in Flex.

Full code after the jump.

The following example shows how you can use the <mx:Binding /> tag to bind values between two controls:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/01/data-binding-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Binding source="textInputSrc.text"
            destination="textInputDst.text" />

    <mx:Form>
        <mx:FormItem label="source:">
            <mx:TextInput id="textInputSrc" />
        </mx:FormItem>
        <mx:FormItem label="destination:">
            <mx:TextInput id="textInputDst"
                    width="{textInputSrc.width}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

The following example shows how you can use the static BindingUtils.bindProperty() method to bind values between two controls:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/01/data-binding-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;

            private function init():void {
                BindingUtils.bindProperty(textInputDst, "text", textInputSrc, "text");
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="source:">
            <mx:TextInput id="textInputSrc" />
        </mx:FormItem>
        <mx:FormItem label="destination:">
            <mx:TextInput id="textInputDst"
                    width="{textInputSrc.width}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

The following example shows how you can use the static BindingUtils.bindSetter() method to call a method whenever the source property is changed:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/01/data-binding-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;

            private function init():void {
                BindingUtils.bindSetter(setterFunc, textInputSrc, "text");
            }

            private function setterFunc(str:String):void {
                textInputDst.text = str;
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="source:">
            <mx:TextInput id="textInputSrc" />
        </mx:FormItem>
        <mx:FormItem label="destination:">
            <mx:TextInput id="textInputDst"
                    width="{textInputSrc.width}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

18 thoughts on “Data binding in Flex

  1. Hmm, nice. But why would I use anything but [Bindable]? Can you include reasons, explainations, or circumstances where one might want to use these alternatives instead? Pros and cons or something…

  2. One scenario where you might use the BindingUtils is when you generate UI components at runtime based on the results of a dataservice. This can be handy for performing binding on non-data aware display components such as Grid, where the the state maintenance is largely up to the developer and what child components the grid contains.

  3. I had the situation when using the Cairngorm framework that I needed to update a mx:progressbar component using the setProgress function whenever a variable in the ModelLocator changed. I used the BindingUtils.bindSetter to call the function whenever the variable changed, just to give you another example.

  4. A few examples of how to use the binding utilities with Objects and ArrayCollections would be most appreciated :).

  5. Hi,

    Is it possible to bind to a function that requires a parameter ?

    ex :

    [Bindable(“change”)]
    public function getString(obj:Object):String
    {

    }

    Thanks

  6. thanks for the code, but the text in the destination loses its property like font size, font type, font color on pressing a space bar, how to avoid that

  7. A few examples of how to use the binding utilities with Objects and ArrayCollections would be most appreciated too.

  8. Peter,

    Thanks for the site – I refer to it frequently. On to the matter at hand:

    I am attempting to bind an object’s property to another object’s property for writing to a mySQL database. It works correctly, however, I need to do this task a dynamic number of times based on user interaction with the datagrid (based on how many items they have selected in the “multipleSelectionsAllowed” datagrid).

    code is something like:

    for each (var obj:Object in myObjCollection) //myObjCollection is the list of selected items in datagrid
    {
    BindingUtils.bindProperty(_destObj, "myProp", obj, "myProp");
    var asyncToken:AsyncToken = _destObj.save();
    }

    where destObj is defined as the same type object as obj

    The line “var asyncToken:AsyncToken = _destObj.save();” works fine outside of the loop with a separate binding of source/dest in but only does this for one item, not each in the list.

    Any help is much appreciated :D

  9. By the way, the error I am getting is something like “Record is locked and can’t be saved” – this only occurs in the for loop, not in the single call (which works/updates correctly)

  10. Since bi-directional binding is not supported in Flex 3, you can use a mapping file and a binder class using the mapping file to support bi-directional binding.
    Furthermore this will reduce code and extract the mapping/binding concern from your main application code.
    Sample: Flex binding

    Kind regards,

    Marc

  11. Could these binding utils be used to bind the text of a RTE (including the size/weight/color/etc…) to a label/text area? I’ve set the function up to bind between a RTE and a label, but it won’t carry over the weight/size/color of the text. It will on the other hand carry over the font type. Am I missing something? I have a feeling it’s something to do with the fontarrays and the like with the RTE, but I was wondering if I could get some input on this.

    Thanks.

Comments are closed.