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属性，但是确实可以这样使用。