Flex 元数据标签

Flex元数据标签

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

程序代码：

[ArrayElementType("String")] 
 public vararrayOfStrings:Array;

 [ArrayElementType("Number")] 
 public vararrayOfNumbers:Array;

 [ArrayElementType("mx.core.UIComponent")] 
 public vararrayOfUIComponents:Array;

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

A simple use of[Bindable]

 <fx:Script>
 <![CDATA[
  [Bindable]
  private var me:String="RichTretola";
 ]]>
 </fx:Script>
 
 <mx:Panel title="Simple Binding"width="500" height="90"
  paddingTop="10"paddingLeft="10" paddingRight="10" paddingBottom=" 10"layout="horizontal">
 <mx:Labeltext="{me}"/>
 </mx:Panel>

Bindable也可以用来绑定到事件

Using [Bindable] with getters andsetters

 <fx:Script>
 <![CDATA[
  private var _phoneNumber:String= " ";
  // Bind getter function tophoneNumberChanged event
  [Bindable(event="phoneNumberChanged")]
  public function getphoneNumber():String 
  {
   return_phoneNumber;
  }
  // Setter method.
  public function setphoneNumber(value:String):void 
  {
   if(value.length<10) 
   {
    _phoneNumber= value;
   }
   else 
   {
    _phoneNumber= phoneFormatter.format(value);
   }
   // Create anddispatch event
   vareventObj:Event = new Event("phoneNumberChanged");
   dispatchEvent(eventObj);
  }
 ]]>
 </fx:Script>
 
 <mx:PhoneFormatterid="phoneFormatter"
  formatString="(###) ###-####"validPatternChars="#-() " />
 <mx:Panel title="Bind with Gettersand Setters" width="500" height="90"
  paddingTop="10"paddingLeft="10" paddingRight="10" paddingBottom=" 10"layout="horizontal">
  <mx:TextInputid="ti1" change="phoneNumber=ti1.text" maxChars="10"restrict="0-9"/>
  <mx:TextInputid="ti2" text="{phoneNumber}"/>
 </mx:Panel>

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

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

Using the MyButton class wih[DefaultProperty]

 <comps:MyButton>
  <mx:String>Test</mx:String>
 </comps:MyButton>

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

方式一：
[Embed(source="myIcon.gif")]
[Bindable]
public var myIcon:Class;

<mx:Buttonlabel="Icon Button 1"icon="{myIcon}"/>

<mx:Buttonlabel="Icon Button 2"icon="{myIcon}"/>

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

<mx:Buttonlabel="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 classButtonLabel extends Button
 {
  // property to hold labelvalue
  private var_myLabel:String;
  // public setter method
  public function setmyLabel(s:String):void 
  {
   _myLabel =s;
   this.label =s;
   // Create anddispatch custom event
   vareventObj:Event = new Event("labelChanged");
   dispatchEvent(eventObj);
  }  
 }
}

Using the ButtonLabel class withthe labelChanged [Event]

  
 <fx:Script>
 <![CDATA[
  import mx.controls.Alert;
  importflash.events.Event;
  // method to handle customevent
  public functionlabelChanged(eventObj:Event):void 
  {
   myTA.text=myTA.text + "\n"+ eventObj.target.label;
   myTA.verticalScrollPosition= myTA.verticalScrollPosition +20;
  }
 ]]>
 </fx:Script>
 
 <mx:Panel title="Event Sample"width="500" height="275"
  paddingTop="10"paddingLeft="10" paddingRight="10" paddingBottom=" 10"layout="absolute">
  
  <mx:TextInputid="buttonLabelTI"
   change="myButton.myLabel=buttonLabelTI.text"x="10" y="9"/>
  <!--Instantiatecustom class and define method to handle label- Changedevent-->
 
  <comps:ButtonLabelid="myButton" labelChanged="labelChanged(event);" x="10"y="39"/>
  <mx:TextAreaid="myTA" width="200" height="200" x="249"y="10"/>
 
 </mx:Panel>

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 theComponent
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元数据标签可以用来定义那些能在代码提示和属性检测器（propertyinspector）中显示的属性。

 <fx:Script>
 <![CDATA[
  [Inspectable(defaultValue="Visa",
  enumeration="Visa,Mastercard,Discover,AmericanExpress",
  category="Credit Card",type="String")]
  
  public var ccType:String;
 ]]>
 </fx:Script>
