Flex DataBinding(3)

Defining binding watchers

 
Flex includes the mx.binding.utils.ChangeWatcher class that you can use to define a data-binding watcher. Typically,
a data-binding watcher invokes an event listener when a binding occurs. To set up a data-binding watcher, you use the
static watch() method of the ChangeWatcher class.

 

做了一下实验，用以检测整体数据绑定流程

整体类结构如下：

 

 

在舞台上挂载两个Panel板,建立一个ClassA并挂载到Panel2上面，ClassB为单例。

由Database对一些DataFile进行引用，并且将其中一个DataFile进行数据绑定(其余所有对象).

 

代码如下：

 

Stage

MXML语言:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="640"
               minHeight="480"
               backgroundColor="0x75ad44"
               initialize="onInit()">

    <fx:Script>
        <![CDATA[
            import mx.core.IFlexDisplayObject;
            import mx.managers.PopUpManager;

            private function onInit():void
            {
                DataBase.instance.init();
                ClassB.instance;
            }

            protected function onPanel1ButtonDown(event:MouseEvent):void
            {
                var panel:IFlexDisplayObject=PopUpManager.createPopUp(this, Panel1);
                panel.x=0;
                panel.y=200;
            }

            protected function onPanel2ButtonDown(event:MouseEvent):void
            {
                PopUpManager.createPopUp(this, Panel2);
            }
        ]]>
    </fx:Script>

    <s:Button x="292"
              y="34"
              label="Panel1"
              click="onPanel1ButtonDown(event)"
              textAlign="center"/>
    <s:Button x="292"
              y="67"
              label="Panel2"
              click="onPanel2ButtonDown(event)"
              textAlign="center"/>
    <s:Button x="37"
              y="384"
              label="Add Value"
              click="DataBase.instance.addDataFileValueNumber(3,5)"/>
    <s:Button x="130"
              y="385"
              label="Add ValueTwo"
              click="DataBase.instance.addDataFileValueTwo(3,5)"/>
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Style source="DataBinding3.css"/>
</s:Application>

 

建立两个按钮，分别对DataFile的两个数据ValueOne，ValueTwo进行Add操作。

 

Panel

MXML语言:

<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/halo"
         width="200"
         height="100"
         initialize="onInit()">

    <fx:Script>
        <![CDATA[
            import mx.binding.utils.ChangeWatcher;
            import mx.managers.PopUpManager;
            private var classA:ClassA;

            private function onInit():void
            {
                classA=new ClassA();
                ChangeWatcher.watch(DataBase.instance.getDataFileByID(3), "valueOne", onBindingChange);
            }

            protected function onClose(event:MouseEvent):void
            {
                PopUpManager.removePopUp(this);
            }

            private function onBindingChange(e:Event):void
            {
                trace("Receive BindingChange on Panel2");
            }
        ]]>
    </fx:Script>

    <mx:Label x="2"
              y="1"
              text="Panel Two Value is :{DataBase.instance.getDataFileByID(3).valueOne}"
              width="194"
              height="31"/>
    <s:Button x="64"
              y="45"
              label="Close"
              click="onClose(event)"/>
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
</s:Panel>

 

Panel1 和Panel2面板几乎相同，一个引用ClassA对象 一个不引用

 

ClassA：

ActionScript 3语言:

package
{
    import flash.events.Event;
   
    import mx.binding.utils.ChangeWatcher;

    public class ClassA
    {
        public function ClassA()
        {
            ChangeWatcher.watch(DataBase.instance.getDataFileByID(3),"valueOne",onBindingChange);
        }

        private function onBindingChange(e:Event):void
        {
            trace("Receive BindingChange on ClassA");
        }
    }
}

 

ClassA对绑定数据进行监听

 

DataFile：

ActionScript 3语言:

package
{
    import mx.binding.utils.ChangeWatcher;

    public class DataFile
    {
        public var _valueOne:int;
        private var _valueTwo:int;
        private var id:int;

        public function DataFile(_id:int)
        {
            this.id=_id;
        }

        public function init():void
        {
            ChangeWatcher.watch(DataBase.instance.getDataFileByID(3),"valueOne", onBindingChange);
        }

        private function onBindingChange(e:Event):void
        {
            trace("Receive BindingChange on DataFile" + id);
        }

        public function get valueOne():int
        {
            return _valueOne;
        }

        [Bindable]
        public function set valueOne(v:int):void
        {
            _valueOne=v;
        }

        public function get valueTwo():int
        {
            return _valueTwo;
        }

        [Bindable]
        public function set valueTwo(v:int):void
        {
            _valueTwo=v;
        }
    }
}

 

DataFile中含有两个元素，ValueOne和ValueTwo。整个Demo仅对ValueOne进行监听

 

DataBase：

ActionScript 3语言:

package
{
    import flash.events.Event;
    import mx.binding.utils.ChangeWatcher;

    /**
     * This class is use to store the data,
     * and test the bindable things in different class
     */
    public class DataBase
    {
        private static var _instance:DataBase;

        public static function get instance():DataBase
        {
            if (_instance == null)
            {
                _instance=new DataBase();
            }
            return _instance;
        }

        private var dataFileArray:Vector.<DataFile>;

        public function DataBase()
        {
        }

        public function init():void
        {
            dataFileArray=new Vector.<DataFile>;
            for (var i:int=0; i < 10; i++)
            {
                dataFileArray.push(new DataFile(i));
            }
            for each (var dataFile:DataFile in dataFileArray)
            {
                dataFile.init();
            }
            ChangeWatcher.watch(DataBase.instance.getDataFileByID(3), "valueOne", onBindingChange);
        }

        private function onBindingChange(e:Event):void
        {
            trace("Receive BindingChange on DataBase");
        }

        public function getDataFileByID(_id:int):DataFile
        {
            return dataFileArray[_id];
        }

        public function addDataFileValueNumber(_id:int, _value:int):void
        {
            getDataFileByID(_id).valueOne+=_value;
        }

        public function addDataFileValueTwo(_id:int, _value:int):void
        {
            getDataFileByID(_id).valueTwo+=_value;
        }

    }
}

 

初始化DataFile

 

总结：

使用ChangeWatcher.watch(***); 函数可以在任意类中响应绑定。

在实际使用中，需要 var watch:ChangeWatch = ChangeWatcher.watch(***); 在Class Destroy的使用

调用 watch.unwatch();释放监听。

在Demo中由于在watch中指定("valueOne")所以当在主面板上按 AddValueTwo时候并未触发任何事件。