IdataRender:구성 요소 기본 데이터 바인딩

Flex의 대부분 구성 요소 (component) 와 모든 용기 (container) 는 IData Renderer 인터페이스를 실현하여 기본 데이터 귀속 기능을 제공합니다.
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));

    }

데이터가 변할 때 구성 요소가 디스패치 데이터 변경 이벤트를 디스패치하는 것을 알 수 있습니다.구성 요소 (사용자 정의 구성 요소 포함) 를 사용할 때 다음과 같은 방법을 사용할 수 있습니다: 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에 서브어셈블리 ChildComponent를 추가하려면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 코드 알림에는 데이터 속성이 나타나지 않지만, 이렇게 사용할 수 있습니다.
다음으로 이동:http://www.cnblogs.com/holbrook/archive/2007/12/06/2357395.html