Adobe FLEX 2 - CREATING AND EXTENDING COMPONENTS, Руководство пользователя

Страница: 99 / 254

Adding custom properties and methods to a component 99
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"?>
<!-- mxmlAdvanced/MainPropSetGetBinding.mxml -->
<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>