Flex 3 data binding process and example


 

Flex 3 data binding process and example

Data binding is a process to pass data from one object to another object and is a process to pass data between different layer of the application

Data binding is a process to pass data from one object to another object and is a process to pass data between different layer of the application

Data binding in Flex 3:-

Data binding is a process to pass data from one object to another object and is a process to pass data between different layer of the application. There are many type of data binding in Flex 3. The source and destination properties and a trigger event required for data binding process. Flex 3 provide three types of data binding:

1. Curly braces ({}) data binding:

In the curly braces data binding process property name inside the curly braces is the source property of the binding expression. If user change the value of the source property then Flex 3 copies the current value of the source and set the copies in destination property value.

Example:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:TextInput id="mytextinput" text="Please input text"/>

<mx:Text id="myText" text="{mytextinput.text}"/>

</mx:Application>

In this example user can see the text input control is a source and text control is a destination. User input value in textinput and flex copies current value of textinput and set a text property of  of the text control with this value.

Output:- 

Running example:

2. Data binding with<mx:Binding>tag:

The <mx:Binding> tag also used source and destination properties for bind data between objects. In this example user can see how to bind data with the help of <mx:Bindung> tag.

Example:-

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:TextInput id="sourcetext" text="Please input text"/>

<mx:Text id="desinationtext"/>

<mx:Binding source="sourcetext.text" destination="desinationtext.text"/>

</mx:Application>

In this example we have used binding tag that use source and destination properties.

Output:-

Running Example:

3. Using BindingUtils:

In the Flex 3 curly braces and binding tag provide data binding at compile time. User can used BindingUtils for data binding at run time in the Action Script.

Example:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import mx.binding.utils.*;

public function init():void {

BindingUtils.bindProperty(desinationtext, "text", sourcetext, "text");

}

]]>

</mx:Script>

<mx:TextInput id="sourcetext"/>

<mx:Text id="desinationtext" preinitialize="init();"/>

</mx:Application>

In this example we have used static BindingUtils.bindProperty() method to define the binding.

Output:

Running Example:

Downliad this code

Ads