学习Flex元数据标签

Flex 元数据标签

1、[ArrayElementType]
使用ArrayElementType元数据标签可以让你定义数组元素的数据类型。

程序代码：

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

2、[Bindable]
Bindable可以用来绑定简单数据类型、类、复杂数据类型以及函数。绑定数据的时候，你必须先使 用元数据标签定义一下数据。

A simple use of [Bindable] <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " backgroundColor="#FFFFFF"> <mx:Script> <!--[CDATA[ [Bindable] private var me:String="Rich Tretola"; ]]> </mx:Script> <mx:Panel title="Simple Binding" width="500" height="90" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal"> <mx:Label text="{me}"/> </mx:Panel> </mx:Application> Bindable也可以用来绑定到事件 Using [Bindable] with getters and setters <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml "> <mx:Script> <![CDATA[ private var _phoneNumber:String = " "; // Bind getter function to phoneNumberChanged event [Bindable(event="phoneNumberChanged")] public function get phoneNumber():String { return _phoneNumber; } // Setter method. public function set phoneNumber(value:String):void { if (value.length<10) { _phoneNumber = value; } else { _phoneNumber = phoneFormatter.format(value); } // Create and dispatch event var eventObj:Event = new Event("phoneNumberChanged"); dispatchEvent(eventObj); } ]]--> </mx:Script> <mx:PhoneFormatter id="phoneFormatter" formatString="(###) ###-####" validPatternChars="#-() " /> <mx:Panel title="Bind with Getters and Setters" width="500" height="90" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal"> <mx:TextInput id="ti1" change="phoneNumber=ti1.text" maxChars="10" restrict="0-9"/> <mx:TextInput id="ti2" text="{phoneNumber}"/> </mx:Panel> </mx:Application>

3、[DefaultProperty]
DefaultProperty元数据标签用来将一个单一属性设定为某个类的默认属 性。它允许在一个容器标签内设定属性，而不用定义属性的名字。

package comps { import mx.controls.Button; [DefaultProperty("label")] public class MyButton extends Button { } } Using the MyButton class wih [DefaultProperty] <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " xmlns:comps="comps.*"> <comps:MyButton> <mx:String>Test</mx:String> </comps:MyButton> </mx:Application>

4、[Embed]
Embed元数据标签用来导入图片到程序。可以通过两种方式使用Embed。你可以将图片嵌入到 ActionScript中并将其指派给一个变量，或者你也可以将图片直接指派给组件的属性。

方式一： [Embed(source="myIcon.gif")] [Bindable] public var myIcon:Class; <mx:Button label="Icon Button 1" icon="{myIcon}"/> <mx:Button label="Icon Button 2" icon="{myIcon}"/> 方式二： <mx:Button label="Icon Button 1" icon="@Embed(source=myIcon.gif')"/> <mx:Button label="Icon Button 2" icon="@Embed(source=myIcon.gif')"/>

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

 

5、[Event]
Event元数据标签用来声明那些被自定义类分派的事件。将这个元数据标签添加到类定义中之后，你就可以在MXML 标签中添加事件处理函数来初始化该自定义类。

Custom ButtonLabel class using [Event]

