A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Flex cookbook (share code)
- Adobe AIR cookbook (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User group search
- About user groups
- Adobe Community Experts (ACE)
- Developer events
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
- MXNA (blog aggregator)
- Adobe blogs
Archives
ADC program
Additional resources
Flex Quick Starts: Handling data
Table of contents
- Defining data models
- Using data binding
- Validating data
- Formatting data
- Accessing XML data
- Loading external data with HTTPService
Using data binding
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:
- Using the curly braces ({}) syntax
- Using ActionScript expressions in curly braces
- Using the <mx: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.
Link: For a more complicated example of data binding using the curly braces syntax, see Defining data models.
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/DataBindingSimple/index.html" 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>
Result
This content requires Flash
To view the full source, right-click the Flex application and select View Source from the context menu.
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"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html" width="420" height="350" > <mx: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> </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>
Result
To view the full source, right-click the Flex application and select View Source from the context menu.
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:
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/DataBindingBindingTag/index.html" 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>
Result
To view the full source, right-click the Flex application and select View Source from the context menu.
Note: The source property of an <mx: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:
<mx:Binding source="'The worm is ' + wormModel.length + 'cm long.'" destination="statusText.text" /> <mx:Binding source="{'The worm is ' + wormModel.length + 'cm long.'}" destination="statusText.text" /> <mx: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 <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.
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/DataBindingActionScript/index.html" 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>
Result
To view the full source, right-click the Flex application and select View Source from the context menu.
For more information
- Binding and Modeling in the Flex 3 Getting Started Experience
- Binding data in the Adobe Flex 3 Help
About the author
Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications, and runs OSFlash.org, the London Macromedia User Group, and his company, Ariaware. He loves talking design patterns and writing for books and magazines. He also authored Arp, the open-source RIA framework for the Flash platform. Aral is generally quite opinionated, animated, and passionate. He loves to smile, and can even chew gum and walk at the same time.
