How to dynamically switch to the Yahoo! Flex Skin at runtime

Yahoo Flex Skin

The Yahoo! Flex Skin is a lovely minimalist skin by the good folks on Yahoo!'s Flash team. However, it has an issue that you need to work around if you want to load it in dynamically at runtime. It's a simple thing, but I thought I'd document it here in hopes that it will help save someone else a few minutes of confusion.

To switch to a different skin at runtime in Flex, you use StyleManager. loadStyleDeclarations, which takes a reference to a CSS file compiled into a SWF as its first (and only required) argument. When you look at the source for the Yahoo! Flex Skin, you might be fooled into thinking that the compiled SWF has been supplied for you since there are two files, yflexskin.css and yflexskin.swf in the folder.

yflexskin.swf, however, is the SWF that contains the assets referenced in the CSS file.

Since there is already a SWF file with the same name as the CSS file in the folder, Flex does not/can not compile the CSS file (as it would overwrite the existing SWF). This leads to a runtime error complaining that the SWF file cannot be loaded: 

Error: Unable to load style(SWF is not a loadable module)

Here's the workaround:

  1. Rename the asset SWF to something else, like yflexskinassets.swf.
  2. Do a find and replace in yflexskin.css to rename yflexskin.swf to yflexskinassets.swf
  3. In Flex Builder, right-click yflexskin.css and select Compile CSS to SWF

Now, when you want to switch to it at runtime, you can simply: 

StyleManager.loadStyleDeclarations( "yflexskin/yflexskin.swf");

Simple, but may not be initially obvious. Hope this helps!

Comments