Ted On Flash: Flex 2.0.1 - Understand Runtime CSS

Flex 2.0.1 - Understand Runtime CSS

DIGG IT! 19 Comments Published Monday, January 08, 2007 at 6:55 AM .

So lets take a look at runtime CSS in Flex 2.0.1. This is a killer feature for me because in allows for reusable skinning across Flex applications as simple as a URL. Now your expecting CSS to be text based but in Flex's case to support custom fonts, custom component skins, and graphics embedding the runtime format of CSS in Flex is SWF.

Runtime CSS Example

In Flex 2.0.1 there is a new compiler option for MXMLC to directly compile CSS into SWF. These style SWF files can then be loaded at runtime by any Flex 2.0.1 application. This is very handy because it allows you to externalize all graphical elements within the style of your application into a URL for reuse across applications. Why embed the style N times when you can externalize it and just load it in? Typically you are not just making 1 Flex application, you may be making 5-6 for the intranet at your company and externalizing style in this format is very handy.

First you need to create a CSS file. I typically go to the Flex 2 Style Explorer to style my applications. It presents all the style options for Flex components and generates CSS for you. It is one of my secret weapons.

Flex 2 Style Explorer

Download Flex Style Explorer ZIP

So now for the hard part, compilation. Assume I have a style sheet called 'style1CSS.css' and all assets required are located adjacent to the 'style1CSS.css' file. With mxmlc in your path, simply write this on the command line.

mxmlc style1CSS.css

This creates the SWF file 'style1CSS.swf'.

If you are using Flex Builder 2.0.1 just right-click on the CSS file and press "Compile CSS to SWF". The swf file will be put into the 'bin' directory.

Now from within your application, you need to load this SWF via the Style Manager like so. Here is the application source for the example below:

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="StyleManager.loadStyleDeclarations( 'style1CSS.swf' )"
viewSourceURL="srcview/index.html">

<mx:ComboBox
  id="styleCombo"
  top="10" left="10" right="10"
  dataProvider="['style1CSS','style2CSS','style3CSS']"
  change="StyleManager.loadStyleDeclarations( styleCombo.selectedItem + '.swf' )">

</mx:Application>

In this case, the StyleManager loads the style1CSS.swf on the initialize event. I also provided a comboBox that will load CSS Style SWF files when the change event occurs.

Runtime CSS Example

So that is runtime CSS in a nutshell. What I think would be great is for everyone to create styles CSS SWF files and share them publicly. It would allow anyone to create a styled application without any style data in the core application. Simply map the components to the style classes in the CSS SWF, and they will all update when the CSS Style SWF file loads.

Cheers,

Ted :)

19 Responses to “ Flex 2.0.1 - Understand Runtime CSS ”

# Pablo January 8, 2007 11:55 AM

Great example!

Is there any limitations on the CSS that can be loaded by StyleManager?
# Juan January 8, 2007 12:25 PM

I like the idea of sharing styles. I started a site to share themes i created and some that i found. check it out at http://www.scalenine.com.

I'd like to create a community site to allow people to upload and share their creations, comment, rate. You know, full blown web 2.0. Alas, I am more on the design/ui/view side and do not have the programming knowledge to accomplish such a task.
# Ted Patrick January 8, 2007 1:56 PM

Juan,

Flex needs designers too! Great site and nice work on the Flex Skinning!

Ted :)
# Stefan Richter January 14, 2007 1:57 PM

How would I implement CSS styling if the styles are not known upfront when I create/compile my Flex app?
In my particular example the client wants to change the color scheme of the Flex UI via their CMS, this could be any color they see fit at the time. Would I need to handle this via say XML and run some setStyles at init time or can runtime CSS work in this case too?

PS: can you ask Blogger to add some more captcha letters, I don't think 8 is quite enough ;-)
# Mattias January 15, 2007 1:09 AM

Hej Ted,

In your example you write: ...and all assets required are located adjacent to the 'style1CSS.css' file.. If this is not the case? We have skinning classes at other locations in our source tree. Is there a way to point out a source directory?
# Jason January 30, 2007 8:39 AM

