Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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.
I was receiving the error: Unable to load style(Error #2036: Load Never Completed.
The CSS that I wanted to use is named SimplicityGray.swf
in my application I set my style this way:
StyleManager.loadStyleDeclarations(‘simplicitygray.swf’,true);
I was struggling to determine why the CSS couldn’t be found. Then I realized the name is case-sensitive.
I solved the problem by using:
StyleManager.loadStyleDeclarations(‘SimplicityGray.swf’,true);
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);Hi,
This is a great example. However, I see that that whenever I change the theme, the default theme shows up for a fraction of a second. Is there any way that can be removed. I want the transition to be smooth and direct. Please let me know if there is a solution to this.
cheers,
Jai,
You can get around the flicker of the default theme by doing the following:
1) In your Application tag, set creationPolicy=”none”
2) Set a preinitialize handler in your Application tag
3) Have the preinit handler load in your css file and set an oncomplete handler for the file
4) In the oncomplete handler, put this line of code: createComponentsFromDescriptors();
In short, this stops your application rendering until the css file is loaded.
HTH,
Mark
Cool I have been wondering how to get rif of that flicker.
Thanks guys!
Have you had any problems with wrapping in text controls (mx.controls.Text) when loading css at runtime? Using this method it reduces all my text controls’ content to one line whether they have explicit htmltext line breaks or they have a fixed width to force them to wrap on their own. I haven’t been able to find a solid work around ANYwhere. It’s drivin me crazy. Some insight would be greatly appreciated.
Thanks,
Trevor
Trevor,
I was having the same issue as you, and in lieu of having to redo things with several Text in a mass hack effort I refused to give up on solving it.
All that aside, the solution to our problem was actually hidden what Mark said above.
It’s the creationPolicy and order of operations. My current set up is:
1. Initialize Preloader
2. Clear everything
3. Create Preloader Assets
4. Start loading (Progress events begin dispatching)
5. Complete event is heard
6. Load Styles (Style progress events begin dispatching)
7. Styles loaded event is heard
8. Invoke Application.application.createComponentsFromDescriptors() (initProgress dispatching now)
9. Init complete
…
11. Preloader dispatches complete event
12. Application displays (correctly now)
Hopefully, you are in a position where you can easily rearrange the order that the preloader is doing things.
Best,
Matthew
Thats a kool example,
thanks alot
Is it possible to load in a CSS file (not .swf) at runtime and get the same behavior? Using Flex Hero.