`
Virgo_S
  • 浏览: 1151777 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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]

什么是元数据(metadata):[Bindable]大概又是Flex用得最多的元数据了。我就按自己的理解随便解释一下:首先要明白元数据不是语法的一部分,而是专门给编译器用的,说白了是告诉编译器做某些事情,学过java之类的应该知道。那Bindable来讲,它的作用是告诉 flex编译器,给某些某些东西建立绑定关系,flex编译器会在编译过程中给AS(flex编译器就是把mxml编译成as,再编译到swf,也可能直接编译倒swf,我这里假设有as这么个环节)加一点事件发生和处理之类的代码,由此绑定的关系便建立了,如果我们用纯粹as3代码来写也是可以实现的,就是太太太麻烦。
什么是绑定:
举个例子:给下面的public变量加上[Bindable]
[Bindable]
public var name:String = "";

作为一个public变量,肯定既可以被赋值,也能赋值给别的变量。绑定的作用就是,当name改变的时候(被赋值了),可能通知其它被name影响(赋值给它们)的变量发生改变。这里的“可能”就需要编译器来判断,这就是为什么元数据是给编译器用的原因了。在mxml里用{}的语法的地方就是绑定的对象,比如label={xxx.name},当name变化,label也跟着变化。这样,我们只是很简单的改变了name的值,由于有绑定,界面上的 label也跟着自动变化了,爽吧。
能用在哪里

三个地方:类, 变量, getter/setter。是不是public没有关系,private的就只能给自家用呗。用在Class上就是简单的给所有的public属性(包括变量,getter/setter,普通方法)加上 [Bindable],可是一般的方法不能用[Bindable]呀,于是一般就能看到flex给了个warning,直接无视:)。变量嘛就是上面讲的,很简单略掉。
用在只读,只写属性(getter/setter)上面
终于讲到关键地方了,因为getter和setter很像方法,用起来会有点不同。看看这个例子:
[Bindable]
private var content:Array = new Array();
[Bindable]
public function set _content(ct:String):void
{
        content = ct.split(SEP);
}
[Bindable]              
public function get _wholeText():String
{
        if(content.length == 0)
        {
               return "";
        }
        else
        {
               var _w:String = "";
               for(var i:int=0 ; i<content.length ; i++)
               {
                      _w += content[i] + "\r\n";
               }
               return _w;
        }
}

原来的设想是content绑定_wholeText,可它是不工作的。为什么?_wholeText太复杂了,被编译器排除在“可能”之外,编译器认为没有绑定关系,如果只是简单的return content,倒是可以的。我这里搜到了一些比较权威的解释。来自http://www.rubenswieringa.com/blog/binding-read-only-accessors-in-flex找到Ely Greenfield讲的。

     Now keep in mind that there’s no way for the compiler to actually tell if the value of a property get function would be different if called, short of doing an extensive code flow analysis of the get function, identifying all the inputs that might be affecting the value of the get function (i.e., member fields, statics, globals that are used in the get function and in any methods, global functions, closures, etc) it might call, and setting up watchers on every one of those to trigger the binding when any of them change. That’s prohibitively difficult, and expensive to do. So the compiler doesn’t try.

     Instead when you put [Bindable] on a get/set property, the compiler makes it bindable with a little creative rewriting that allows the framework to watch the get function, and dispatch a change event when the get function is triggered. This means that automatic bindable properties don’t work when the get function is computed from multiple values, or when you change its value by setting a backing field, rather than using the set function.

     It _also_ means that if you have no set function, we can pretty much guarantee that there’s no way automatically bindable get properties will be triggered. a read only propeerty is, to the compiler, completely opaque…at the moment, it has no idea where that value is coming from, and hence will never be able to ‘automatically’ trigger the binding.

说白了就是为了降低复杂度和提高效率,复杂情况的getter会被忽略。如何解决?可以手动建立绑定,即[Bindable("eventName")]。把代码改成这样:
[Bindable]
private var content:Array = new Array();
[Bindable]
public function set _content(ct:String):void
{
        content = ct.split(SEP);
        this.dispatchEvent(new Event("_contectChanged"));
}
[Bindable("_contectChanged")]              
public function get _wholeText():String
{
        if(content.length == 0)
        {
               return "";
        }
        else
        {
               var _w:String = "";
               for(var i:int=0 ; i<content.length ; i++)
               {
                      _w += content[i] + "\r\n";
               }
               return _w;
        }
}


这样就避免了编译器去自动识别。自己加上绑定关系,当_content被赋值,发出_contentChanged事件,通知所有被绑定的getter方法执行一遍。这也说明了,绑定不过是事件游戏而已,flex为用户隐藏了很多底层算法。

[DefaultProperty]

DefaultProperty元数据标签用来将一个单一属性设定为某个类的默认属性。它允许在一个容器标签内设定属性,而不用定义属性的名字。一个简单的例子就是一个自定义Button类。Listing 3展示了一个简单的Button类,它将label属性设定为了DefaultProperty。
46

Listing 4展示了label属性是如何在自定义Button标签中作为一个字符串定义的。

[Embed]

Embed元数据标签用来导入图片到程序。可以通过两种方式使用Embed。你可以将图片嵌入到ActionScript中并将其指派给一个变量(如同下面代码中的第一个例子),或者你也可以将图片直接指派给组件的属性(使用下面代码中的第二个例子所示的语法规则)。

例1:

程序代码
[Embed(source="myIcon.gif")]
[Bindable]
public var myIcon:Class;





例2:

程序代码





上面这两个例子产生的结果是一样的。创建myIcon类的好处是,它在一个类中只定义一次并可以绑定到程序中的多个组件。

[Event]

Event元数据标签用来声明那些被自定义类分派的事件。将这个元数据标签添加到类定义中之后,你就可以在MXML标签中添加事件处理函数来初始化该自定义类。Listing 5创建了一个自定义Button类,每当它的label属性改变的时候就会分派一个事件。Listing 6所显示的主程序文件初始化了这个自定义Button并创建了事件处理函数,该函数将新的labe属性值赋给了一个TextArea组件以显示当前发生的更改。

图4显示了Listing 5 和 Listing 6中的代码运行结果。

图4:


[Effect]

Effect元数据标签用来定义一个自定义效果,当某个事件发生的时候该效果会被分派。这个示例可以基于前面Event的例子来创建,通过简单地更改ButtonLabel类(Listing 7)中的一行代码,就定义了一个效果,该效果可以在MXML标签中直接使用(Listing

[IconFile]

IconFile是用来定义一个jpg,gif或者png文件的文件名的,它在你的自定义类中作为图标来使用。[Embed]元数据标签可以用来嵌入图片、SWF文件、音乐文件以及视频文件等,而IconFile则只是用来嵌入用来作为自定义类图标的文件。下面是一个IconFile的例子:


程序代码
[IconFile("icon.png")]
public class CustomButton extends Button
{

}


[Inspectable]

在使用Flex Builder 2的时候,你可能会希望某些自定义组件的属性在代码提示和属性检查器(property inspector)中显示,Inspectable元数据标签就是用来定义那些属性的。Listing 9展示的例子定义了一个inspectable的ccType变量,它定义了Visa为默认值、Credit Card为类别并将取值范围定义为包含了Visa, Mastercard, Discover, 和 American Express的枚举。

图5展示了当将组件添加到程序中的时候所显示的代码提示。

图5:


图6与上面展示的是同样的代码,但是这次是设计视图,所以我们能看到属性检查器。你可以看到属性ccType的类别为Credit Card,它的所有可选的值都在下拉列表中。

图6:


[InstanceType]

当在一个模板对象中声明一个像IDeferredInstance这样的变量时,InstanceType元数据标签就用来声明对象的类型。下面是InstanceType的用法:


程序代码
[InstanceType("package.className")]


[NonCommittingChangeEvent]

NonCommittingChangeEvent元数据标签在某个特定事件发生的时候可以防止变量在事件发生的过程中被更改。Listing 10展示了它是如何工作的。一个名为s的字符串类型的私有变量被绑定到了名为ti2的TextInput组件上。另外一个id为ti1的TextInput组件在它的text发生更改的时候就会将s的值设置为它的text属性的值。另外,当triggerBinding 事件被分派的时候,附加在s变量上的Binding元数据标签就会进行绑定。只有在Enter键在ti1 TextInput组件中被按下时才会分派triggerBinding事件。

[RemoteClass]

RemoteClass可以用来将一个ActionScript类绑定到一个Java类或一个ColdFusion CFC。这样做可以自动转换数据类型。下面的例子将包com.mydomain中的名为MyClass的ActionScript类绑定到了同一个包中名为MyClass的Java类:
程序代码
package com.mydomain {
   [Bindable]
   [RemoteClass(alias="com.mydomain.MyClass")]
   public class MyClass {
     public var id:int;

     public var myText:String;

   }
}


[Style]

Style元数据标签用来为组件定义自定义样式属性的。只需要简单地将Sytle元数据标签添加到类的定义当然,然后就可以使用getSytle方法获取它的值了。Listing 11 和 12中的例子定义了两个样式,分别为borderColor 和fillColor,它们的数据类型都是uint。当类初始化的时候这两个样式就会在标签中被设定。代码中覆写了updateDisplayList函数,用自定义的样式画了一个圆形边框并将其填充。

图7展示了Listing 11 和 Listing 12中代码运行的结果。

图7:


现在你应该会有这样的感觉了:“喔,现在我知道在哪里可以使用它们了”或者“嗯,我想我会在新的项目中尝试使用这些元数据标签”。如果你没有,那么你可能需要回过头去再看一遍这篇文章。OK,我想说的是Adobe Flex小组提供给我们的元数据标签不只是非常的强大,可以让我们扩展或自定义我们要做的东西,而且它还非常易于使用。通过使用它们,仅仅几行代码就可以完成一大堆事情。如果不使用这些标签,你会发现在Flex 2中实现一些东西是很辛苦的。
此信息来自〖闪无忧〗
查看原网址:http://www.5uflash.com/Html/flex/091053329_3.html
分享到:
评论

相关推荐

    Flex Bindable 的用法

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

    Flex技术中AdvancedDataGrid使用方法

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

    总结flex各种用法

    根据提供的文件信息,我们可以总结出Flex中的多个实用技巧与应用场景。以下是对这些知识点的详细解析: ### 1. 获取屏幕分辨率 在Flex中获取屏幕分辨率是通过`Capabilities`类完成的,具体做法如下: ```...

    flex tree 修改icon方法

    标题"flex tree 修改icon方法"正好指出了这一需求。在这个场景下,我们需要通过编程方式来实现对Tree节点图标的个性化设置。 首先,我们要理解Flex Tree的基本结构。Tree组件由一系列的TreeItemRenderer组成,每个...

    flex中actionscript动态调用remoteobject类

    4. **Bindable**:在MXML中,使用`[Bindable]`注解声明的变量可以自动触发数据绑定事件。当该变量的值发生变化时,绑定到它的UI组件会自动更新。 #### 二、代码分析 首先,我们来看一下提供的代码示例: ```...

    flex与JS交互示例

    - **JavaScript调用Flex**: 首先,Flex组件需要声明可被JavaScript调用的方法,然后在JavaScript中通过组件ID调用这些方法。例如,在Flex中声明一个可调用方法: ```actionscript [Bindable] public function ...

    flex 4 生命周期

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

    Flex与Java通过实体传递数据

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

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

    在本篇内容中,我们将深入探讨如何在Flex文件中利用HTML来渲染文本,并结合实例代码进行解析。通过本文,读者可以全面了解Flex框架下HTML文本渲染的方法与应用场景,以及如何结合Flex组件完成多媒体控制功能。 ### ...

    Flex图片上传实例

    这表明读者可以通过阅读文章和查看提供的源码来学习和理解Flex中实现图片上传的方法。 #### 核心知识点分析 ##### 1. Flex基础知识 - **Flex框架简介**:Flex是一种基于Adobe Flash Platform的开源框架,主要用于...

    Flex 2 中的元数据标签

    在Flex 2中,元数据标签是用于提供类、方法或属性的额外信息的一种特殊标记。这些标签通常位于类定义或成员声明之前,并被ActionScript编译器用来控制类的行为或者为开发工具提供有关代码的信息。本文将详细介绍Flex...

    Flex4.5常见问题总结

    3. 在as中使用`BindingUtils`方法动态绑定属性。 绑定符`{}`不仅支持属性引用,还支持方法调用,如`{obj.text.toUpperCase()}`。数据绑定在源对象初始化或属性改变时触发,确保数据的一致性和实时更新。 #### 九、...

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

    ### 基于Flex的ArcGIS开发经典案例详解 #### 案例一:ArcGIS.Server.9.3与...这些案例不仅涵盖了基本的地图浏览功能,还涉及到了更复杂的交互式操作,有助于开发者全面了解和掌握ArcGIS API for Flex的使用方法。

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

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

    flex学习心得

    除了使用选择器设置外观之外,Flex还允许直接通过调用`setStyle`方法来修改组件的样式属性。 #### 十、Flex 4中的类选择器 在Flex 4中,类选择器需要使用特定的命名空间,例如: ```css @namespace s "library://ns...

    FLEX数据绑定专题

    在Flex客户端,可以使用HTTPService或WebService组件来调用这些远程方法,例如: ```mxml (event)" /&gt; ``` 当Java服务返回数据时,Flex客户端可以通过数据绑定将这些结果展示在UI组件上。例如,如果HTTPService...

    Myeclipse10搭建Flex4.6+spring3.0+mybatis3.2架构

    在本文中,我们将探讨如何使用Myeclipse10搭建Flex4.6、Spring3.0和Mybatis3.2的架构。这个架构是企业级开发中常见的技术组合,它允许开发者构建高性能、可扩展且易于维护的富互联网应用程序(RIA)。 1. **Flex4.6...

    在Flex的DataGrid中使用CheckBox

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

Global site tag (gtag.js) - Google Analytics