Professional Adobe® Flex® 3

Chapter 11. Using Data Binding and Events

Data binding is one of the most powerful features of Flex. This is a mechanism whereby an ActionScript object instance is associated with another ActionScript object instance so that changes in one object are reflected in the other object.

The Flex compiler can detect data binding in MXML tags or you can set up data binding explicitly by using ActionScript classes. In either case, Flex classes are used to watch the value of a variable and dispatch events when the variable's value changes. It is this coupling of variable watching and events that makes data binding work so well.

Using {Curly Braces}

You are probably familiar with data binding in MXML tags using curly braces. This is where a property of a Flex control has been bound to a variable or property of another control. For example:

<mx:Script>
<![CDATA[
    [Bindable] private var userName:String;
    ...
]]>
</mx:Script>
<mx:TextInput id="inputUserName" text="{userName}" />
<mx:HBox>
    <mx:HSlider id="ageSlider" snapInterval="0.1"/>
    <mx:Label text="{ageSlider.value}" />
</mx:HBox>

The TextInput control's text property is bound to the value of the variable, userName. The Label control's text property is bound to the value property of the HSlider, ageSlider.

Only ActionScript statements may appear within curly braces.

In this type of data binding, the Flex compiler recognizes the data binding because of the presence of curly braces in the MXML tags.

The Flex compiler generates code to make data binding ...