Flex中的Bindable等元数据标签的用法

虽然多数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; 

[Event] 

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

[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的枚举。 
[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中实现一些东西是很辛苦的。