</mx:HBox>

 <comps:MyComponentccType=""/>

 

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

 

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

Using[NonCommittingChangeEvent]

 <fx:Script>
 <![CDATA[
  importflash.events.Event;
  private vareventObj:Event;
  [Bindable(event="triggerBinding")]
  [NonCommittingChangeEvent("change")]
  private var s:String;
  private functiontriggerBinding():void
  {
   eventObj =new Event("triggerBinding");
   dispatchEvent(eventObj);
  }
 ]]>
 </fx:Script>
 
 <mx:Paneltitle="NonCommittingChangeEvent Sample" width="500"height="90" 
  paddingTop="10"paddingLeft="10" paddingRight="10" paddingBottom=" 10"layout="horizontal">
  
  <mx:TextInputid="ti1" change="s=ti1.text"enter="triggerBinding()"/>
  <mx:TextInputid="ti2" text="{s}" />

 </mx:Panel>

11、[RemoteClass]
RemoteClass 可以用来将一个ActionScript类绑定到一个Java类或一个ColdFusionCFC。这样做可以自动转换数据类型。下面的例子将包com.mydomain中的名为MyClass的ActionScript类绑定到了同一个包中名为MyClass的Java类：

packagecom.mydomain 
{
 [Bindable]
 [RemoteClass(alias="com.mydomain.MyClass")]
 public class MyClass 
 {
  public varid:int;

  public varmyText: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 extendsUIComponent 
 {
  public functionCustomCircle()
  {
   super();
  }
  override protected functionupdateDisplayList(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 assigningcustom style properties

 <mx:Panel title="Style Sample"width="200" height="200"
  paddingTop="10"paddingLeft="10" paddingRight="10" paddingBottom=" 10"layout="horizontal">
  
  <comps:CustomCircleborderColor="#000000" fillColor="#FF0000" />
 
 </mx:Panel>

 

 

标签描述[ArrayElementType]在数组中定义所有允许的数据类型。[Bindable]声明一个属性可以在代码中使用数据绑定表达式。[DefaultProperty]定义组件在MXML中使用时的默认属性的名称。[Deprecated]标识一个类或类的元素是不推荐使用的，这样编译器能认出他并在被调用时给出一个警告信息。[Effect]定义MXML的特效属性名称。[Embed]在编译时导入 JPED,PNG,SVG 或SWF文件。也会导入SWC文件的图片资源。他的功能等同于MXML中的 @Embe语法。[Event]定义MXML的事件属性的名称和类型。[Exclude]使 Flex Builder 的标签检查器忽略类元素。语法类似[Exclude(name=”label”,kind=”property”)][ExcludeClass]是 Flex Builder标签检查器忽略类。这相当于ASDoc中的 @private标签。[IconFile]定义一个图标文件，使组件在Adobe FlexBuilder的插入面板中以该图标显示。[Inspectable]定义一个属性的列表，供组件使用者在 Flex Builder的的属性提示和标签检查中使用。同时也定义了属性的可用值。[InstanceType]指定了 IDeferredInstance中的，属性接受的数据类型。[NonCommittingChangeEvent]定义一个事件过渡触发器。[RemoteClass]把一个ActionScript对象映射到Java对象。[Style]为组件的样式属性定义一个MXML标签属性。[Transient]当一个 ActionScript对象被映射到Java对象后，被该标签标识的属性，会从发送到服务端的数据中忽略掉。