冲吧,不要停!

怎么java又来了?

Flex 4.5中数据绑定的原理

http://www.iyoya.com/2011/06/10/flex-data-binding-2.html

Flex中数据绑定的实现是由事件驱动的,当作为数据来源的对象发生变化时会触发propertyChange事件,Flex会将新的对象的值复制给目标对象,从而达到数据同步更新的目的。

我们这里将对实现as中对象绑定的方式来说明原理,可以绑定as中的属性、方法以及类。

1、当绑定属性时,只要在属性前面添加[Bindable]元数据标签,如下面的形式:

1
2
3
4
[Bindable]
private var userName:String;
[Bindable]
private var userAge:uint;

2、当绑定方法时,分为两种情况一种为getter/setter方法定义属性的绑定,另一种为普通方法的绑定。
getter/setter方法定义的属性绑定,应该在getter方法前添加[Bindable]元数据标签,如下面的形式:

1
2
3
4
5
6
7
8
9
10
11
private var _userEmail:String;
 
[Bindable]
public function get userEmail():String
{
    return _userEmail;
}
public function set userEmail(value:String):void
{
    _userEmail = value;
}

普通方法的绑定,需要通过[Bindable]元数据标签将具体的事件绑定到方法,当事件发出后会更新(执行)与事件绑定的方法,下面为Adobe官网上提供的一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0"?>
<!-- binding/ASFunction.mxml -->
<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/mx">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import flash.events.Event;
            [Bindable(event="myFlagChanged")]
                        //这里我们是通过将具体的事件绑定到isEnabled方法,所以我们要在后触发这个事件.
            private function isEnabled():String {
                if (myFlag)
                    return 'true';
                else
                    return 'false';
            }
            private var _myFlag:Boolean = false;
            public function set myFlag(value:Boolean):void {
                _myFlag = value;
                dispatchEvent(new Event("myFlagChanged"));
            }
            public function get myFlag():Boolean {
                return _myFlag;
            }
        ]]>
    </fx:Script>
    <s:TextArea id="myTA" text="{isEnabled()}"/>
    <s:Button label="Clear MyFlag" click="myFlag=false;"/>
    <s:Button label="Set MyFlag" click="myFlag=true;"/>
</s:Application>

从这个例子中可以更清楚的认识到Flex数据绑定的原理是基于事件驱动的。这种将具体的事件与方法绑定的方式同样也适用于属性,如下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            [Bindable(event="userChange")]
            //这里我们是通过将具体的事件绑定到userName变量,所以我们要在后触发这个事件.
            private var userName:String = "iYoya";
            protected function btnClickHandler(event:MouseEvent):void
            {
                userName = "iYoya Zhang";
                //如果这里不发送这个事件将无法更新userName值到Label中.
                dispatchEvent(new Event("userChange"));
            }
        ]]>
    </fx:Script>
    <s:VGroup>
        <s:Label text="User Name: {userName}"/>
        <s:Button label="Change Name" click="btnClickHandler(event)"/>
    </s:VGroup>
</s:Application>

3、当绑定类时,只要在类定义的代码前添加[Bindable]元数据标签,如下面的形式:

1
2
3
4
5
6
7
8
package
{
    [Bindable]
    public class MyClass
    {
 
    }
}

阅读更多
个人分类: flex
想对作者说点什么? 我来说一句

flex数据绑定原理

2008年08月20日 104KB 下载

flex_sdk_4.5 下载

2013年09月11日 2.11MB 下载

FlexBuilder 4.5 + Eclipse 插件

2016年01月08日 31B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