package comps { import mx.controls.Button; import flash.events.Event; // Define the custom event [Event(name="labelChanged", type="flash.events.Event")] public class ButtonLabel extends Button { // property to hold label value private var _myLabel:String; // public setter method public function set myLabel(s:String):void { _myLabel = s; this.label = s; // Create and dispatch custom event var eventObj:Event = new Event("labelChanged"); dispatchEvent(eventObj); } } } Using the ButtonLabel class with the labelChanged [Event] <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " xmlns:comps="comps.*" backgroundColor="#FFFFFF"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; import flash.events.Event; // method to handle custom event public function labelChanged(eventObj:Event):void { myTA.text= myTA.text + "/n"+ eventObj.target.label; myTA.verticalScrollPosition = myTA.verticalScrollPosition +20; } ]]--> </mx:Script> <mx:Panel title="Event Sample" width="500" height="275" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="absolute"> <mx:TextInput id="buttonLabelTI" change="myButton.myLabel=buttonLabelTI.text" x="10" y="9"/> <!--Instantiate custom class and define method to handle label- Changed event--> <comps:ButtonLabel id="myButton" labelChanged="labelChanged(event);" x="10" y="39"/> <mx:TextArea id="myTA" width="200" height="200" x="249" y="10"/> </mx:Panel> </mx:Application>

6、[Effect]
Effect元数据标签用来定义一个自定义效果，当某个事件发生的时候该效果会被分派。

Add the Effect metadata tag

  ... // Define the custom event [Event(name="labelChanged", type="flash.events.Event")] [Effect(name="labelChangedEffect", event="labelChanged")] public class ButtonLabel extends Button { ... Add labelChangedEffect to the Component Instantiation MXML Tag <comps:ButtonLabel id="myButton" labelChanged="labelChanged(event);" labelChangedEffect="myEffect" x="10" y="39"/>  

7、[IconFile]
IconFile是用来定义一个jpg,gif或者png文件的文件名的，它在你的自定义类中作为图标来使 用。[Embed]元数据标签可以用来嵌入图片、SWF文件、音乐文件以及视频文件等，而IconFile则只是用来嵌入用来作为自定义类图标的文件。下 面是一个IconFile的例子：
[IconFile("icon.png")] public class CustomButton extends Button { }

 

8、[Inspectable]
Inspectable元数据标签可以用来定义那些能在代码提示和属性检测器（property inspector）中显示的属性。

<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml "> <mx:Script> <!--[CDATA[ [Inspectable(defaultValue="Visa", enumeration="Visa,Mastercard,Discover,American Express", category="Credit Card", type="String")] public var ccType:String; ]]--> </mx:Script> </mx:HBox> <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " xmlns:comps="comps.*" > <comps:MyComponent ccType=""/> </mx:Application>

 

9、[InstanceType]
当在一个模板对象中声明一个像IDeferredInstance这样的变量 时，InstanceType元数据标签就用来声明对象的类型。
用法：
[InstanceType("package.className")]

 

10、[NonCommittingChangeEvent]
NonCommittingChangeEvent元数据标签在 某个特定事件发生的时候可以防止变量在事件发生的过程中被更改。

Using [NonCommittingChangeEvent]

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " backgroundColor="#FFFFFF"> <mx:Script> <!--[CDATA[ import flash.events.Event; private var eventObj:Event; [Bindable(event="triggerBinding")] [NonCommittingChangeEvent("change")] private var s:String; private function triggerBinding():void { eventObj = new Event("triggerBinding"); dispatchEvent(eventObj); } ]]--> </mx:Script> <mx:Panel title="NonCommittingChangeEvent Sample" width="500" height="90" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal"> <mx:TextInput id="ti1" change="s=ti1.text" enter="triggerBinding()"/> <mx:TextInput id="ti2" text="{s}" /> </mx:Panel> </mx:Application>

 

11、[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; } }

 

12、[Style]
Style元数据标签用来为组件定义自定义样式属性的。只需要简单地将Sytle元数据标签添加到类的定 义当然，然后就可以使用getSytle方法获取它的值了。

Custom Class CustomCircle using [Style] tags

package comps { import mx.core.UIComponent; [Style(name="borderColor",type="uint",format="Color",inherit="no")] [Style(name="fillColor",type="uint",format="Color",inherit="no")] public class CustomCircle extends UIComponent { public function CustomCircle() { super(); } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); graphics.lineStyle(1, getStyle("borderColor"), 1.0); graphics.beginFill(getStyle("fillColor"),1.0); graphics.drawEllipse(0,0,100,100); } } } Using CustomCircle and assigning custom style properties <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " xmlns:comps="comps.*" backgroundColor="#FFFFFF"> <mx:Panel title="Style Sample" width="200" height="200" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal"> <comps:CustomCircle borderColor="#000000" fillColor="#FF0000" /> </mx:Panel> </mx:Application>