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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

18 Responses to Data binding in Flex

  1. Clint says:

    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. Ryan says:

    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. Simon says:

    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. guillaume.jt says:

    Well done :)

  5. Derek Basch says:

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

  6. peterd says:

    Added SWFs.

    Peter

  7. Alex says:

    Hi,

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

    ex :

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

    }

    Thanks

  8. Anonymous says:

    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

  9. simon says:

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

  10. Webdevotion says:

    Another way could be to use Actionscript only as described in a blogpost of mine. It shows you how you can bind to a component and use a labelFunction to return a value, instead of the actual value (e.g.: a formatted datestring instead of a date object).

    http://webdevotion.be/blog/2009/04/20/binding-between-a-datefield-and-a-button-label-at-runtime/

  11. xueyu says:

    very nice example, thank you very much!

  12. Alograg says:

    This post not render on Chrome.

  13. Anne says:

    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

  14. Anne says:

    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)

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

  16. Mark says:

    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.

  17. shan says:

    Very nice example and clear explanation.Thanks for sharing.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree