Run time CSS loading guide

Why loading at runtime?

By loading style sheets at run time, you can load images (for graphical skins), fonts, type and class selectors, and programmatic skins into your Flex application without embedding them at compile time. This lets skins and fonts be partitioned into separate SWF files, away from the main application. As a result, the application’s SWF file size is smaller, which reduces the initial download time. However, the first time a run-time style sheet is used, it takes longer for the styles and skins to be applied because Flex must download the necessary CSS-based SWF file.

Three steps process to runtime CSS Style Sheets loading

1. Write a CSS file for your application.
2. Compile the CSS file in a SWF file by using the mxmlc compiler or right click on the css file in Flex Builder and select compile CSS to SWF. You can locate the swf file in the bin directory
3. Call the StyleManager.loadStyleDeclarations() method in your Flex application. This method loads the CSS-based SWF file into your application. When this method executes, Flex loads the new CSSStyleDeclarations into the StyleManager.

Insert the below code into the <mx:Application/> tag

initialize = “StyleManager.loadStyleDeclarations( ‘style1CSS.swf’ )“

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
layout=”absolute”
initialize=”StyleManager.loadStyleDeclarations( ‘style1CSS.swf’ )”
viewSourceURL=”srcview/index.html”>

 

Let me know if you have any clarification.