Is it possible to let a user create his own styles at runtime - send the source of a .css file (string) to a server, have the server run a command to compile the CSS into a SWF and then return the URL of the newly created SWF (CSS) to the main Flex SWF?
# Rostislav Siryk February 9, 2007 12:28 PM

As we can see from this example with loading runtime CSS info Flex application, it is possible to use loaded graphic assets, used in Flex CSS SWF file and apply them as skins.

It is great possibility, thank you!

So, I wonder is there a way to use these graphic assets loaded together with runtime CSS directly? For example, to addChild() them to application stage?
# bart February 16, 2007 12:29 PM

I'm trying to figure out how to seemlessly display my theme's gradient (or background image) right at the start of the load phase and all the way through initialization. In other words, I don't want the default theme during the load, with a visual "glitch" when my custom theme kicks in.

Here's what I've learned so far:

- If you set the style on the app's "initialize" or "preinitialize", those changes aren't visible during the app's loading phase, so you end up getting the default theme until the loading is complete.

- The backgroundColor property takes effect right at the start of loading, but backgroundGradientColors (to get a nice gradient during the load) doesn't seem to work.

- The backgroundImage property will display an image after about 1 second (into the load), but the image doesn't fill the window (isn't scaled) until after the load.

Anyone care to share?
# Anonymous April 2, 2007 10:05 AM

Very helpful and in depth. Now, can this be done automatically in Flex Builder? Maybe the the compiler args?
# Anonymous April 2, 2007 1:07 PM

Oops...I just saw the comment at the top for builder. Very nice!
# Anonymous June 5, 2007 4:17 AM

yea,there is also a good sample "FlexStore" which can be found on the flex start page using runtime css swf file.
what u blog made me more clear with "Runtime CSS",thank u very much!
Expect more tips of Flex.

Davy True
China
# Anonymous July 11, 2007 2:56 PM

Bart, I have the exact same problem!

But for my part, I'm using it to load fonts at runtime, so you can imagine how frustrating it is to see the default background flicking like this when I load a new font.

Does anyone have a quick fix for this? Ted?

Thanks!

David C.
# Anonymous July 12, 2007 6:20 AM

Found my answer, and it was very simple :)

The second parameter of the StyleManager.loadStyleDeclaration is "update", which is describe in the help : update:Boolean (default = true) — Set to true to force an immediate update of the styles. Set to false to avoid an immediate update of the styles in the application.

So, just set it to false and the background will not be updated and will not flick/glitch when the style is loaded.

David Côté ;)
# sweta October 5, 2007 2:19 AM

I am facing some problem regarding runtime css.

I wants to change the color scheme of the Flex UI, this could be any color they see fit at the time. Would I need to handle this via say XML and run some setStyles at init time or can runtime CSS work in this case too?
I want to compile css file to swf file at run time.

Please help me.
# Akhil Babbar October 22, 2007 10:55 PM

I get an error when i try to follow the above steps.....

Please Help me out...

<------------------------------->

1 Error found.

Error /main.mxml:6
Call to a possibly undefined method loadStyleDeclarations through a reference with static type Class.

5: creationComplete="initApp();"
6: initialize="StyleManager.loadStyleDeclarations( 'MacOSX.swf',true)"
7: >
# Marcel Panse November 20, 2007 1:12 AM

Hey Ted, i have a (pretty large) flex application which uses runtime styling. But when i check the console log i see a lot of stuff like:
[SWF] styles/vendor_5001_class_styles.swf - 228 bytes after decompression

but like 10times in a row within a second (for example when i turn a page in my application)

I suppose this has to do with loading stuff from the compiled css, but it slows my application a lot.

Any ideas?
# Tink March 6, 2008 5:22 AM

"If you are using Flex Builder 2.0.1 just right-click on the CSS file and press "Compile CSS to SWF". The swf file will be put into the 'bin' directory."

This option is disabled in Library projects which isn't very useful.

https://bugs.adobe.com/jira/browse/FB-12207
# Gary Mangum March 31, 2008 7:35 AM

Do you know how to compile a CSS to SWF using Flex Ant Tasks? Everything that I've attempted has not worked.

Thanks
# Gary Mangum April 2, 2008 6:56 AM

OK, I don't know why I was having trouble, this works great!

<mxmlc file="myStyles.css" output="myStyles.swf"/>