Page 2 of 2   « previous page

[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. 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 in the code hints and property inspector of Flex Builder 2. The example shown in Listing 9 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.

Figure 5 shows the example of the code hints being displayed as the component is added to an application.

Figure 6 shows the same example, but this time in design view, which exposes the property inspector. You can see that the category of properties is Credit Card with the property showing as ccType and the available values in the drop-down.

[InstanceType]
The InstanceType metadata tag is used to declare the type of object that will be allowed when declaring a variable as IDeferredInstance in 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. Listing 10 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 triggerBinding event is dispatched. The triggerBinding event is dispatched only when the Enter key is pressed while typing in the ti1 TextInput component.

[RemoteClass]
RemoteClass can be used to bind an ActionScript class to a Java class or a ColdFusion CFC. This will allow for automatic data type conversions. Below is a sample of an ActionScript class named MyClass in the package com.mydomain being bound to a Java class named MyClass in the 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.

Listings 11 and 12 give examples of how to define two styles named borderColor and fillColor, both of which are defined as a uint data type. The styles are set in 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.

Figure 7 shows the results of Listing 12 and Listing 13.

By now you should have had a few "Wow, I know where I could have used that" or "Hmm, I think I will try this metadata tag in a new project." If you haven't, then you need to go back and read the article again. OK, so what I'm trying to say is that the metadata tags provided for us by the Adobe Flex team are not only extremely powerful, allowing us to extend and customize what we do with Flex, but are also very easy to use. They are a very quick way to accomplish a great deal with only a few lines of code. If you're not using these tags, you're working too hard to accomplish things that are built into Flex 2.

The content of this article is excerpted from the upcoming book titled Professional Flex 2 (ISBN 0470102675) by Rich Tretola, Simon Barber, and Renaun Erickson from Wiley Publishing, Inc./Wrox Press. To pre-order please visit www.everythingflex.com or www.amazon.com/Professional-Flex-2-Rich-Tretola/dp/0470102675.

Page 2 of 2   « previous page