AdvancED Flex 4

43

Chapter 2

Turbo-Charging Data Binding

by Elad Elrom

Data binding is one of the most used processes when building Flex applications because it allows rapid

development of Flex applications. Data binding allows you to pass data between different layers of the

application automatically and makes development of Flex applications easy, fast, and enjoyable. Although

Data binding contains tremendous value, it also holds some disadvantages for the unwary: without

understanding exactly how data binding works and ensuring it is being used correctly and when needed, data

binding can create bottlenecks, overheads, and memory leaks, which will cause your application to suffer in

term of performance. Although you may not notice these performance differences when building a small Flex

application, as your application scales up you may start seeing performance issues and data binding may be

responsible for some of these issues, so it is better to build your application correctly from the start and avoid

potential issues.

If you have developed Flex applications in the past, I am sure you have already used data binding, so the

intention of this chapter is to provide you with basic and advanced techniques to use data binding so you know

what’s possible, as well as explain in detail what’s going on under the hood so you will know how to use data

binding correctly without causing any overhead or memory leaks. We are confident that a better understanding

of how data binding works, and knowing all the different options that are available to you, while using data

binding can help you build a better Flex application and avoid bottlenecks that can be caused by misuse of

data binding.

Techniques for Using Data Binding

The Data binding process enables the tying of one object’s data with another object. The concept of data

binding is that by connecting a source object with a destination object, once the source object changes then

the destination object also changes automatically. Additionally, Flex 4 offers two-way data binding, also known

as bi-directional data binding, which enables two objects to be tied to each other allowing data to be changed

when either object changes.

CHAPTER 2

44

There are five main techniques for using Data Binding, which we will be covering in this chapter:

• Using braces with MXML tags

• Using the fx:Binding tag

• Using the BindingUtils class

• Implicit and explicit data binding

• Custom metadata

One and Two-way Data Binding Using Braces in MXML tags

Braces are the most commonly used technique to employ data binding in Flex applications. They allow you to

bind properties without writing any actual code other than placing the braces. You set the braces, and once the

application is compiled the compiler generates the code that does the binding automatically for you.

Up until Flex 4, you could do a one-way data binding. In Flex 4, you can also do a two-way data binding.

• One-way Data Binding: Allows binding of one variable or object property to another object

property and any changes in the source will update the destination automatically.

• Two-way Data Binding: Allows binding of a pair of object’s properties to update each other.

Create a new MXML application and call it OneWayDataBinding.mxml. Take a look at hello world minimalist

code to use one-way data binding:

<?xml version="1.0" encoding="utf-8"?>

<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/halo"

minWidth="1024" minHeight="768">

<fx:Script>

<![CDATA[

[Bindable]

public var value:String = "Hello World";

]]>

</fx:Script>

<s:layout>

<s:VerticalLayout />

</s:layout>

<s:Label text="{value}" />

</s:Application>

In the example, you have a Label component to display some text and you tie the text property of the

component to a value variable using data binding. This means the value variable is the source and the text

property is the destination, and you are tying the two together using the braces syntax in the MXML code. Now

let’s say you change the value of the bindable source object during runtime, the text property, which is the

destination property, will change as well.

Add the following line of code: <s:TextInput id="textInput" change="{value=textInput.text}" />