Binding in MXML & AS

Binding is one of the very useful feature in Flex. Though most intermediate programmers know how to bind a variable in mxml… most are clueless how to achieve this in AS. I’ll discuss both these aspects here.

Binding in MXML

Lets look at the following code…

<mx:TextInput id=”ti1″/>
<mx:Label id=”label1″ text=”{ti1.text}”/>

Here you are binding the text property of the TextInput to the label. So whatever you type in the textInput automatically reflects in the label. That’s the power of Binding…

Binding in AS

This is not as simple as binding in mxml. But it is simple enough…

The key to this is a class called BindingUtils in the mx.binding.utils package. You can use this class as below…

You have your components say in mxml as follows

<mx:TextInput id=”ti1″/>
<mx:Label id=”label2″/>

Now you impost the Binding utils class in the script tag

import mx.binding.utils.BindingUtils;

Then you use the bindProperty method to do the binding in AS as follows…

BindingUtils.bindProperty(label2,”text”,ti1,”text”);

This binds the ti1.text to label2.text. And you are set with your binding…

Binding is specially useful in data related components like List, DataGrid, Charts…etc. You can bind the dataProviders of these components to ArrayCollections or results of HTTPService objects, so that any change in data, immediately reflects in on the component

Advertisements

10 Responses to Binding in MXML & AS

  1. Hey Raghu,
    Exciting stuff… didnt know about binding in AS3… thanks a lot..

  2. judah says:

    Is there a way to unbind using AS3? I have an examples site that lets a user make live edits. To enable “live” mode, one text area is bound to another. But, when the user wants to turn this feature off I could not find a way to unbind.

  3. […] and Unbinding variables in AS3 I had earlier posted a blogpost on Binding in MXML & AS. And I received a comment from Judah Frangipane asking if you can unbind a variable in Flex. So […]

  4. v!z says:

    I am trying to bind a variable of type Number to the y property of a UIComponent…. the BindingUtils.bindProperty does not allow this…. cant seem to find any other way i can do it… could you plz help
    P.S. my code is purely AS nothing in mxml

  5. sapcrmblog says:

    Hi Raghu,

    Can you please convert the below MXML into pure actionscript with databinding

    Thanks and Regards
    Uday

  6. saravanan says:

    Hi Raghu,

    Is that posible to embed image to image component that is inside custom component.. and we will pass the image url as property of custom component …

    and can you spend some time for us to put some tutorial on FDS with java…

    Thanks in advance….

    With regards
    Saravanan.B
    http://sara-intop.blogspot.com

  7. Chuck says:

    What everyone explains is the basics, what about like you said the internal views?

    IE the docs all say, to bind, you do something like…

    private function x():Number { return 6; }

    and somewhere do a value=”{x()}” in a mx tag. What I’d like to know, is how do you access X by its namespace? Or whatever is needed below.

    I use a component ItemRenderer, and it has but I cannot access x() with <mx:Object value=”{x()}” it says x method is undefined. If I define x() in the ItemRender class all works, but that isn’t good coding practice in my opinion, especially since the data returned by x() is based on the application data and not part of the ItemRender.

  8. […] on Raghu ’s blog, i found an example to Binding in MXML & AS […]

  9. […] Raghu! https://raghuonflex.wordpress.com/2007/08/30/binding-in-mxml-as/ :ActionScript, AS3, Binding, Code Sample, Flex No comments for this entry […]

  10. simon says:

    any example of binding two ArrayCollection in AS3 ? not simple text ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s