Macromedia flex 2 Manual

Adding custom properties and methods to a component

Supporting data binding in custom properties

The Flex data binding mechanism provides a syntax for automatically copying the value of a
property of one object to a property of another object at run time. The following example
shows a

Text

control that gets its data from

Slider

control’s

value

property. The property

name inside the curly braces ({ }) is a binding expression that copies the value of the source
property,

mySlider.value

, to the destination property, the Text control’s

text

property, as

the following example shows:

<mx:Slider id="mySlider"/>
<mx:Text text="{mySlider.value}"/>

Data binding is usually triggered whenever the value of the source property changes.

Properties that you define in your custom controls can also take advantage of data binding.
You can automatically use any property defined by using an MXML tag, such as

<mx:Boolean>

, and any ActionScript property defined as a variable or defined by using setter

and getter methods as the destination of a binding expression.

For example,

“Defining properties by using setters and getters” on page 96

defined the

shortNames

property of StateComboBoxGetSet.mxml by using setter and getter methods.

With no modification to that component, you can use

shortNames

as the destination of a

binding expression, as the following example shows:

<MyComp:StateComboBoxSetGet shortNames="{some_prop}"/>

However, you can also write your component to use the

shortNames

property as the source of

a binding expression, as the following example shows for the nex component
StateComboBoxGetSetBinding.mxml:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*">

<MyComp:StateComboBoxSetGetBinding id="myStateCB" shortNames="false"/>

<mx:TextArea text="The value of shortNames is {myStateCB.shortNames}"/>

<mx:Button click="myStateCB.shortNames=!myStateCB.shortNames;"/>

</mx:Application>