The following example shows how you can dynamically load a cascading style sheet SWF into your Flex application using the static StyleManager.loadStyleDeclarations() method.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/12/loading-cascading-style-sheets-on-the-fly-using-the-flex-stylemanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
private function loadStyles(styleURL:String):void {
StyleManager.loadStyleDeclarations(styleURL);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:ComboBox id="comboBox"
prompt="Please select a style"
change="loadStyles(comboBox.selectedItem.data);">
<mx:dataProvider>
<mx:Array>
<mx:Object label="red" data="styles/red.swf" />
<mx:Object label="green" data="styles/green.swf" />
<mx:Object label="blue" data="styles/blue.swf" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:ApplicationControlBar>
</mx:Application>
View source is enabled in the following example.
Next, in Flex Builder, create three CSS files (red.css, green.css, and blue.css) and copy/paste the following contents into each respective file:
/* red.css */
Application {
backgroundColor: red;
}
/* green.css */
Application {
backgroundColor: haloGreen;
}
/* blue.css */
Application {
backgroundColor: haloBlue;
}
Finally, right-click each CSS file in the Flex Navigator tab and select “Compile CSS to SWF” from the context menu.
Hi Peter,
That’s really nice example, I have a question which is not directly related to this example:
I have an app that dynamically loads a compiled css swf at app startup.
Well, it works just fune, but it would be much more slick to load swf before the flex preloader completes. Do you think this can be done without changing the flex framework (yuk!) ?
Thanks,
Almog.
I’m from indonesia. It’s very interesting to see this article. I like it. I was looking for the article like tis everywhere on net. I want to permit with you, can you give me a permission to copy your article to my homework please.??
Sorry if my english bad because i only can speak english a little.
Regards
Deden
Deden,
Sure, go ahead.
Peter
Hi,
Great, simple example. I’m working on something similar; an application that loads runtime css.swf. When the loader and css.swf are online it works fine, and when the loader and the css.swf are offline it works fine. However when the loader is offline and the css.swf is online I get the following error. This situation is desired as it contracts me to use the ‘live’ styles while I do updates on my loader from my desktop. I can recopy my online css.swf to the offline as a workaround, but that is less desirable. I want to fix the issue so that the loader can be offline and the css.swf can be online. Typically in flash this type of operation (for everything except this css.swf workflow) works fine in my experience. As far as I can tell its because the css.swf does not ‘allow’ itself, security-wise to be loaded. The css.swf has no as3 scope of course (because its based in a *.css file) so I can’t use Security.allowDomain(’*'). Likewise it doesn’t call a crossdomain automatically either.
ERROR:
Error: Unable to load style(SWF is not a loadable module): http://images50.neopets.com/style_set_manager/styles_EN_v1.swf.
QUESTION:
Anyone know how to get this to work? I’ll check back to this blog daily, and post the solution here if I find it elsewhere.
Loading a CSS Font Swfs from a remote domain, getting this error:
Unable to load style(SWF is not a loadable module)
Please post solution asap ;)
I want to attach an event listener to know when the style is loaded. Problem is where to attach it?
Something like this:
myApplication.addEventListener(StyleEvent.COMPLETE,this.stylesLoaded); function stylesLoaded(e:StyleEvent):void { Do something... }var myEvent:IEventDispatcher = StyleManager.loadStyleDeclarations("./css/stylz.swf"); myEvent.addEventListener(StyleEvent.COMPLETE,this.stylesLoaded);