`

Flex中[Bindable]的使用心得

    博客分类:
  • flex
 
阅读更多
在Flex编程中,Bindble使用到最多的元数据。该标签可以应用在变量或者类或者方法上。同在在MXML中使用”{}”引用设置为Bindable的变量,从而实现对于变量赋值与界面元素的自动同步。

Bindable的实现采用了GoF的Observer模式,或者Publisher/Subscriber模式。该实现允许一个类(或者变量)可以将自身的变化自动通知给感兴趣的对象。

对应Observer模式,GoF的说法是:

定义对象间的一种一对多的依赖关系,当一个对象状态发生改变的时候,所有依赖于他的对象都得到通知并被自动更新。这种交互也成为发布-订阅。目标是通知的发布者。他发布通知是不需要知道谁是他的订阅者(观察者)。可以有任意数目的观察着订阅并接受通知。

在ActionScript中,编译器将会为该标签给特定的属性或类或者方法的变化增加事件关联。

简单的例子,如果定义了变量和一个组件:
[Bindable] var displayName :String;
<mx:TextInput id= "textA" text="{dispayName}"/>,
编译器在后台自动增加事件对应伪代码如下:
function set DispayName(newvar :String) :void
{
    displayName= newvar;
    this.dispatchEvent(new Event("_dispayNameChanged"));
}
// 类型初始化时被调用
function MxmlInit(){     textA.addEventListener("_dispayNameChanged")) , UpdateDisplay);
}

function UpdateDisplay(){
    textA.text = displayName;
}
可见,编译器在背后做了大量的工作,为我们节省了很多的重复劳动来建立这种观察关系。

对于初学Flex的人,对于bindable的误解往往是认为Bindable是双向的数值链接,事实上Observer模式对应的一个要素就是被观察者对观察者一无所知。

比如上面的例子,对于textA的修改,其值并不会自动的体现在displayName上。Bindable只是建立单项的观察者的关系,这一点至关重要。

对应MVC架构中,被观察者往往对应Model(数据模型?)的角色,而观察者则对应于View(视图)的角色,事实上很多的MVC架构也是非常依赖于Bindable这个工具。

那么什么情况下应该应用Bindable?Leaf的个人经验和理解是:
在不知道有哪些观察者,或者需要动态的增加观察者的时候,才需要是用Observer模式!
当观察者不需要彼此之间的知识的时候。
当被观察者对观察者的信息不关心的时候。
当仅仅是简单的界面数值映射关系的时候。

注意Bindable是有额外的开销的,别忘了那些编译器自动生成的代码,如果需要复杂的逻辑(并非简单的数值赋值)对应的时候,不要使用bindable。

其实也是因为这一点,ActionScript中,即使指定了Bindable,如果对应的set或者get中逻辑比较复杂,则不会自动的创建事件关联操作,而是忽略Bindable标签。

可以自己使用Bindable[事件名称]的方式建立关联,Adobe给出了这样的例子:
private var _maxFontSize:Number = 15;
[Bindable(event="maxFontSizeChanged")]
// Define public getter method.
public function get maxFontSize():Number
{
    return _maxFontSize;
}

// Define public setter method.
public function set maxFontSize(value:Number):void
{
    if (value <= 30) {
        _maxFontSize = value;
    }
    else
    {
         _maxFontSize = 30;
    }
    // Create event object.
    var eventObj:Event = new Event("maxFontSizeChanged");
    dispatchEvent(eventObj);
}
注意在这个例子里,复杂的逻辑是在setter里面做的,而不是getter,为什么? 因为setter调用的次数在正常的情况下总是要比getter少,原则上,
复杂的逻辑通常在赋值时完成,用空间换时间,而不是在每一次取值时计算。

特别信息:

在Flex4里面,新增加了允许对于表达式的观察! 例如:
<mx:Button enabled="{state == 'ready'}"/>
同样的代码在Flex3中无效。

附,Flex3中对于Bindable的解释的LiveDoc 链接如下。
分享到:
评论

相关推荐

    flex学习心得

    Flex中的所有可视化对象都遵循一定的继承层次结构,这一结构有助于理解各组件之间的关系: 1. **Object** - 基础类,所有Flex类的起点。 2. **EventDispatcher** - 为事件处理提供基础。 3. **DisplayObject** - ...

    Flex Bindable 的用法

    `[Bindable]`是Flex中最常用的元数据之一,它主要用于实现数据绑定功能。数据绑定是Flex应用中的核心概念,它允许视图组件与应用程序模型之间的数据自动同步。 元数据不是语言本身的一部分,而是为编译器设计的,...

    Flex4 AIP 中文说明

    5. **MXML改进**:MXML作为Flex的声明式语言,在Flex4中变得更加强大。它可以用来定义组件、事件处理函数甚至ActionScript类。MXML和ActionScript的结合使用,让代码组织更加清晰。 6. **ActionScript优化**:Flex4...

    flex文件中使用html渲染文字等.txt

    除了文本渲染外,给定内容还展示了如何在Flex中集成多媒体播放器并实现基本的播放控制。这主要通过`&lt;mx:VideoDisplay&gt;`组件来完成。 #### 1. 视频播放器配置 ```xml ``` 此代码段配置了一个视频播放器,指定了其ID...

    flex中actionscript动态调用remoteobject类

    下面将详细介绍如何在Flex中使用ActionScript来动态调用RemoteObject类,并给出一个简单的示例。 #### 一、基本概念 1. **RemoteObject**:Flex中的RemoteObject类是用于远程调用服务器端服务的对象。它可以调用...

    Flex分页技术

    在Flex中,我们可以使用DataGrid组件来实现这些功能,提高用户体验并优化性能。 1. **Flex DataGrid 分页技术**: Flex DataGrid 提供了分页功能,以处理大量数据。分页允许用户按页面浏览数据,而不是一次性加载...

    在Flex的DataGrid中使用CheckBox

    ### 在Flex的DataGrid中使用CheckBox #### 一、引言 在Flex应用程序开发中,DataGrid 是一种常用的UI组件,用于展示数据列表,并提供了一系列的功能,如排序、过滤等。有时,为了增加用户交互性或实现特定功能,...

    Flex4 Declarations in ActionScript

    《Flex4声明式编程在ActionScript中的应用探析》 Flex4是Adobe Flex框架的一个重要版本,它引入了全新的ActionScript编程模型,显著提升了开发效率和应用程序的表现力。本篇文章将深入探讨Flex4中的一项核心特性...

    flex实现 ComboBox中下拉checkbox

    本文将深入探讨如何在Flex中的ComboBox实现下拉列表中包含Checkbox的功能,并结合移动面板和可调整大小的面板实例,为你提供一个完整的解决方案。 首先,我们要理解Flex中的ComboBox组件。ComboBox继承自ListBase类...

    flex与JS交互示例

    3. **事件处理**:在Flex中,可以监听`ExternalInterface.addCallback`事件来确认JavaScript是否成功注册了某个方法。同时,JavaScript端也可以监听特定的DOM事件来触发与Flex的交互。 4. **安全限制**:由于安全...

    Flex之URLLoader加载XML

    通过以上解释,我们可以了解到如何在Flex应用中使用`URLLoader`加载XML文件,然后将数据解析并绑定到UI组件,从而实现动态数据展示。这在构建数据驱动的富互联网应用程序时非常常见,有助于提高用户体验和交互性。

    flex 4 生命周期

    Flex 4的生命周期改进也体现在事件处理和元数据的使用上,例如` IOErrorEvent`和`StatusEvent`等事件,以及`[Bindable]`、`[SkinPart]`等元数据,这些都增强了组件与外部数据的交互和皮肤的自定义。 尽管Adobe提供...

    Flex技术中AdvancedDataGrid使用方法

    ### Flex技术中AdvancedDataGrid使用方法 #### 一、多列排序 在默认情况下,`AdvancedDataGrid`组件会按照数据被添加至其`DataProvider`的顺序来展示数据。与`DataGrid`组件类似,`AdvancedDataGrid`也支持用户在...

    flex 异步加载tree

    在Flex中,可以使用MXML(一种基于XML的标记语言)和ActionScript来创建丰富的客户端应用。 #### 2. AsyncTree组件 AsyncTree是Flex中的一个自定义组件,它允许开发者构建能够异步加载数据的树形结构。这通常用于...

    Flex与Java通过实体传递数据

    在Flex中,为了能够将前端的数据对象与后端的服务进行有效映射,通常会在Flex端定义一个实体类,并使用`Bindable`和`RemoteClass`注解来关联前后端的数据模型。 ```as [Bindable] [RemoteClass(alias=...

    Flex 2 中的元数据标签

    在这个例子中,`phoneNumber`属性被标记为`[Bindable]`,这意味着每当其值发生变化时,Flex框架会自动发送一个`Change`事件。此外,我们还可以定义一个监听该事件的方法,如`onPhoneNumberChanged`,以便于处理数据...

    Flex4.5常见问题总结

    在Flex中,可视化组件具备以下关键特性: 1. **尺寸**:控制组件的大小和位置,支持绝对值和百分比设定。 2. **事件**:用于响应用户操作,如点击、拖动等。 3. **样式**:调整组件的外观,包括颜色、字体等。 4. *...

Global site tag (gtag.js) - Google Analytics