Using data binding
Requirements
User level
All
Required products
- Flex (Download trial)
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:
- Using the curly braces ({}) syntax
- Using ActionScript expressions in curly braces
- Using the <fx:Binding> tag in MXML
- Using bindings in ActionScript
Using the curly braces ({}) syntax
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.
Example
<?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>
Result
Using ActionScript expressions in curly braces
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:
- 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
The following example shows a user interface that uses each type of binding expression:
Example
<?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>
Result
Using the <fx:Binding> tag in MXML
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:
Example
<?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>
Result
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"
/>
Using bindings in ActionScript
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.
Example
<?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>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
