Search Flex Samples

Loading css when your application starts up

In Flex 2.0.1, Flex introduced a feature enabling runtime css. This meant that your application could load a different stylesheet at runtime using the method StyleManager.loadStyleDeclaration(url). This allows your Application’s swf to be much smaller if you had multiple stylesheets for one Application that may or may not be used. Unfortunately, you cannot load the css directly. Instead, you would need to compile the css using the Flex compiler. The compilation of a css file will create a swf file that can be specified as an argument to loadStyleDeclarations method. Here is the description of this method from the Flex livedocs:

public static function loadStyleDeclarations(url:String, update:Boolean = true, trustContent:Boolean = false, applicationDomain:ApplicationDomain = null, securityDomain:SecurityDomain = null):IEventDispatcher Loads a style SWF.

Parameters


url:String — Location of the style SWF.


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. This parameter is optional and defaults to true For more information about this parameter, see the description in the setStyleDeclaration() method.


trustContent:Boolean (default = false) — Obsolete, no longer used. This parameter is optional and defaults to false.


applicationDomain:ApplicationDomain (default = null) — The ApplicationDomain passed to the load() method of the IModuleInfo that loads the style SWF. This parameter is optional and defaults to null.


securityDomain:SecurityDomain(default = null) — The SecurityDomain passed to the load() method of the IModuleInfo that loads the style SWF. This parameter is optional and defaults to null.

Returns


IEventDispatcher — An IEventDispatcher implementation that supports StyleEvent.PROGRESS, StyleEvent.COMPLETE, and StyleEvent.ERROR.

So, how can you load css at runtime and not create any of the components in your application until the styles were loaded? You want to be sure that your components don’t show up on screen with default styles for a brief amount of time while the css is being loaded. There are probably a few ways to do this, but, here is one that I found that works.

1. Call StyleManager.loadStyleDeclarations(url) in the preinitialize handler for your

2. Make sure that your has a creationPolicy=”none”.

3. When, the StyleEvent.COMPLETE event is triggered after the call to loadStyleDeclarations, then, you can call createComponentsFromDescriptors(). This method will create all of the children of the container that it is called on.

Here is the code in the Application:


preinitialize=”changeTheme()” creationPolicy=”none”>

import mx.styles.StyleManager;
import mx.events.StyleEvent;

private function changeTheme(): void
{
var myevent:IEventDispatcher = StyleManager.loadStyleDeclarations(”Ice2.swf”);
myevent.addEventListener(StyleEvent.COMPLETE, createComponents);
}

private function createComponents(event:StyleEvent): void
{
createComponentsFromDescriptors();
}
]]>










Demo: Icetheme.swf, Ice2.swf

Source: Icetheme.mxml, Ice2.css

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples