IdataRenderer：组件默认的数据绑定

Flex中的大部分组件(component)和所有的容器(container)都实现了IDataRenderer 接口，从而提供默认的数据绑定功能。

IDataRenderer接口的一般实现方式如下：

   // Internal variable for the property value.
   private var _data:Object;
  
    // Make the data property bindable.
    [Bindable("dataChange")]

    // Define the getter method.
    public function get data():Object ...{
        return _data;
    }
    
    // Define the setter method, and dispatch an event when the property
    // changes to support data binding.
    public function set data(value:Object):void ...{
        _data = value;
    
        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

 
可以看出，当data发生变化时，组件会dispatch dataChange事件。

当我们使用组件（包括自定义组件）时，可以用如下的方法：
DataChangeTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="test()">
<mx:Script>
    <![CDATA[
        private function test():void{
            var comp1:MyComponent = new MyComponent();
            var comp2:MyComponent = new MyComponent();
            comp1.data = {label:"comp1",border:3};
            comp2.data = {label:"comp2",border:1};
            comp1.x = 100;
            comp1.y = 200;
            comp2.x = 300;
            comp2.y = 400;
            
            this.addChild(comp1);
            this.addChild(comp2);
        }
    ]]>
</mx:Script>
    
</mx:Application>

自定义的组件MyComponent.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="80" height="50">
    <mx:Label id="testTxt" width="100%" text="{data.label+':'+data.border}"/>
</mx:Canvas>

如果我们要在自定义的MyComponent中再增加子组件ChildComp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="40" height="40"
     borderColor="#ff0000" borderStyle="solid"  borderThickness="{data as Number}">
</mx:Canvas>

可以将MyComponent改为：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="80" height="50"  xmlns:local="*">
     <local:ChildComp id="child" data="{data.border}"/>
    <mx:Label id="testTxt" width="100%" text="{data.label+':'+data.border}"/>
</mx:Canvas>

注意：在FlexBuilder的mxml代码提示中，并不出现data属性，但是确实可以这样使用。