zoukankan      html  css  js  c++  java
  • FLEX 数据绑定专题(1)


    2009年12月21日 星期一 09:08 A.M.

    1.关于数据绑定

    数据绑定是将一个对象中的数据同另一个对象中的数据联系在一起的过程。数据绑定为在
    应用的不同层之间传递数据提供了便捷方法。数据绑定需要一个源属性,一个目的属性,以及
    用于表明何时将数据从源属性拷贝到目的属性的触发事件。当源属性变化时,对象发出触发事
    件。

    Adobe Flex 提供三种方法用于指定数据绑定:MXML 中的大括号({})语法,MXML 中的
    <mx:Binding>标记,以及ActionScript 中的BindingUtils 的系列方法。

    (1)下面的例子使用大括号({})语法来展示一个Text 控件,该控件的数据来自于TextInput 控件Text 属性:

    <?xml version="1.0"?>
    <!-- binding/BasicBinding.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput id="myTI" text="Enter text here"/>
    <mx:Text id="myText" text="{myTI.text}"/>
    </mx:Application>

    数据绑定表达式中可以将ActionScript 代码以及E4X 表达式作为一部分包含进来,如下例
    所示:
    <?xml version="1.0"?>
    <!-- binding/BasicBindingWithAS.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput id="myTI"/>
    <mx:Text id="myText" text="{myTI.text.toUpperCase()}"/>
    </mx:Application>

    (2)用<mx:Binding>标记作为大括号语法的替代方法。在使用<mx:Binding>时,要为
    <mx:Binding>标记提供一个源属性作为标记的source 属性以及提供一个目的属性作为标记的
    destination 属性。下面的例子使用<mx:Binding>标记定义了一个从TextInput 控件到Text 控
    件的数据绑定:

    <?xml version="1.0"?>
    <!-- binding/BasicBindingMXML.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput id="myTI"/>
    <mx:Text id="myText"/>
    <mx:Binding source="myTI.text" destination="myText.text"/>
    </mx:Application>

    同大括号语法相比,用<mx:Binding>标记能够将视图(用户界面)同模型完全分离。
    <mx:Binding>标记也能实现将多个源属性绑定到一个相同的目的属性,这是因为能够定义多个
    具有相同的destination 属性的<mx:Binding>标记.

    大括号语法和<mx:Binding>标记都能在编译期定义数据绑定,而使用ActionScript 代码则
    可以在运行期定义数据绑定,如下例所示:

    <?xml version="1.0"?>
    <!-- binding/BasicBindingAS.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
    import mx.binding.utils.*;
    // Define data binding.
    public function initBindingHandler():void {
    BindingUtils.bindProperty(myText, "text", myTI, "text");
    }
    ]]>
    </mx:Script>
    <mx:TextInput id="myTI"/>
    <mx:Text id="myText" preinitialize="initBindingHandler();"/>
    </mx:Application>

    (3)创建用作数据绑定源的属性

    当创建一个用于绑定表达式源的属性,那么在源属性值发生变化时Flex 就能自动将值拷贝
    到所有的目的属性。为了让Flex 执行拷贝,必须使用[Bindable]标记来向Flex 注册这个属性。
    The [Bindable] 元数据标记有以下语法:
    [Bindable]
    [Bindable(event="eventname")]

    如果忽略了事件名称,Flex 自动地创建一个名为propertyChange 的事件,并且在属性发生
    变化时,由Flex 发出这个事件以触发所有以这个属性作为源的数据绑定。

    下面的例子作了一个maxFontSize 属性和一个minFontSize 属性变量可用于数据绑定表达式的源:

    <?xml version="1.0"?>
    <!-- binding/FontPropertyBinding.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
    // Define public vars for tracking font size.
    [Bindable]
    public var maxFontSize:Number = 15;
    [Bindable]
    public var minFontSize:Number = 5;
    ]]>
    </mx:Script>
    <mx:Text text="{maxFontSize}"/>
    <mx:Text text="{minFontSize}"/>
    <mx:Button click="maxFontSize=20; minFontSize=10;"/>
    </mx:Application>

    2. 在ActionScript 中定义数据绑定

    通过使用mx.binding.utils.BindingUtils能够在ActionScript中定义绑定。这个类定义了
    几个静态方法,通过使用bindProperty() 方法可以让我们创建一个到用变量实现的属性的数据
    绑定,或者用bindSetter()方法创建一个到用方法实现的属性的数据绑定。

    (1)在MXML 与在ActionScript 定义数据绑定的区别
    编译期在MXML 中定义数据绑定与在运行期在ActionScript 中定义数据绑定有一些不同之
    处:
    不能在由bindProperty()或者bindSetter()方法定义绑定表达式中引入
    ActionScript 代码。相反,使用bindSetter()方法可以指定一个在绑定发生时调用的
    方法。
    不能在由ActionScript 中定义的绑定表达式中引入E4X 表达式。
    在由the bindProperty()或者bindSetter()方法定义的数据绑定表达式的属性链中
    不能引入函数或者数组元素。更多信息见Working with bindable property chains.
    同运行时使用bindProperty()或者bindSetter()定义的数据绑定相比,MXML 编译器
    有更好的警告和错误检查支持。

    (2)范例:在ActionScript 中定义数据绑定

    下面的例子是用bindSetter()建立了一个数据绑定。bindSetter()方法的参数设置如下:
    源(source) 对象
    源(source) 属性名
    当源(source)属性变化被调用的方法。
    下面的范例中,当向TextInput 控件中输入文本时,文本会被转换为大写形式并拷贝给TextArea
    控件:
    <?xml version="1.0"?>
    <!-- binding/BindSetterAS.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
    import mx.binding.utils.*;
    import mx.events.FlexEvent;
    // Method called when myTI.text changes.
    public function updateMyString(val:String):void {
    myTA.text = val.toUpperCase();
    }
    <!-- Event listener to configure binding. -->
    public function mySetterBinding(event:FlexEvent):void {
    var watcherSetter:ChangeWatcher =
    BindingUtils.bindSetter(updateMyString, myTI, "text");
    }
    ]]>
    </mx:Script>
    <mx:Label text="Bind Setter using setter method"/>
    <mx:TextInput id="myTI"
    text="Hello Setter" />
    <mx:TextArea id="myTA"
    initialize="mySetterBinding(event);"/>
    </mx:Application>

    (3)定义绑定观察者 (watchers)

    Flex 有个mx.binding.utils.ChangeWatcher 类,可以用这个类来定义一个数据绑定观察
    者。通常,数据绑定观察者在绑定发生时激活一个事件监听器。可按照下面的范例使用
    ChangeWatcher 的watch()即可建立一个数据绑定观察者:
    <?xml version="1.0"?>
    <!-- binding/DetectWatcher.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initWatcher();">
    <mx:Script>
    <![CDATA[
    import mx.binding.utils.*;
    import mx.events.FlexEvent;
    import mx.events.PropertyChangeEvent;
    public var myWatcher:ChangeWatcher;
    // Define binding watcher.
    public function initWatcher():void {
    // Define a watcher for the text binding.
    ChangeWatcher.watch(textarea, "text", watcherListener);
    }
    // Event listener when binding occurs.
    public function watcherListener(event:Event):void {
    myTA1.text="binding occurred";
    // Use myWatcher.unwatch() to remove the watcher.
    }
    ]]>
    </mx:Script>
    <!-- Define a binding expression_r to watch. -->
    <mx:TextInput id="textinput" text="Hello"/>
    <mx:TextArea id="textarea" text="{textinput.text}"/>
    <!-- Trigger a binding. -->
    <mx:Button label="Submit" click="textinput.text='Goodbye';"/>
    <mx:TextArea id="myTA1"/>
    </mx:Application>
    上面的范例中,为数据绑定观察者定义了事件监听器,在这个事件监听器中使用了单个参
    数来包含事件对象。事件对象的数据类型由被观察的属性所决定。每个可绑定的属性会不同的
    事件类型以及相关的事件对象。有关确定事件类型的更多信息见“使用Bindable 元数据标记”。

  • 相关阅读:
    layui框架如何在停止服务用户操作任何步骤自动跳转登录页
    h5移动端和ios以及安卓客户端的接口联调
    sublime 主要使用方法
    内外边距、浮动、布局相关
    js介绍
    css的三个特性 背景透明设置
    选择器 导航制作相关
    表单综合
    自定义列表dl
    相对路径和绝对路径
  • 原文地址:https://www.cnblogs.com/nianshi/p/1739407.html
Copyright © 2011-2022 走看看