•  
  •  

Flex 2 Runtime CSS

So they”ve added this new feature called Runtime CSS to Flex 2 and integrated it with Flex Builder 2.0.1. You may over think this a bit, as I did, but it is really quite simple. In this entry, I go over the details.
I also have a gotcha that may have you scratching your head for a hour or so.’, ‘Flex 2”s Runtime CSS is really just a built-in way to compile your .css files into .swf files and then you use a StyleManager class to load the style SWF.

Let”s start with the built-in way to compile a CSS file into a SWF:
In Flex Builder 2.0.1, you will find a “Compile CSS to SWF” option in the context menu of a file in the Navigator view. It will only be enabled when the file is a CSS. Just set this option on each CSS file that you would like compiled with the application. You will notice that the compiled SWF will be automatically placed in the output folder for your project.


Gotcha: There must be an output folder defined for the project. If for some reason the project”s output folder is the root of the application, say instead of bin, this feature will be disabled.

Okay, so now you have your CSS set to compile with the rest of your application automatically. Of course, you could do it manually from the command-line using the mxmlc, but why make things difficult.
Now you just need to load the style SWF in your application. This is done with the StyleManager class. I simply call “StyleManager.loadStyleDeclarations( ”blueStyles.swf” )” on some event to load the style SWF.

In my case, I start with something like this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:business="com.app.business.*"
xmlns:control="com.app.control.*"
xmlns:view="com.app.view.*"
layout="absolute" minWidth="990" minHeight="550"
preinitialize="loadStyle()"
creationComplete="onCreationComplete()">

Then I can have a method that does nothing but load style SWF files.

private function loadStyle() : void
{
var eventDispatcher:IEventDispatcher = StyleManager.loadStyleDeclarations( currentTheme + ".swf" );
eventDispatcher.addEventListener( StyleEvent.COMPLETE, styleLoadedHandler );
}

And in the case above, I have it set to change the CSS when the user selects the theme color they want from a ComboBox. I got most of my ideas on how to implement this from the new Flex Store. You should take a look again if it has been awhile.


Note: Another little thing that I”ve gotten stuck on are skins. I”ve found that I had to keep my CSS at the root of my project so that I could get to skins that use a ClassReference.
ClassReference(“assets.skins.ButtonBarButtonSkin”);

In the end, the only files at the root of my project are the main application and the CSS files.

About Rob Rusher

In his role as Principal Consultant for On3, Rob leads an software development practice to help his clients build rich Internet applications for the desktop, browser, and mobile devices, and to rapidly increase their knowledge and skills to better support their organization's goals. Rob is an Adobe Certified Expert, Community Professional, and Certified Instructor. He has taught and mentored the technical teams at HP, Overstock, Paychex, SAS, the FedEx, and other Government and Fortune 100 organizations. Rob has co-authored four best-selling books on building secure, cutting-edge and rapidly developed applications using Adobe AIR, ColdFusion and Flex. He is very active in organizing and speaking at RIA, Adobe LiveCycle, mobile conferences, and user groups. In addition to growing his software consulting practice, On3, Rob has been building expertise in rich client application development on a wider variety of devices and platforms that extend the applications to change the way we all create and live.