This will be a three part series on skinning Flex components. For part one I have chosen to desolve 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:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:text="flash.text.*">
  3.     <mx:Style source="css/styles.css" />
  4.    
  5.     <mx:Button label="Click Me"/>
  6. </mx:Application>

PLAIN TEXT
CSS:
  1. Button {
  2.     cornerRadius: 12;
  3.     fontSize: 15;
  4. }

Simple enough, right?

Next we want a black button:

PLAIN TEXT
Actionscript:
  1. package com.cb
  2. {
  3.     import mx.controls.Button;
  4.  
  5.     public class BlackButton extends Button
  6.     {
  7.         public function BlackButton()
  8.         {
  9.             super();
  10.         }
  11.     }
  12. }

There it is. All the actionscript you will need. And to think it was all auto generated!

Actionscript Class Generation

Actionscript Class Generation

Add the MXML and CSS:

PLAIN TEXT
HTML:
  1. ...
  2. <button:BlackButton label="Click Me" /> 
  3. ...

PLAIN TEXT
CSS:
  1. BlackButton {
  2.     fillAlphas: 1.0, 1.0;
  3.     fillColors: #000000, #000000;
  4.     color: #FFFFFF;
  5. }

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:
  1. ...
  2. <button:BlackButton label="Click Me" styleName="playButton" /> 
  3. ...

PLAIN TEXT
CSS:
  1. .playButton {
  2.      icon: Embed(source='assets/play.png');
  3. }

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


Tags: , , , , , , ,