One thing you may have noticed when I introduced the out-of-the-box themes - a bunch of them were CSS files. Which begs the question: Can you source them in using the <mx:Style> tag? Yup! As mentioned before, style definitions are the root of your theme.

Just something to remember, though, is that you can't use the <mx:Style> to source in a theme SWC file; and using the -theme compiler option gives you extended flexibility to control what theme files to use during the build and release phase of the project (particularly useful for large projects).

Flex gives you many deployment options here so use whatever's most convenient.

The Skinny on Skins
For those of you who use WinAmp or Firefox you may have played around with their skins and seen how the look can be drastically altered. Flex lets you do the exact same things and more.

There's actually two ways to skin. Graphical skinning uses images to define parts or all of a component, and programmatic skinning lets you use code to define the way a component looks and behaves.

Here we're going to look at the graphical way of using JPEGs, GIFs, and PNGs to define the look of a component. When skinning you take into consideration the states of a component or control; the common states that most controls exhibit are the mouse off, mouse over, and mouse down states. One of the most popular things in HTML to represent graphically is the button, and to add some pizzazz you could use some JavaScript to add a rollover effect that swapped out the default image to a mouse over state image.

It's very simple in Flex; you use CSS/Styles to specify what assets to use for your graphical skins. In the Button Class (mx.controls.Button) documentation you'll notice it supports many Style properties, but namely the following skin-related properties:

• disabledSkin
• downSkin (mouse down)
• overSkin (mouse over)
• upSkin (mouse not over)
• selectedDisabledSkin
• selectedDownSkin
• selectedUpSkin
• selectedOverSkin

If you want to take it a bit further you can also create images for the disabled state (i.e., <mx:Button enabled="false"/>), as well for the selected skins that are used to skin the background and the border of the button.

To test them quickly, use the inline approach:

<mx:Button label="My Skinned Button"

overSkin="@Embed('button_over.png')"
downSkin="@Embed('button_down.png')"
    upSkin="@Embed('button_up.png')"/>

Compile and run your application and you should see a button that changes when you mouse over it and click down on it.

If your button is big enough to contain the text it will retain its original size, but if it wasn't Flex will automatically scale it to a big enough size. Add a fontSize="25" to your Button tag and see how Flex scales it:

Image G

The whole Embed business is a directive that tells Flex to import the image during compile time. You can abstract the name of the actual image files out of the Button into a script area of your MXML and embed the image elsewhere so that your Button doesn't need to know the exact filenames involved by doing:

<mx:Script>
<![CDATA[
[Embed(source="button_over.png")]
[Bindable]
public var buttonOver:Class;
[Embed(source="button_down.png")]
[Bindable]
public var buttonDown:Class;
[Embed(source="button_up.png")]
[Bindable]
public var buttonUp:Class;
]]>
</mx:Script>

<mx:Button label="My Skinned Button" overSkin="{buttonOver}" downSkin="{buttonDown}" upSkin="{buttonUp}"/>

Of course even better is just wrapping that all up into a Style:

<mx:Style>
   .skinnedButton
{
     overSkin: Embed(source="button_over.png");
     downSkin: Embed(source="button_down.png");
upSkin: Embed(source="button_up.png");
}
</mx:Style>

<mx:Button label="Skin Class" styleName="skinnedButton"/>