IdataRenderer：组件默认的数据绑定

最新推荐文章于 2013-11-15 16:16:00 发布

转载最新推荐文章于 2013-11-15 16:16:00 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gongchen/archive/2013/03/13/2957164.html

本文介绍Flex中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属性，但是确实可以这样使用。

转自： http://www.cnblogs.com/holbrook/archive/2007/12/06/2357395.html

转载于:https://www.cnblogs.com/gongchen/archive/2013/03/13/2957164.html