IdataRenderer：组件默认的数据绑定

<meta content="StarSuite 8 (Linux)" name="GENERATOR"> <meta content="Seaman Wang" name="AUTHOR"> <meta content="20071105;11300300" name="CREATED"> <meta content="Seaman Wang" name="CHANGEDBY"> <meta content="20071206;16315100" name="CHANGED"> <style type="text/css"> <!-- @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } --> </style>

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

<meta content="text/html; charset=utf-8" http-equiv="CONTENT-TYPE">

<meta content="StarSuite 8 (Linux)" name="GENERATOR"> <meta content="Seaman Wang" name="AUTHOR"> <meta content="20071105;11300300" name="CREATED"> <meta content="Seaman Wang" name="CHANGEDBY"> <meta content="20071206;18051100" name="CHANGED"> <style type="text/css"> <!-- @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } --> </style>

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

//Internalvariableforthepropertyvalue.
privatevar_data:Object;

//Makethedatapropertybindable.
[Bindable("dataChange")]

//Definethegettermethod.
publicfunctiongetdata():Object...{
return_data;
}

//Definethesettermethod,anddispatchaneventwhentheproperty
//changestosupportdatabinding.
publicfunctionsetdata(value:Object):void...{
_data=value;

dispatchEvent(newFlexEvent(FlexEvent.DATA_CHANGE));
}

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

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

<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"creationComplete="test()">
<mx:Script>
<![CDATA[
privatefunctiontest():void{
varcomp1:MyComponent=newMyComponent();
varcomp2:MyComponent=newMyComponent();
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

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

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

<?xmlversion="1.0"encoding="utf-8"?>
<mx:Canvasxmlns:mx="http://www.adobe.com/2006/mxml"width="40"height="40"
borderColor="#ff0000"borderStyle="solid"borderThickness="{dataasNumber}">
</mx:Canvas>

可以将MyComponent改为：

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

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