Data Binding In Flex

Data Binding In Flex

Hello Friends,

                   Today I am going to explain you about data binding, with some examples in flex.

Data Binding :   Basically Data binding is the process of tying the data in one object to another  

                                 object. Data binding requires a source property, a destination property, and a triggering event that indicates when to copy the data from the source to the destination. An object dispatches the triggering event when the source property changes.

Data Binding with Flex :  Flex provide 3 ways to implement data binding. we will discuss 

                                               them one by one :

1st ) The curly Braces ( { } ) method :   Inside the curly braces we give the name of source 

property with the binding expression. When the value of the source property changes, Flex copies the current value of the source property.

Example : 

<?xml version="1.0"?>
<!-- binding/BasicBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TextInput id="myTI" text="Enter text here"/>
    <mx:Text id="myText" text="{myTI.text}"/>
</mx:Application>

2nd)  <mx:binding> tag method : 

When you use the <mx:Binding> tag, you provide a source property in the <mx:Binding> tag's source property and a destination property in its destination property.

same example with <mx:binding> method :

<?xml version="1.0"?>
<!-- binding/BasicBindingMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TextInput id="myTI"/>
    <mx:Text id="myText"/>   

    <mx:Binding source="myTI.text" destination="myText.text"/>
</mx:Application>

 

3rd ) In Action Script  : 

The curly braces syntax and the <mx:Binding> tag both define a data binding at compile time. You can also use ActionScript code to define a data binding at run time.

Example :

<?xml version="1.0"?>
<!-- binding/BasicBindingAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
      <![CDATA[
        import mx.binding.utils.*;

        // Define data binding.
        public function initBindingHandler():void {
            BindingUtils.bindProperty(myText, "text", myTI, "text");
        }
      ]]>    
    </mx:Script>

    <mx:TextInput id="myTI"/>
    <mx:Text id="myText" preinitialize="initBindingHandler();"/>
</mx:Application>

 

In this example, we use the static BindingUtils.bindProperty() method to define the binding. You can also use the BindingUtils.bindSetter() method to define a binding to a function.

Notice in this example that you use the preinitialize event to define the data biding. This is necessary because Flex triggers all data bindings at application startup when the source object dispatches the initialize event.

So friends : try this ..

This is all about one way binding i mean when changing to destination property doesn't effect on source property . 

Thank you :

Pooja Arora