`

flex [Bindable]

    博客分类:
  • flex
阅读更多

 

    虽然多数Flex 开发者都使用过[Bindable]标签,但是很多人都不知道这个标签的作用甚至不知道该标签为何物。[Bindable]就是所谓的元数据标签。元数据标签是一种特殊的标签,它在代码中的作用就是向编译器提供如何编译程序的信息。实际上,这些标签并没有被编译到生成的SWF文件中,而只是告诉编译器如何生成SWF文件。文档中列出的元数据标签共有12个,本文将讲解这些元数据标签的定义并给出使用它们的示例,在看完这篇文章之后,你就会明白应该在何时何处在你的Flex   2应用程序中使用元数据标签了。

[ArrayElementType]

实际上,定义一个数组通常来说是一件很平常的事情,因为数组中的元素可以是任何类型的。不过,使用ArrayElementType元数据标签可以让你定义数组元素的数据类型。下面的例子展示了如何使用[ArrayElementType]:

程序代码
   [ArrayElementType("String")]
    public var arrayOfStrings:Array;

    [ArrayElementType("Number")]
    public var arrayOfNumbers:Array;

    [ArrayElementType("mx.core.UIComponent")]
    public var arrayOfUIComponents:Array;

[Bindable ]

Bindable元数据标签是最经常用到的一个元数据标签,因为它使程序组件之间的数据同步变得很容易。Bindable可以用来绑定简单数据类型、类、复杂数据类型以及函数。绑定数据的时候,你必须先使用元数据标签定义一下数据

Bindable也可以用来绑定到事件。Listing 2展示了如何使用getter和setter函数将一个属性绑定到一个事件上。这个例子中有一个叫做phoneNumber的私有变量,还有一个公有的 setter和getter函数。使用Bindable标签将这个getter方法绑定到了一个叫做phoneNumberChanged的事件上,只要数据发生改变setter方法就会分派phoneNumberChanged事件。通过使用setter方法,可以在数据赋予私有变量之前对其进行操作。在这个例子中,数据只有在长度大于等于10的时候才会被格式化。当phoneNumberChanged事件被分派的时候,第二个TextInput组件会被更新,因为他的text属性绑定到了phoneNumber变量上。

当一个属性来自一个数据表达式,当源属性改变时,Flex 自动复制源属性的值到任何目标属性。为了标示着一复制,你必须使用[Bindable]元数据标签在flex 中注册这一属性,并且源属性必须发送一个事件。

[Bindable]元数据标签采用以下格式

[Bindable]
[Bindable(event="eventname")]

如果你省略了事件名,flex 自动创建一个事件名propertyChange

你可以在三个地方使用[Bindable]元数据标签
1、在public class定义前
[Bindable]元数据标签绑定所有的作为变量定义的public属性,并且所有的public属性都定义有getter和setter方法。在这种情况下,[Bindable]没有参数,例如:
[Bindable]
public class TextAreaFontControl extends TextArea {}
flex 编译器自动创建一个事件名叫propertyChange用于所有的公有属性,这些属性可以作为绑定表达式的源。这种定义等同于
[Bindable(event="propertyChange")]

如果属性值的改变与原来相同,flex 并不传递这个事件或更新属性。

2、在public, protected 或 private 属性前,格式为:
[Bindable]
public var foo;


3、Before a public, protected, or private property defined by a getter or setter method.
你必须同时定义getter和setter方法,以便于使用[Bindable]元数据标签。
[Bindable]
public function set shortNames(val:Boolean):void {
    ...               
}

public function get shortNames():Boolean {
    ...



你可以使用自定义的事件名,如:
[Bindable(event="changeShortNames")]
public function set shortNames(val:Boolean):void {
    ...
    // Create and dispatch event.
    dispatchEvent(new Event("changeShortNames"));
}

// Get method.
public function get shortNames():Boolean {
    ...
}   

// Define public vars for tracking font size.
    [Bindable]
    public var maxFontSize:Number = 15;
    [Bindable]
    public var minFontSize:Number = 5;

// Define private variable.
    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);

    }

分享到:
评论

相关推荐

    Flex Bindable 的用法

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

    flex 4 生命周期

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

    细细品味Flex——新Flex学习手册.pdf

    - **动态的数据展现源于灵活的数据绑定**:介绍了数据绑定的基本概念,包括绑定表达式、[Bindable]符号、`&lt;mx:Binding&gt;`标签、BindingUtils和自定义数据绑定。 - **使用样式(style)和皮肤(Skin)两大画笔为应用程序...

    Flex4 AIP 中文说明

    此外,还增加了 Bindable、Observer 和 Bindable Event 等元数据,让数据绑定更加灵活和强大。 5. **MXML改进**:MXML作为Flex的声明式语言,在Flex4中变得更加强大。它可以用来定义组件、事件处理函数甚至...

    flex 学习资料汇总

    [Bindable] private var count:int = 0; protected function button_clickHandler(event:MouseEvent):void { count++; label.text = count.toString(); } ]]&gt; (event)" /&gt; ``` - **函数声明**:在...

    Flex与Java通过实体传递数据

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

    flex与JS交互示例

    [Bindable] public function callFromJS():void { // 方法体 } ``` 在HTML中,可以这样调用: ```javascript var app = document.getElementById('myFlexApp'); app.callFromJS(); ``` 3. **事件处理**:...

    flex数据绑定的原理

    当我们使用`[Bindable]`元数据标签标记一个类的成员变量时,Flex编译器会自动为这个变量生成相关的访问器(getter和setter)。例如,在提供的代码段中,`list`变量被标记为`[Bindable]`: ```actionscript public ...

    Flex图片上传实例

    ### Flex图片上传实例详解 在本篇文章中,我们将深入探讨一个具体的Flex图片上传实例,并对其中涉及的关键技术点进行详细解读。此实例不仅提供了一个实际的上传图片的应用场景,而且还包含了一些实用的代码片段,这...

    Flex与.NET交互

    [Bindable] public class User { public var id:int; public var name:String; // ... } ``` ```csharp public class User { public int Id { get; set; } public string Name { get; set; } // ... } ``` ...

    Flex分页技术

    `[Bindable]`元标签用于标记变量,使其在改变时能触发视图的自动更新。例如,`_xmllistCollection`被标记为可绑定,当数据源发生变化时,DataGrid会自动更新显示。 综上所述,Flex开发Flex dataGrid分页技术涵盖了...

    基于Flex的ArcGIS开发经典例子说明文档

    ### 基于Flex的ArcGIS开发经典案例详解 #### 案例一:ArcGIS.Server.9.3与ArcGIS API for Flex实现基本的地图浏览 **目的:** 本案例旨在展示如何通过ArcGIS API for Flex在Flex应用程序中实现对自定义的ArcGIS....

    Flex4.5常见问题总结

    若希望某个对象作为数据绑定的源,需在其属性前加上`[Bindable]`或`[Bindable("eventname")]`标记,确保属性变化时能触发数据绑定事件。 综上所述,Flex4.5提供了丰富的工具和机制,帮助开发者构建高性能、高互动性...

    Flex Data Binding详解

    如果没有指定触发绑定的特定事件(如`[Bindable]`),Flex会默认监听`propertyChange`事件。只有当属性值的引用改变(即`!=`而不是`===`),Flex才会触发数据绑定。如果指定了自定义事件(如`[Bindable(event="event...

    自己整理的flex与java结合的学生管理系统-很好的入门及提升的例子

    5. 数据管理:在Flex客户端,数据通常被封装在Flex的Model类中,这些Model类通过Bindable注解与视图组件关联,当数据发生变化时,视图会自动更新。而在服务器端,数据管理通常涉及实体类(Entity)和DAO,实体类对应...

    FLEX动态树 动态图表

    ### FLEX动态树与动态图表:深入理解及应用 在Adobe Flex框架中,`Tree`控件被广泛用于展示层次结构的数据,如目录、组织结构等。本文将深入解析如何在Flex中创建并自定义动态树,以及如何通过事件处理实现更高级的...

    flex的mvc模式

    模型对象通常被标记为`Bindable`,这样当它们的数据发生变化时,可以自动通知视图进行更新。 **View(视图)** 视图层负责展示数据和接收用户输入。在Flex中,视图通常由MX或Spark组件构成,如Canvas、Button、...

    Flex4 Declarations in ActionScript

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

    flex 异步加载tree

    `[Bindable]` 注解表示`loadingxml`变量的变化将会自动更新UI。这意味着当数据变化时,树组件将自动刷新其视图。 #### 3. FunService类的作用 `FunService` 类似乎是自定义的服务类,负责与后端交互获取数据。在这...

Global site tag (gtag.js) - Google Analytics