Code Cook

Written on January 5, 2008 – 1:04 am | by John |

“Metadata is data about data” in the case of Flex it is going to describe our components, classes and their interactions/uses. For example the most familiar metadata tag in Flex and AS3 code is [Bindable] this describes a property that can be bound to (obviously). But metadata is not limited to properties in Flex, you can describe all sorts of things with metadata to make your application code much easier to decipher, easier to user as well and add functionality that might otherwise be missed. I’ll try to describe a few of these so you can be on your way to using Flex metadata to improve how you write and use Flex code.

When creating metadata keep in mind that the metadata is bound to the next line in code. So if you are creating metadata for a class property or method, it should immediately precede the property declaration or method definition.

The [Bindable] metadata tag is great for class properties created in declarations but what about Getters and Setters - This is probably the next most used metadata tag that in my code and is an addition of the [Bindable] tag. In order to bind to a property that has a getter/setter you need to declare the event type that is dispatched when the property changes. We add the event="changePropertyName" to the [Bindable] tag:
[Bindable(event="changePropertyName")]

changePropertyName can be any string, but by convention “change” and then the name of the property (in hungarian notation).

Speaking of events, when a class broadcasts and event. You can add metadata for code hinting. To specify the event and its type for a class you can add the [Event] metadata tag. You’ll need to specify a name and a type for this tag so FlexBuilder knows what event and type it will present in the code hinting. So the [Event] metadata tag will look like:
[Event(name='changePropertyName' type='flash.events.Event')]

One note about the name value - you’ll need to use hungarian notation again so the code hinting displays correctly. So the event above changePropertyName may have a static const on the class CHANGE_PROPERTY_NAME if you follow the changePropertyName (lowercase for the first character and then uppercase for additional words) the code hinting in FlexBuilder will wake up just fine.

For Example - the following event metadata [Event(name="CHANGPROPERTYNAME", type="flash.events.Event")] results in the following code hinting:

Not very code-hinting’ish

Where as this [Event(name="changePropertyName", type="flash.events.Event")] results in:

Much better!

When building compoenents in AS3 you’ll want to expose information about your component, default values, property names etc. In comes the [Inspectable] metadata tag. This tag is not required and there are a few rules that apply with how Flex Builder displays the information. You can check out the details in the live docs. There are many definitions that you can add to the [Inspectable] tag, but some of the more used declaration in my code are:

• defaultValue - The initial value that is determined by the property declaration.
• enumeration - A comma-delimited list of values that are accepted for that property’s value.
• type - Specifies the type of the value. Useful if you need a specific type instead of a generic type
• variable - Specifies the variable to which the parameter is bound

These are just a few of the metadata tags. There is quite a lot you can do with metadata and it has solved some problems for me. If you’d like to learn more check out the live docs!