DougHughes.net

I’m going to start in on series of blog posts discussing using CSS to style your Flex applications. I’ll start with simply styling a button then move on to a more complex Flex component like the datagrid, then styling a custom component and finally I’d like to take a look at some of the changes coming to using CSS in Flex 4.

Styling your component inline
Often when you see people post a quick snippet of code online they will simply style the component inline.

(frequently found on quick example blog posts)

For example:

Here we assign the font color and font size of our button inline with our declaration of our button instance. The advantage of adding a style inline with the button is it’s somewhat easy to find the exact instance of the button that has a unique style and if your building something quickly its nice to add in the style on the fly as you code.

The disadvantage of styling inline is that the unique button style that you create isn’t all that easy to reuse. Sure you can copy and paste that code into each button declaration but if the client wants neon pink text instead of that killer green color that you picked out you’ll need to go back into each of your button instances and make the change. For that reason this is generally considered a bad practice and the chances you’ll get beat up at the Flex playground are relatively high at 9/10.

Declaring your Style in a Script Block
You’ll often see people declare all of their styles in a script block at the top of the page that they are working on. (Also frequently found on quick example blog posts)

For Example:

Button {
    color: #060;
    font-size: 14;
}
.neonPinkButtonStyle  {
    borderColor: #93f;
    color: #fff;
    cornerRadius: 6;
    fillAlphas: 1, 1, 1, 1;
    fillColors: #939, #939, #936, #936;
    textRollOverColor: #fff;
    themeColor: #90f;
}

Here we’re adding a style block that allows us to declare styles and we can reuse these styles. The advantage to this is that it’s fairly easy to find the style that your looking to edit (people generally add this style block at the top of the file). Secondly it’s more reusable than our inline code. If this page has 50 buttons with these two styles we should be able to quickly make changes to this one block of code and see the updated styles on all 50 buttons.
The disadvantage of adding a script block at the top of each mxml file is that your Flex application is mostly likely made up of many small mxml files and you’ll want to reuse the styles across the entire application. For that reason this is also generally considered a bad practice and the chances you’ll get beat up at the Flex playground are relatively high at 7/10.

Also of note is the way we declared styles for these two buttons. When we declare

‘Button’ (no dot in front) we are referring to all Flex components of type Button. When we declare the button instance we don’t have to specify a style name. When we set up a specific style name like ‘.neonPinkButtonStyle’ we have to reference that name when we declare the instance of the button as we did on our second button with the code styleName="neonPinkButtonStyle" (no dot needed)

Referencing a style from an external style sheet
More often than not, when you work on a project you’ll want to reference an external css style sheet.
For example:

< mx: Style source = "com/alagad/assets/style.css" / >

You ‘ll most often add the reference to your external style sheet in the main application file of your project. To make changes or add styles to your entire Flex application just open up your style sheet and make the needed changes.
Now if we have these styles posted somewhere in our css style sheet:

 Button
  {
  font-size:14;
  color: #006600;
  }
  .neonPinkButtonStyle
  {
  cornerRadius: 6;
  fillAlphas: 1, 1, 1, 1;
  fillColors: #993399, #993399, #993366, #993366;
  color: #ffffff;
  textRollOverColor: #FFFFFF;
  borderColor: #9933ff;
  themeColor: #9900ff;
  }

And we have two Buttons hidden somewhere deep in our Flex application, we will get the correct styling applied to our button instances and we can quickly make changes to all our button styles anywhere in our application by changing the reference to our one Button style in our style.css file. We can also change buttons that are specifically styled with the neonPinkButtonStyle, assuming they have been propertly referenced on the button instance by adding the styleName="neonPinkButtonStyle" tag to the button instance. (note that the more specific style reference ".neonPinkButtonStyle" takes precedence over the more general ‘Button’ applied to all buttons in the application) This is generally considered a ‘good practice’ and the chances you’ll get beat up at the Flex playground are relatively low at only 3/10.
Lastly, I use the term ‘best practices’ and ‘bad practice’ very loosely. It’s always more importand to get figure out the workflow that works best for you. Maybe you style inline with the intentions of coming back and refactoring later. Or maybe you just leave it and move on to more pressing issues. If your boss only gives you two weeks to finish a project, just try to finish your project before the deadline, and then go out and get some sun. Chances are you won’t find any Flex bullies outside anyway.
This Style Explorer has been around for a while and I’m sure it’s help thousands of developers learn more about what attributes are easy to style in the basic Flex component library.