Home Tutorial Flex Flex-components Flex 3 data binding process and example

 
 

Share on Google+Share on Google+
Flex 3 data binding process and example
Posted on: July 14, 2010 at 12:00 AM
Advertisement
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

Data binding with data model in Flex 3
In this example we have used data model for binding data for objects.
 
Advertisement

Related Tags for Flex 3 data binding process and example:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 14, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com