22 March 2010
All
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 provides several ways to specify data binding:
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. 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"?>
<!-- DataBindingSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Panel title="Simple data binding">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:HSlider id="mySlider"/>
<s:Label text="{mySlider.value}"/>
</s:Panel>
</s:Application>
Binding expressions in curly braces can contain an ActionScript expression that returns a value. For example, you can use the curly braces syntax for the following types of binding:
The following example shows a user interface that uses each type of binding expression:
<?xml version="1.0" encoding="utf-8"?>
<!-- DataBindingActionScriptExpressionsSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="420" height="350">
<fx:Declarations>
<fx:Model id="myModel">
<myModel>
<!-- 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>
</myModel>
</fx:Model>
</fx:Declarations>
<s:Panel width="100%" height="100%"
title="Binding expressions">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:Form>
<mx:FormItem label="Last Name:">
<s:TextInput id="nameInput"/>
</mx:FormItem>
<mx:FormItem label="Select sex:">
<s:RadioButton
id="isMale"
label="Male"
groupName="gender"
selected="true"/>
<s:RadioButton
id="isFemale"
label="Female"
groupName="gender"/>
</mx:FormItem>
<mx:FormItem label="Enter a number:">
<s:TextInput id="numberInput" text="0"/>
</mx:FormItem>
</mx:Form>
<s:Label text="{'Simple binding: '+myModel.a}"/>
<s:Label text="{'String concatenation: '+myModel.b}"/>
<s:Label text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>
<s:Label text="{'Conditional: '+myModel.d}"/>
</s:Panel>
</s:Application>
You can use the <fx:Binding> tag as an alternative to the curly braces syntax. When you use the <fx:Binding> tag, you provide a source property in the <fx: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 <fx:Binding> tag to completely separate the View (user interface) from the Model in a Model-View-Controller (MVC) architecture. In this architecture, the binding tags act as the Controller. The <fx:Binding> tag also lets you bind different source properties to the same destination property because you can specify multiple <fx:Binding> tags with the same destination.
In the following example, the properties of user interface controls are bound to the wormModel data model using <fx:Binding> tags:
<?xml version="1.0" encoding="utf-8"?>
<!-- DataBindingBindingTag.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="200">
<fx:Declarations>
<!-- Model: Worm data -->
<fx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</fx:Model>
</fx:Declarations>
<!--
View: User Interface controls.
-->
<s:Panel title="Using the binding tag">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:Form>
<mx:FormItem label="Length of worm:">
<s:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<s:Label id="statusText"/>
</s:Panel>
<!--
Controller: Properties of user interface controls are bound
to the data model using <mx:Binding> tags.
-->
<fx:Binding
source="mySlider.value"
destination="wormModel.length"/>
<fx:Binding
source="wormModel.length"
destination="statusText.text"/>
</s:Application>
Note: The source property of an <fx:Binding> tag can contain curly braces. When there are no curly braces in the source property, the value is treated as a single ActionScript expression. When there are curly braces in the source property, the value is treated as a concatenated ActionScript expression. The following expressions are all valid:
<fx:Binding
source="'The worm is ' + wormModel.length + 'cm long.'"
destination="statusText.text"
/>
<fx:Binding
source="{'The worm is ' + wormModel.length + 'cm long.'}"
destination="statusText.text"
/>
<fx:Binding
source="'The worm is ' + {wormModel.length} + 'cm long.'"
destination="statusText.text"
/>
You typically define a data binding in MXML by using the curly braces ({ }) or the <fx: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"?>
<!-- DataBindingActionScript.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="200"
initialize="initializeHandler();">
<fx: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");
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Model: Worm data -->
<fx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</fx:Model>
</fx:Declarations>
<!--
View: User Interface controls.
-->
<s:Panel title="Using the binding tag">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:Form>
<mx:FormItem label="Length of worm:">
<s:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<s:Label id="statusText"/>
</s:Panel>
</s:Application>

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.