What is [Bindable] keyword in mxml files?


    Data binding is the preferred choice for sharing data between various classes. With data binding, any time the value of a source property is changed, the value is automatically updated for the destination property as well. This makes it easy to keep all your components synced, and to seamlessly add or remove components at any time within the system. Also, since components within the Flex 2 framework are created asynchronously, data binding ensures that the values for those components will be accurately assigned once its initialization is complete. In Flex, there are various different ways to set up data binding, depending on what you’re trying to achieve.

     

    Data Binding in MXML

    MXML is great for setting up an application very quickly, and just the same, it’s the fastest way to rig up a data binding system between MXML components. There are two ways to set up bindings through MXML: inline scripts and the <mx:Binding> tag.

    First, lets look at binding through inline scripts. Set up a new Flex Project labeled “BindingDemo” and insert the following code into BindingDemo.mxml:

    <?xml version=”1.0″ encoding=”utf-8″?>

    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” horizontalAlign=”center”>

    <mx:TextArea width=”200″/>

    <mx:ComboBox width=”200″/>

    </mx:Application>

    Nothing too interesting to see yet. We now have a text component and a combo box now, but neither of which contain any data. Let’s set up the combo box first:

    <?xml version=”1.0″ encoding=”utf-8″?>

    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” horizontalAlign=”center” initialize=”init()”>

    <mx:Script>

    <![CDATA[

    import mx.collections.ArrayCollection;

    [Bindable]

    private var fruitlist:ArrayCollection;

    private function init():void{

    fruitlist = new ArrayCollection([‘Apple’, ‘Pear’,’Banana’, ‘Strawberry’]);

    }

    ]]>

    </mx:Script>

    <mx:TextArea width=”200″/>

    <mx:ComboBox width=”200″ dataProvider=”{fruitlist}”/>

    </mx:Application>

    In the code above, we’ve added three major pieces of code to our application. First, we inserted a <mx:Script> tag and populated it with a variable and a function. For those of you new to Flex, the script tag allows you to inject ActionScript 3.0 code into your mxml files. The variables and functions defined in the script tag become properties and methods that are scoped to the mxml file. This allows us to set up the second part. You’ll also notice a [Bindable] meta-tag above our fruitlist property. This is interpreted by the mxmlc compiler to prepare the property for data binding (both as a source and as a destination), and is necessary for the third part of our set-up.

    The [Bindable] tag is applied to the proceeding property or getter/setter pair. If using a getters and setters, it’s important to note that both the getter and the setter must be present for the corresponding property, or else data binding will not function properly. If a class declaration proceeds the [Bindable] tag, then all properties and getter/setter pairs of that class will become bindable.

    Finally, we use an inline script to bind fruitlist to the combo box’s dataProvider. Many list controls have a dataProvider property, which should be populated with a list of values or objects of values. The list should exist as either an ArrayCollection or XMLListCollection, however arrays and XML objects can be accepted and internally converted to their respective “Collection” forms by the list control. Also note the use of {}’s around the bindable property. This tells the compiler that the value applied is interpretive, as opposed to literal. In other words, dataProvider=”fruitlist” would set the value of the dataProvider to the string fruitlist, rather than the array collection referenced by fruitlist. When the interpretive value is a bindable property, data-binding is automatically applied.

    <?xml version=”1.0″ encoding=”utf-8″?>

    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” horizontalAlign=”center” initialize=”init()”>

    <mx:Script>

    <![CDATA[

    import mx.collections.ArrayCollection;

    [Bindable]

    private var fruitlist:ArrayCollection;

    private function init():void{

    fruitlist = new ArrayCollection([‘Apple’, ‘Pear’,  ‘Banana’, ‘Strawberry’]);

    }

    ]]>

    </mx:Script>

    <mx:TextArea width=”200″ text=”My Favorite Fruit is: {fruitComboBox.selectedItem}”/>

    <mx:ComboBox id=”fruitComboBox” width=”200″ dataProvider=”{fruitlist}”/>

    </mx:Application>

    the alternative approach to data binding in MXML is to use the <mx:Binding> tag. This option does not gain much of an advantage over the inline style, with the exception of being a cleaner way to manage your data-binding. For example, the alternative for binding the combo box’s data provider to fruitlist would look like this:

    <?xml version=”1.0″ encoding=”utf-8″?>

    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”  layout=”vertical” horizontalAlign=”center” initialize=”init()”>

    <mx:Script>

    <![CDATA[

    import mx.collections.ArrayCollection;

    [Bindable]

    private var fruitlist:ArrayCollection;

    private function init():void{

    fruitlist = new ArrayCollection([‘Apple’, ‘Pear’, ‘Banana’, ‘Strawberry’]);

    }

    ]]>

    </mx:Script>

    <mx:Binding source=”fruitlist” destination=”fruitComboBox.dataProvider”/>

    <mx:TextArea width=”200″ text=”My Favorite Fruit is:{fruitComboBox.selectedItem}”/>

    <mx:ComboBox id=”fruitComboBox” width=”200″/>

    </mx:Application>

Advertisements

About vatsalad

Hi, I'm Vatsala
This entry was posted in flex and tagged , , . Bookmark the permalink.