Flex Meta标记的用法实例

Have you ever used [Bindable] in Flex? Do you know it is metatag? Apart from this, there are 12 more documented metatag in Flex framework. I will list them all out here for your reference:

ArrayElementType
Data type restriction like Java Generic

[ArrayElementType("String")]
public var arrayOfStrings:Array;

Bindable
Allows for easy data synchronization within the components. Bindable can be used to bind simple data, classes, complex data, functions and event. I will talk about this metatag in more detail later.

[Bindable]
[Bindable(event="eventname")]

DefaultProperty
The DefaultProperty metadata tag is used to set a single property as a default property of a class. The 3 label controls are equivalent with “text” defined as default property in the component, so you don’t need to put <text> tag around it.

<mx:label text=”Hello”></mx:label>
<mx:label>
<mx:text>Hello</mx:text>
</mx:label>
<mx:label>Hello</mx:label>

Embed
The Embed metadata tag is used to import images into your application. There are two ways to use Embed. You can either embed the image in ActionScript and assign it to a variable. Button 1 and 2 below do the same.

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

<mx:Button label=”Icon Button 1″ icon=”{myIcon}”/>
<mx:Button label=”Icon Button 2″ icon=”@Embed(source=’myIcon.gif’)”/>

Event
The Event metadata tag is used to declare events that will be dispatched by your custom class. Adding this metadata tag to your class definition allows you to add an event handler function to the MXML tag used to instantiate your custom class. You insert the [Event] metadata tag before the class definition in an ActionScript file, or in the <mx:Metadata> block in an MXML file.

In Actionscript:
[Event(name="myClickEvent", type="flash.events.Event")]

In MXML:
<?xml version=”1.0″?>
<mx:TextArea xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Metadata>
[Event(name="myEnableEvent", type="flash.events.Event")]
</mx:Metadata>
….
</mx:TextArea>

Effect
The Effect metadata tag is used to define a custom effect that will be dispatched when an event occurs. An effect is paired with a trigger that invokes the effect. A trigger is an event, such as a mouse click on a component, a component getting focus, or a component becoming visible. An effect is a visible or audible change to the component that occurs over a period of time. You insert the [Effect] metadata tag before the class definition in an ActionScript file, or in the <mx:Metadata> block in an MXML file. Same as Event syntax above.

[Effect(name="darkenEffect", event="darken")]

IconFile
IconFile is used to identify the filename of a jpg, gif, or png file that will be used as the icon for your custom class. While the [Embed] meta tag can be used to embed images files, SWF files, music files, video files, etc, IconFile is only used to embed a file that will be used as the icon for the custom class.

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

Inspectable
The Inspectable metadata tag is used to define the attributes of your custom component that you would like to display in the code hints and property inspector of Flex Builder 2.

InstanceType
The [InstanceType] metadata tag specifies the allowed data type of a property. Example below shows that you can only assign instance data type “mx.controls.Label” to variable topRow of type IDeferredInstance.

[InstanceType("mx.controls.Label")]
public var topRow:IDeferredInstance;

NonCommittingChangeEvent
TBA

RemoteClass
TBA

Style
The Style metadata tag is used to define custom style properties for your components. Simply add the Style metadata tag or tags to your class definition and then use the getStyle method to retrieve its value. I will talk about this metatag in more detail later.