Using Metadata Tags in Components
Category: Flex Components | 42 views | 1 Comment
Metadata tags are special tags that are inserted within your source code that give the compiler information on how to compile the application. There are 12 documented metadata tags, each of which is described here.
[ArrayElementType]
Defining an Array is usually very generic in nature because the elements of the Array can be of any type. However, using the ArrayElementType metadata tag allows you to define the data types of the array elements. Here is the example syntax of [ArrayElementType]:
[ArrayElementType(”String”)]
public var arrayOfStrings:Array;
[ArrayElementType(”Number”)]
public var arrayOfNumbers:Array;
[ArrayElementType(”mx.core.UIComponent”)]
public var arrayOfUIComponents:Array;
[Bindable]
The Bindable metadata tag is one of the most used metadata tags because it allows for easy data synchronization within the components of your application. Bindable can be used to bind simple data, classes, complex data, and functions. To bind a simple piece of data, you must simply define the data with the metadata tag included, as shown in
This example has a private variable named phoneNumber, as well as a public getter and setter. The getter method uses the Bindable tag to bind to an event named phoneNumberChanged. This setter method dispatches the phoneNumberChanged event whenever its data changes. By using a setter method, the data can be manipulated before it is set to the private variable. In this example, the data is formatted only when the length of the value coming into the method is 10. When the phoneNumberChanged event is dispatched, the second TextInput component updates because its text property is bound to the phoneNumber variable.
[DefaultProperty]
The DefaultProperty metadata tag is used to set a single property as a default property of a class. This allows the property to be set within a container tag without the need to define the property name. A simple example of this would be a custom Button class. shows a simple Button class that has the label property set as the DefaultProperty. shows how the label is defined as a string within the custom Button container tags.
[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 within ActionScript and assign it to a variable (as in the first example in the following code), or you can assign it directly to the component property (using the syntax shown in the second example of the following code).
[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}”/>
The output from the following is identical to the previous code block. The benefits of creating the myIcon class are that it can be defined one time within a single class, and bound to multiple components within your application.
package { 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); } } }
<?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns: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 labelChanged 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>
[Effect]
The Effect metadata tag is used to define a custom effect that will be dispatched when an event occurs. This can be easily demonstrated by building on the earlier Event examples. By simply changing a single line to the ButtonLabel class , an effect is defined that can be assigned to an Effect instance
[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. Whereas the [Embed] metadata tag can be used to embed image files, SWF files, music files, video files, and so on, IconFile is only used to embed a file that will be used as the icon for the custom class. Here is the example of the IconFile syntax:
[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 within the code hints and property inspector of Flex Builder 2. The example shown in defines a variable named ccType that is inspectable. It defines a defaultValue of Visa, a category of Credit Card, and enumeration values of Visa, Mastercard, Discover, and American Express.
}
<mx:Button label=”Icon Button 1″ icon=”@Embed(source=myIcon.gif’)”/>
<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. creates a custom Button class that will dispatch an event whenever its label property changes. The main application file shown in instantiates the custom Button and creates the event handler function, which dumps the new label property to a TextArea component to show the changes that occur.
[InstanceType]
The InstanceType metadata tag is used to declare the type of object that will be allowed when declaring a variable as IDeferredInstance within a template object. The syntax of InstanceType looks like this:
[InstanceType(”package.className“)]
[NonCommittingChangeEvent]
The NonCommittingChangeEvent is a metadata tag that will prevent a change from occurring when a specified event occurs. demonstrates how this works. A private variable named s of type String is created and bound to the ti2 TextInput component. The other TextInput component with the id of ti1 sets the value of s equal to the value of its text property whenever the text changes. Additionally, the Binding metadata tag attached to the s variable is set to bind when the trigger Binding event is dispatched. The triggerBinding event is dispatched only when the Enter key is pressed while typing in the ti1 TextInput component.
[RemoteClass]
RemoteClass is used to bind an ActionScript class to a Java class. This will allow for automatic data type conversions. Following is an example of an ActionScript class named MyClass in package com.mydomain being bound to a Java class named MyClass in package com.mydomain:
package com.mydomain {
[Bindable]
[RemoteClass(alias=”com.mydomain.MyClass”)]
public class MyClass {
public var id:int;
public var myText:String;
}
}
[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.
and show examples of how to define two styles named borderColor and fillColor, both of which are defined as uint data types. The styles are set within the component tag when the class is instantiated. The updateDisplayList function is overridden and the custom styles are used to draw the circle border and fill.
