Data binding defines a syntax for automatically copying the value of a property of one object, the source property, to a property of another object, the destination property, at run time. Data binding is usually triggered when the value of the source property changes.

The following example shows a Text control that gets its data from a HSlider control's value property. The property name inside the curly braces ({ }) specifies a binding expression that copies the value of the source property, mySlider.value, into the destination property, the Text control's text property.

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

The current value of the HSlider control appears in the Text control when you stop moving the slider. To get continuous updates as you move the slider, set the HSlider.liveDragging property to true.

Using properties as the destination of a binding expression

Properties in your custom components can take advantage of data binding. Any property defined as a variable or defined by using a setter and getter method can automatically be used as the destination of a binding expression.

For example, in the section Defining public properties in ActionScript, you created a class with the public property maxFontSize. You can use the maxFontSize property as the destination of a binding expression, as the following example shows:

<?xml version="1.0"?> 
<!-- as/MainTextAreaFontControlBindingDest.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*" >

    <MyComp:TextAreaFontControl id="myTA" 
        maxFontSize="{Number(myTI.text)}"/>

    <mx:Label text="Enter max font size."/>
    <mx:TextInput id="myTI" text="25"/>

</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, any value that the user enters into the TextInput control is automatically copied to the maxFontSize property.

Using properties as the source of a data binding expression

When a property is the source of a data binding expression, Flex automatically copies the value of the source property to any destination property when the source property changes. However, in order to signal to Flex to perform the copy, you must register the property with Flex and the source property must dispatch an event.

To register a property as a source for data bindings, you use the [Bindable] metadata tag. You can use this tag in three places:

• Before a class definition, in order to make all public properties defined as variables usable as the source of a binding expression. You can also do this by using setter and getter methods, in which case you use the [Bindable] tag before the getter method.
• Before a property that a variable defines, in order to make that specific property support binding
• Before a getter method for a property implemented by using setter and getter methods

For more information on the [Bindable] metadata tag, see Metadata Tags in Custom Components.

The following example modifies the component in the section Defining public properties in ActionScript to make the maxFontSize and minFontSize properties usable as the source for data bindings:

    // Define public properties for tracking font size.
    [Bindable]
    public var maxFontSize:Number = 15;
    [Bindable]
    public var minFontSize:Number = 5;

If you omit the event name from the [Bindable] metadata tag, Flex automatically dispatches an event named propertyChange when the property changes to trigger the data binding. If the property value remains the same on a write operation, Flex does not dispatch the event or update the property.

When you define a property by using getter and setter methods so that the property is usable as the source for data binding, you include the [Bindable] metadata tag before the getter method, and optionally include the name of the event dispatched by the setter method when the property changes, as the following example shows:

package myComponents
{
    // as/myComponents/TextAreaFontControlBinding.as    
    import mx.controls.TextArea;
    import flash.events.KeyboardEvent;
    import flash.events.Event;
    
    public class TextAreaFontControlBinding extends TextArea 
    {
        public function TextAreaFontControlBinding() 
        {
            super();
            addEventListener("keyDown", myKeyDown);     
            addEventListener("creationComplete", myCreationComplete);       
        }       

        private var currentFontSize:Number;
        public var minFontSize:Number = 5;      

        // Define private variable for maxFontSize.
        public var _maxFontSize:Number = 15;
            
        // Define public getter method, mark the property
        // as usable for the source of data binding, 
        // and specify the name of the binding event.
        [Bindable("maxFontSizeChanged")]
        public function get maxFontSize():Number {
            return _maxFontSize;
        }

        // Define public setter method.
        public function set maxFontSize(value:Number):void {
            if (value <= 30) {
                _maxFontSize = value;
            } else _maxFontSize = 30;

            // Dispatch the event to trigger data binding. 
            dispatchEvent(new Event("maxFontSizeChanged"));
        }        
        
        private function myCreationComplete(eventObj:Event):void {           
            // Get current font size
             currentFontSize = getStyle('fontSize');
        }

        // keyDown event handler.
        private function myKeyDown(eventObj:KeyboardEvent):void {   
            // Was Ctrl key pressed?
            if (eventObj.ctrlKey) 
            {                       
                switch (eventObj.keyCode) {
                    // Was Ctrl-I pressed?  
                    case 73 :
                        if (currentFontSize < maxFontSize) {
                            currentFontSize = currentFontSize + 1;
                            setStyle('fontSize', currentFontSize);
                        } 
                        break;
                    // Was Ctrl-M pressed?  
                    case 77 :
                        if (currentFontSize > minFontSize) {
                            currentFontSize = currentFontSize - 1;
                            setStyle('fontSize', currentFontSize);
                        }
                        break;
                    default :
                        break;
                }           
            } 
        }
    
    }
}

In this example, the setter updates the value of the property, and then dispatches an event to trigger an update of any data binding destination. The name of the event is not restricted. You can use this component in an application, as the following example shows:

<?xml version="1.0"?> 
<!-- as/MainTextAreaFontControlBindingSource.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <MyComp:TextAreaFontControlBinding id="myTA" 
        maxFontSize="{Number(myTI.text)}"/>

    <mx:Label text="Enter max font size."/>
    <mx:TextInput id="myTI" text="15"/>
    
    <mx:Label text="Current max font size."/>
    <mx:TextArea text="{String(myTA.maxFontSize)}"/>    

</mx:Application>
The executing SWF file for the previous example is shown below: