学习Flex元数据标签

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

Java代码  

1. [ArrayElementType("String")]    
2.  public var arrayOfStrings:Array;   
3.  [ArrayElementType("Number")]    
4.  public var arrayOfNumbers:Array;   
5.  [ArrayElementType("mx.core.UIComponent")]    
6.  public var arrayOfUIComponents:Array;  

[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]

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
3.  backgroundColor="#FFFFFF">   
4.  <mx:Script>   
5.  <![CDATA[   
6.   [Bindable]   
7.   private var me:String="Rich Tretola";   
8.  ]]>   
9.  </mx:Script>   
10.  <mx:Panel title="Simple Binding" width="500" height="90"  
11.   paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">   
12.  <mx:Label text="{me}"/>   
13.  </mx:Panel>   
14. </mx:Application>  

<?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

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">   
3.     
4.  <mx:Script>   
5.  <![CDATA[   
6.   private var _phoneNumber:String = " ";   
7.   // Bind getter function to phoneNumberChanged event   
8.   [Bindable(event="phoneNumberChanged")]   
9.   public function get phoneNumber():String    
10.   {   
11.    return _phoneNumber;   
12.   }   
13.   // Setter method.   
14.   public function set phoneNumber(value:String):void    
15.   {   
16.    if (value.length<10)    
17.    {   
18.     _phoneNumber = value;   
19.    }   
20.     else    
21.    {   
22.     _phoneNumber = phoneFormatter.format(value);   
23.    }   
24.    // Create and dispatch event   
25.    var eventObj:Event = new Event("phoneNumberChanged");   
26.    dispatchEvent(eventObj);   
27.   }   
28.  ]]>   
29.  </mx:Script>   
30.     
31.  <mx:PhoneFormatter id="phoneFormatter"  
32.   formatString="(###) ###-####" validPatternChars="#-() " />   
33.  <mx:Panel title="Bind with Getters and Setters" width="500" height="90"  
34.   paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">   
35.   <mx:TextInput id="ti1" change="phoneNumber=ti1.text" maxChars="10" restrict="0-9"/>   
36.   <mx:TextInput id="ti2" text="{phoneNumber}"/>   
37.  </mx:Panel>   
38. </mx:Application>  

<?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元数据标签用来将一个单一属性设定为某个类的默认属性。它允许在一个容器标签内设定属性，而不用定义属性的名字。

Java代码  

1. package comps   
2. {   
3.  import mx.controls.Button;   
4.  [DefaultProperty("label")]   
5.  public class MyButton extends Button   
6.  {   
7.      
8.  }   
9. }  

package comps
{
 import mx.controls.Button;
 [DefaultProperty("label")]
 public class MyButton extends Button
 {
  
 }
}

Java代码  

1. Using the MyButton class wih [DefaultProperty]   
2. <?xml version="1.0" encoding="utf-8"?>   
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
4.  xmlns:comps="comps.*">   
5.  <comps:MyButton>   
6.   <mx:String>Test</mx:String>   
7.  </comps:MyButton>   
8.     
9. </mx:Application>  

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中并将其指派给一个变量，或者你也可以将图片直接指派给组件的属性。
方式一：

Java代码  

1. [Embed(source="myIcon.gif")]   
2. [Bindable]   
3. public var myIcon:Class;   
4. <mx:Button label="Icon Button 1" icon="{myIcon}"/>   
5. <mx:Button label="Icon Button 2" icon="{myIcon}"/>  

[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}"/>

方式二：

Java代码  

1. <mx:Button label="Icon Button 1" icon="@Embed(source=myIcon.gif')"/>   
2. <mx:Button label="Icon Button 2" icon="@Embed(source=myIcon.gif')"/>  

<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标签中添加事件处理函数来初始化该自定义类。

Java代码  

1. Custom ButtonLabel class using [Event]   
2. package comps   
3. {   
4.  import mx.controls.Button;   
5.  import flash.events.Event;   
6.  // Define the custom event   
7.  [Event(name="labelChanged", type="flash.events.Event")]   
8.  public class ButtonLabel extends Button   
9.  {   
10.   // property to hold label value   
11.   private var _myLabel:String;   
12.   // public setter method   
13.   public function set myLabel(s:String):void    
14.   {   
15.    _myLabel = s;   
16.    this.label = s;   
17.    // Create and dispatch custom event   
18.    var eventObj:Event = new Event("labelChanged");   
19.    dispatchEvent(eventObj);   
20.   }     
21.  }   
22. }  

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);
  }  
 }
}

Java代码  

1. Using the ButtonLabel class with the labelChanged [Event]   
2. <?xml version="1.0" encoding="utf-8"?>   
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
4.  xmlns:comps="comps.*" backgroundColor="#FFFFFF">   
5.      
6.  <mx:Script>   
7.  <![CDATA[   
8.   import mx.controls.Alert;   
9.   import flash.events.Event;   
10.   // method to handle custom event   
11.   public function labelChanged(eventObj:Event):void    
12.   {   
13.    myTA.text= myTA.text + "\n"+ eventObj.target.label;   
14.    myTA.verticalScrollPosition = myTA.verticalScrollPosition +20;   
15.   }   
16.  ]]>   
17.  </mx:Script>   
18.     
19.  <mx:Panel title="Event Sample" width="500" height="275"  
20.   paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="absolute">   
21.      
22.   <mx:TextInput id="buttonLabelTI"  
23.    change="myButton.myLabel=buttonLabelTI.text" x="10" y="9"/>   
24.   <!--Instantiate custom class and define method to handle label- Changed event-->   
25.     
26.   <comps:ButtonLabel id="myButton" labelChanged="labelChanged(event);" x="10" y="39"/>   
27.   <mx:TextArea id="myTA" width="200" height="200" x="249" y="10"/>   
28.     
29.  </mx:Panel>   
30. </mx:Application>  

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元数据标签用来定义一个自定义效果，当某个事件发生的时候该效果会被分派。

Java代码  

1. Add the Effect metadata tag   
2. ...   
3. // Define the custom event   
4. [Event(name="labelChanged", type="flash.events.Event")]   
5. [Effect(name="labelChangedEffect", event="labelChanged")]   
6. public class ButtonLabel extends Button {   
7. ...   
8. Add labelChangedEffect to the Component   
9. Instantiation MXML Tag   
10. <comps:ButtonLabel id="myButton" labelChanged="labelChanged(event);"  
11. labelChangedEffect="myEffect" x="10" y="39"/>  

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的例子：

Java代码  

1. [IconFile("icon.png")]   
2. public class CustomButton extends Button   
3. {   
4.     
5. }  

[IconFile("icon.png")]
public class CustomButton extends Button
{
 
}

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

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">   
3.  <mx:Script>   
4.  <![CDATA[   
5.   [Inspectable(defaultValue="Visa",   
6.   enumeration="Visa,Mastercard,Discover,American Express",   
7.   category="Credit Card", type="String")]   
8.      
9.   public var ccType:String;   
10.  ]]>   
11.  </mx:Script>   
12. </mx:HBox>   
13. <?xml version="1.0" encoding="utf-8"?>   
14. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
15.  xmlns:comps="comps.*" >   
16.  <comps:MyComponent ccType=""/>   
17. </mx:Application>   
18.    

<?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元数据标签就用来声明对象的类型。
用法：

Java代码  

1. [InstanceType("package.className")]   
2.    

[InstanceType("package.className")]
 

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

Java代码  

1. Using [NonCommittingChangeEvent]   
2. <?xml version="1.0" encoding="utf-8"?>   
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
4.  backgroundColor="#FFFFFF">   
5.  <mx:Script>   
6.  <![CDATA[   
7.   import flash.events.Event;   
8.   private var eventObj:Event;   
9.   [Bindable(event="triggerBinding")]   
10.   [NonCommittingChangeEvent("change")]   
11.   private var s:String;   
12.   private function triggerBinding():void  
13.   {   
14.    eventObj = new Event("triggerBinding");   
15.    dispatchEvent(eventObj);   
16.   }   
17.  ]]>   
18.  </mx:Script>   
19.     
20.  <mx:Panel title="NonCommittingChangeEvent Sample" width="500" height="90"    
21.   paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">   
22.      
23.   <mx:TextInput id="ti1" change="s=ti1.text" enter="triggerBinding()"/>   
24.   <mx:TextInput id="ti2" text="{s}" />   
25.  </mx:Panel>   
26. </mx:Application>   
27.    

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类：

Java代码  

1. package com.mydomain    
2. {   
3.  [Bindable]   
4.  [RemoteClass(alias="com.mydomain.MyClass")]   
5.  public class MyClass    
6.  {   
7.   public var id:int;   
8.   public var myText:String;   
9.     }   
10. }   
11.    

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

Java代码  

1. package comps   
2. {   
3.  import mx.core.UIComponent;   
4.  [Style(name="borderColor",type="uint",format="Color",inherit="no")]   
5.  [Style(name="fillColor",type="uint",format="Color",inherit="no")]   
6.  public class CustomCircle extends UIComponent    
7.  {   
8.   public function CustomCircle()   
9.   {   
10.    super();   
11.   }   
12.   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void    
13.   {   
14.    super.updateDisplayList(unscaledWidth, unscaledHeight);   
15.    graphics.lineStyle(1, getStyle("borderColor"), 1.0);   
16.    graphics.beginFill(getStyle("fillColor"),1.0);   
17.    graphics.drawEllipse(0,0,100,100);   
18.   }   
19.  }   
20. }   
21. Using CustomCircle and assigning custom style properties   
22. <?xml version="1.0" encoding="utf-8"?>   
23. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
24.  xmlns:comps="comps.*" backgroundColor="#FFFFFF">   
25.     
26.  <mx:Panel title="Style Sample" width="200" height="200"  
27.   paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">   
28.      
29.   <comps:CustomCircle borderColor="#000000" fillColor="#FF0000" />   
30.     
31.  </mx:Panel>   
32. </mx:Application>