为组件属性使用数据绑定

为组件属性使用数据绑定
数据绑定，用来自动地复制源的值到目标。
1.将属性作为绑定表达式的目标。
 在你的定制组件中的属性自动地可作为数据绑定的目标，包括用setter和getter方法定义的。
2.将属性任为绑定表达式的源。
 你必须在Flex里注册这个属性，源属性必须分发一个事件
 你要使用[Bindable]元数据标签，在以下三个地方：
  在一个类定义之前，将所该类所有的public属性和setter和getter方法可作为绑定表达的源。
  在一个属性之前
  在一个getter方法之前，对于使用setter和getter实现的属性
注：在类定义之前使用[Bindable]，只能激活该类的所有公有public的属性，它不会用于private和protected的属性，或定义在期命名空间里的属性。如果你要将非公有属性作为绑定的源，你必须在它们前面再插入[Bindable]声明。

如果你省略[Bindable]中的事件名，当属性改变时，Flex自动分发的是名叫propertyChange的事件，来触发数据绑定。如果属性值在一个写入时仍保持一样，Flex不会分发属性更新事件。

当你为用getter和setter方法定义的属性任数据绑定的源，你要在getter方法前插入[Bindable]元数据标签，并且可选地，在setter方法分发这个事件名。例子如下：

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;
                }          
            }
        }
   
    }
}
而后，可在主MXML里使用这个绑定：
<?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>