Using mx:Metadata to Define Component Styles

I'm sure that you already know that you can create custom components in Flex. I'm also sure that you know that you can use CSS to style your applications and components. Did you know that you can also use styles of your custom component to define styles on elements within that custom component?

Ok, I may have lost some of you there. Lets take a look at my example below... What I am showing here are 2 custom components side by side (example 1 and example 2). They are two separate instances of my "MXML_Example" component. Yes, they look different, but they are the exact same component. Each "MXML_Example" component contains a mx:Panel, mx:TextArea, and mx:Button.

First, lets look at the source used to instantiate the two components:

<components:MXML_Example width="{(width/2)-20}" left="10" top="80" title="Example 1" styleName="example1" height="200" />
<components:MXML_Example width="{(width/2)-20}" right="10" top="80" title="Example 2" styleName="example2" height="200" />

The instantiation is nearly identical... why the difference? You can see that the styleName attribute is the only significant difference between the two instantiations... that has got to be a clue.

Lets take a look at the source of the "MXML_example" component. In the mx:Metadata tag, you can see definitions for three different different styles.

<mx:Metadata>
[Style(name="panelStyleName", type="String", inherit="no" )]
[Style(name="buttonStyleName", type="String", inherit="no" )]
[Style(name="textAreaStyleName", type="String", inherit="no" )]
</mx:Metadata>

In the creationComplete event, the setStyle method is is used to apply these styles to the components within the "MXML_Example" component.

private function onCreationComplete() : void
{
panel.styleName = getStyle("panelStyleName");
button.styleName = getStyle("buttonStyleName");
textArea.styleName = getStyle("textAreaStyleName");
}

So, we know that the styles on the MXML_Example element get applied to the child elements. Now, Let's take a look at the CSS definitions for the "example1" and "example2" styles.

.example1
{
panelStyleName:"panel1";
buttonStyleName:"button1";
textAreaStyleName:"textArea1";
}
.example2
{
panelStyleName:"panel2";
buttonStyleName:"button2";
textAreaStyleName:"textArea2";
}

You can see that there are different styles defined for the panelStyleName, buttonStyleName, and textAreaStyleName attributes. The css definitions for these styles dictate the styling of the elements within the "MXML_Example" instance. Be sure to take a look at the source code to see the full css definitions that are used for each example.

Open in New Window
View Source
Download Source

All images included within this example copyright 2006 Cynergy Systems.