`

(Flex)Bindable的用法(转)

    博客分类:
  • Flex
阅读更多

    初学flex,看见有些代码上对一些变量定义为Bindable,不太明白,所以Google一下查了点相关资料。

    虽然多数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可以用来绑定简单数据类型、类、复杂数据类型以及函数。绑定数据的时候,你必须先使用元数据标签定义一下数据,正如Listing 1中所示的那样。图1是Listing 1的代码运行结果。 
图1: 

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

图2和图3显示了Listing 2代码的运行结果。 

图2: 


图3: 
[DefaultProperty] 
    DefaultProperty元数据标签用来将一个单一属性设定为某个类的默认属性。它允许在一个容器标签内设定属性,而不用定义属性的名字。一个简单的例子就是一个自定义Button类。Listing 3展示了一个简单的Button类,它将label属性设定为了DefaultProperty。 
    Listing 4展示了label属性是如何在自定义Button标签中作为一个字符串定义的。 
[Embed] 
     Embed元数据标签用来导入图片到程序。可以通过两种方式使用Embed。你可以将图片嵌入到ActionScript中并将其指派给一个变量(如同下面代码中的第一个例子),或者你也可以将图片直接指派给组件的属性(使用下面代码中的第二个例子所示的语法规则)。 

例1: 

程序代码 
[Embed(source="myIcon.gif")] 
[Bindable] 
public var myIcon:Class; 
    上面这两个例子产生的结果是一样的。创建myIcon类的好处是,它在一个类中只定义一次并可以绑定到程序中的多个组件。 
[Event] 
    Event元数据标签用来声明那些被自定义类分派的事件。将这个元数据标签添加到类定义中之后,你就可以在MXML标签中添加事件处理函数来初始化该自定义类。Listing 5创建了一个自定义Button类,每当它的label属性改变的时候就会分派一个事件。Listing 6所显示的主程序文件初始化了这个自定义Button并创建了事件处理函数,该函数将新的labe属性值赋给了一个TextArea组件以显示当前发生的更改。 
[Effect] 
    Effect元数据标签用来定义一个自定义效果,当某个事件发生的时候该效果会被分派。这个示例可以基于前面Event的例子来创建,通过简单地更改ButtonLabel类(Listing 7)中的一行代码,就定义了一个效果,该效果可以在MXML标签中直接使用
。 

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

分享到:
评论
1 楼 yaodaqing 2011-09-16  
总共有多少像RemoteClass Bindable这样的对象,我在api里怎么没找到。
请问在哪里可以找到?

相关推荐

    Flex Bindable 的用法

    什么是元数据(metadata):[Bindable]大概又是Flex用得最多的元数据了。

    FLEX企业应用开发实战.part1

     2.4.5 使用Bindable元数据标记  2.4.6 绑定到函数、对象和数组  2.4.7 使用可绑定属性链进行工作  2.5 Flex中的组件化编程  2.5.1 认识Flex组件和组件容器  2.5.2 组件生命周期与布局  2.5.3 组件的...

    FLEX企业应用开发实战.part2

     2.4.5 使用Bindable元数据标记  2.4.6 绑定到函数、对象和数组  2.4.7 使用可绑定属性链进行工作  2.5 Flex中的组件化编程  2.5.1 认识Flex组件和组件容器  2.5.2 组件生命周期与布局  2.5.3 组件的...

    Flex企业应用开发实战源代码

    再接着详细讲解了BlazeDS框架的使用方法和工作原理,并通过迭代的方式完整地演示一个真实的Flex企业级应用的开发全过程,实战性极强;最后重点探讨Flex应用性能优化等方面的高级知识。值得一提的是,本书公开了作者...

    flex导出excel的代码

    [Bindable] private var dp:Array = [ {idx:1, names: "test1", sex: "b" }, {idx:2, names: "test2", sex: "g" } ]; public function doSelect(o:Object):void { Alert.show("行的数据分别是...

    双向数据绑定JS库Bindable.js.zip

    Bindable.js 实现了灵活、快速的双向数据绑定的 JavaScript 库。 Two-way data binding means linking properties of two separate objects - when one changes, the other will automatically update with that ...

    Flex调用xml通过DataGrid遍历简单示例

    [Bindable] private var slides:ArrayCollection private function resultHandler(event:ResultEvent):void { slides = event.result.album.slide; } private function faultHandler...

    bindable:使用Aurelia JS内置的设计系统,可以更快,更轻松地进行Web开发

    Bindable不仅提供CSS类列表,还提供了一种更加结构化的构建用户界面的方法。 我们发现这使我们无法一遍又一遍地重建轮子。 我们远未完成,但是Bindable现在处于其他人可能喜欢使用它的状态。 安装 npm install @...

    flex 绑定元数据

    算是flex初学者的的笔记吧,首先可以概览一下下文中的代码,然后我们主要是看看[Bindable]的这种用法。

    AngularJS基础 ng-non-bindable 指令详细介绍

    本文主要讲解AngularJS ng-non-bindable 指令,这里帮大家整理了ng-non-bindable指令的基本知识资料,有需要的小伙伴可以参考下

    flex实列demo

    *" creationComplete="initTree();... change="iFrame.source=tree.selectedNode.path" /> ... // TODO: determine whether we can ... // TODO: add some links here to Flex sites } ]]> </mx:Application>

    flexjava交互

    [Bindable] var result:String; function sendRequest(){ var name=name1.text; var password=password1.text; ro.validateLogin(name,password); ro.addEventListener(ResultEvent.RESULT,results); } function ...

    bindable-component:公开用于绑定处理程序的可扩展的react组件

    安装npm install --save bindable-component用法import { BindableComponent } from 'bindable-component' ;// Aternatively// import { BaseComponent } from 'bindable-component';class MyComponent extends ...

    bindable-object.js:数据绑定对象

    var BindableObject = require ( "bindable-object" ) ; var person = new BindableObject ( { name : "craig" , last : "condon" , location : { city : "San Francisco" } } ) ; person . bind ( "location....

    Bindables:Bindables将您的自动属性转换为Wpf依赖项或附加属性

    如何使用依赖属性通过将DependencyPropertyAttribute应用于单个属性或整个类,可以将常规属性转换为依赖属性。 当您将属性应用于类时,所有可用属性都将转换为依赖项属性。 不会转换的属性是: 非汽车属性。 (具有...

    open flash chart 2 swc包

    open flash chart 2 的swc文件包 可以在flex里面调用了. [Bindable] private var chart:String='{ "elements": [ { "type": "bar","alpha":0.8,"colour":"#663366", "values": [ 0 ] } ], "title": { "text": "...

    backbone.marionette.bindable-router:带有木偶可绑定参数的路由器

    木偶的可绑定路径参数此路由器允许您使用前导@char 绑定控制器方法以路由参数。 路由器示例: appRoutes: { 'users/@user/edit' : 'onUserEdit' , 'users/@user/copy' : 'onUserCopy' , '*default' : 'onDefault' } ...

    aurelia-typed-observable-plugin:Aurelia的可观察和可绑定装饰器的增强实现。

    提供使用流利的语法创建自定义@observable功能: @observable.custom / @observable.custom() 提供4个基本的自定义可观察对象: @observable.date , @observable.number , @observable.string , @observable....

Global site tag (gtag.js) - Google Analytics