Tech Tuesday: Skinning Flex Components – Part 1: CSS

This will be a three part series on skinning Flex components. For part one I have chosen to dissolve the myth that Flex 3 can't truly cascade styles. This three part series will start simple and get more complex with each post. You can use this code to mimic descendant selectors, dimensioning and multiple class names within Flex.

Problem:
Flex can't do true cascading styles like HTML (for example a black play button)

Solution:
YES, flex can do cascading styles. It just requires a different approach. A programmatic approach. Don't worry, I assure you that even a non-programmer can pick this one up.

Lets dive a little deeper. Cascading styles refers to the ability to start with a button, style it into a black button then go a step further and make it a play button. First, create a button and use some CSS to style various properties of that button.

PLAIN TEXT

HTML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:text="flash.text.*">
<mx:Style source="css/styles.css" />
<mx:Button label="Click Me"/>
</mx:Application>

PLAIN TEXT

CSS:

Button {
cornerRadius: 12;
fontSize: 15;
}

Simple enough, right?

Next we want a black button:

PLAIN TEXT

Actionscript:

package com.cb
{
import mx.controls.Button;
public class BlackButton extends Button
{
public function BlackButton()
{
super();
}
}
}

Add the MXML and CSS:

PLAIN TEXT

HTML:

...
<button:BlackButton label="Click Me" />
...

PLAIN TEXT

CSS:

BlackButton {
fillAlphas: 1.0, 1.0;
fillColors: #000000, #000000;
color: #FFFFFF;
}

Now we have a black button. This process can be used as many times as you want to continually inherit properties from another object. You could have a small, blue button with red text all styled at each level.

Lastly, we need to add the play icon:

PLAIN TEXT

HTML:

...
<button:BlackButton label="Click Me" styleName="playButton" />
...

PLAIN TEXT

CSS:

.playButton {
icon: Embed(source='assets/play.png');
}

Now we have a black play button. Add a stop, pause, and mute button as BlackButton's and they will all be updated when you modify the style for either the base Button class or the BlackButton class. Again, this tutorial is not very technical but the next two will be. This is meant to be the first step in bridging the gap between design and actionscript using Flex 3.

The number of comments I get on this post will exponentially increase the likelihood of part 2 coming out sooner.

Sample
Source View

References:
The Woes of Flex
CSS in Flex is not real CSS at all
Adobe Bug Page

This was originally posted on blackcj.com, Chris Black's personal blog. Chris is a Senior Developer at Sierra Bravo.

Share and Enjoy: