`

(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 的用法

    例如,`[Bindable]`元数据告诉Flex编译器,某个变量、属性或getter/setter方法需要支持数据绑定。这意味着当这些元素的值发生变化时,编译器会自动生成相应的事件处理代码,确保与之绑定的其他组件能实时反映这些...

    总结flex各种用法

    绑定图片时可以使用`Bindable`和`Embed`注解,示例如下: ```actionscript [Bindable] [Embed(source="img/1.jpg")] public var phone1:Class; ``` ### 8. 日期中文标题 在Flex中,可以通过设置`mx:DateChooser`...

    flex 4 生命周期

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

    flex与JS交互示例

    - **Flex调用JavaScript**: 使用`ExternalInterface.call()`方法,将ActionScript函数的返回值传递给JavaScript。例如: ```actionscript var result:Object = ExternalInterface.call("JavaScriptFunction", ...

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

    - **工欲其善,先利其器(Flex Builder)**:介绍了如何使用Adobe Flex Builder进行Flex项目的开发,包括下载、安装、启动开发环境、创建“Hello World”项目及MXML编程模型。 - **建立扎实的ActionScript 3.0语法...

    flex tree 修改icon方法

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

    Flex与Java通过实体传递数据

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

    Flex图片上传实例

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

    Flex技术中AdvancedDataGrid使用方法

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

    FLEX和使用RemoteObject和后台通信

    `RemoteObject` 可以方便地将Flex应用程序中的ActionScript方法映射到服务器上的业务逻辑方法,从而实现数据的传递和交换。以下将详细讲解如何使用`RemoteObject`以及它的工作原理。 1. **配置Flex项目** 在Flex...

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

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

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

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

    Flex4.5常见问题总结

    除了选择器设置组件外观,Flex还允许直接调用`setStyle`方法进行实时样式调整。效果(effect)用于实现组件的视觉变换,如淡入淡出、位移等,增强用户界面的动态感。 #### 八、数据绑定 数据绑定是Flex的核心特性之...

    flex学习心得

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

    flex remoteObject封装后和java通信

    例如,假设我们有一个名为`MyJavaClass`的Java类,其中包含一个名为`myServerMethod`的方法,我们需要在Flex客户端使用相同的名称来调用。 ```java public class MyJavaClass { public String myServerMethod...

    Flex和java交互的示例代码

    - 在部署时,还需要配置Flex客户端与Java服务器的通信设置,例如使用Cairngorm框架或 BlazeDS等工具。 综上所述,通过合理的架构设计和编码实践,Flex与Java可以高效地进行数据交互,从而构建出功能强大的Web应用...

    FLex文档教程

    使用`[Bindable]`元数据标签声明可绑定的属性,这样当数据源发生变化时,UI会自动更新,无需手动刷新。 **五、Flex组件模型与协作** Flex的组件模型允许开发者和设计师进行分离式协作。组件设计可以独立于业务逻辑...

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

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

    flex4-binding-custom-Class.rar_flex_flex4

    在Flex 4中,数据绑定是一项强大的特性,它允许开发者创建动态、响应式的用户界面,无需编写大量的事件处理代码。本教程将深入讲解如何在Flex 4中对自定义类进行数据绑定,通过一个实际的MXML文件和AS文件示例来阐述...

    flex combobox 输入过滤实例

    Flex Combobox是一款在Adobe Flex框架下使用的组件,它结合了下拉列表和文本输入框的功能,用户可以在输入框中输入文字,同时从下拉列表中选择一个匹配项。在本实例中,我们将深入探讨如何利用Flex 4实现Combobox的...

Global site tag (gtag.js) - Google Analytics