Flex Tutorials 3-Data binding in Adobe Flex

Data binding is the process of tying the data in one object to another object. It provides a convenient way to pass data around in an application.
Adobe Flex 3 provides several ways to specify data binding:
1.Using the curly braces ({}) syntax
2.Using ActionScript expressions in curly braces
3.Using the <mx:binding>tag in MXML
4.Using bindings in ActionScript

1.Using the curly braces ({}) syntax
The following example shows a Text control that gets its data from an HSlider control's value property. The property name inside the curly braces is the source property of the binding expression. When the value of the source property changes, Flex copies the current value of the source property, mySlider.value, to the destination property, the Text control's text property.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="250" height="150"
>
<mx:Panel
title="Simple data binding"

paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"

>
<mx:HSlider id="mySlider"/>
<mx:Text text="{mySlider.value}"/>
</mx:Panel>
</mx:Application>

Output :

2.Using ActionScript expressions in curly braces
The following example shows a user interface that uses following type of binding expression:
A single bindable property inside curly braces
String concatenation that includes a bindable property inside curly braces
Calculations on a bindable property inside curly braces
Conditional operations that evaluate a bindable property value

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="420" height="350"
>
<mx:Model id="myModel">

<myModel123>
<!-- Perform simple property binding. -->
<a>{nameInput.text}</a>
<!-- Perform string concatenation. -->
<b>This is {nameInput.text}</b>

<!-- Perform a calculation. -->
<c>{(Number(numberInput.text) as Number) * 6 / 7}</c>

<!-- Perform a conditional operation using a ternary operator;
the person object contains a Boolean variable called isMale. -->
<d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d>
</myModel123>

</mx:Model>

<mx:Panel
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"

width="100%" height="100%"
title="Binding expressions"
>
<mx:Form>
<mx:FormItem label="Last Name:">

<mx:TextInput id="nameInput"/>
</mx:FormItem>
<mx:FormItem label="Select sex:">
<mx:RadioButton
id="isMale"
label="Male"
groupName="gender"

selected="true"
/>
<mx:RadioButton
id="isFemale"
label="Female"
groupName="gender"

/>
</mx:FormItem>
<mx:FormItem label="Enter a number:">
<mx:TextInput id="numberInput" text="0"/>

</mx:FormItem>
</mx:Form>

<mx:Text text="{'Simple binding: '+myModel.a}"/>
<mx:Text text="{'String concatenation: '+myModel.b}"/>

<mx:Text text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>
<mx:Text text="{'Conditional: '+myModel.d}"/>

</mx:Panel>
</mx:Application>

Output:


3.Using the <mx:binding>tag in MXML
You can use the <mx:Binding> tag as an alternative to the curly braces syntax. 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. This is equivalent to using the curly braces syntax.

In contrast with the curly braces syntax, you can use the <mx:Binding> tag to completely separate the View (user interface) from the Model in a Model-View-Controller (MVC) architecture. In this artchitecture, the binding tags act as the Controller. The <mx:Binding> tag also lets you bind different source properties to the same destination property because you can specify multiple <mx:Binding> tags with the same destination.

In the following example, the properties of user interface controls are bound to the wormModel data model using <mx:Binding> tags:

Case 1:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="200"
>
<!--
View: User Interface controls.
-->
<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>
<mx:Binding
source="mySlider.value.toString()"
destination="statusText.text"
/>
</mx:Application>

Case 2.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="200"
>

<!-- Model: Worm data -->
<mx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</mx:Model>

<!--
View: User Interface controls.
-->
<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>

<!--
Controller: Properties of user interface controls are bound
to the data model using <mx:Binding> tags.
-->

<mx:Binding
source="mySlider.value"
destination="wormModel.length"
/>
<mx:Binding
source="wormModel.length"
destination="statusText.text"
/>
</mx:Application>

Case 1 and Case 2 both are same,but the case 2 is a an example of MVC architecture.

4.Using bindings in ActionScript
You typically define a data binding in MXML by using the curly braces ({ }) or the <mx:Binding> tag. You can also define a binding in ActionScript by using the mx.binding.utils.BindingUtils class. This class defines static methods that let you create a binding to a property implemented as a variable, by using the bindProperty() method, or to a property implemented as a setter method, by using the bindSetter() method.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="200"
initialize="initializeHandler();"
>

<!--
Controller: Properties of user interface controls are bound
to the data model using ActionScript.
-->

<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
private function initializeHandler():void
{
// Updates the model
BindingUtils.bindProperty(wormModel, "length", mySlider, "value");
// Reads from the model to update the status text
BindingUtils.bindProperty(statusText, "text", wormModel, "length");
}
]]>
</mx:Script>

<!-- Model: Worm data -->
<mx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</mx:Model>

<!--
View: User Interface controls.
-->

<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>
</mx:Application>