by Adobe

adobe_logo_bio

Created

23 March 2010

 Requirements
 
User level
Required products
All 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

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>

 
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>

 
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>
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>

 
For more information