Loading style sheets at run time
You can load style sheets at run time by using the StyleManager.
These style sheets take the form of SWF files that are dynamically
loaded while your Flex application runs.
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.
Loading style sheets at run time is a three-step process:
- Write a CSS file for your application.
- Compile the CSS file in a SWF file by using the mxmlc compiler.
- 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.
You can load multiple style sheets that define the same styles.
After you set a style, subsequent style sheets can overwrite previous
ones if they have common selectors. Styles loaded with run-time style
sheets do not completely replace compile-time styles, however. They
just override them until the run-time style sheets are unloaded. At
that point, Flex reverts to the compile-time style settings.
Compile-time style settings include any default styles sheets that were
loaded at compile time, theme files loaded by using the theme compiler option, and styles set by using the <mx:Style> block inside an MXML file.
Subtopics
Creating a run-time style sheet
Compiling the CSS-based SWF file
Loading style sheets at run time
Unloading style sheets at run time
Using run-time style sheets in custom components
Using theme SWC files as run-time style sheets
Creating a run-time style sheet
To load style sheets at run time, you must first create a style
sheet that is compiled into a SWF file. A run-time style sheet is like
any other style sheet. It can be a simple style sheet that sets basic
style properties, as the following example shows:
/* styles/runtime/assets/BasicStyles.css */
Button {
fontSize: 24;
color: #FF9933;
}
Label {
fontSize: 24;
color: #FF9933;
}
Or the style sheet can be a complex style sheet that embeds
programmatic and graphical skins, fonts, and other style properties,
and uses type and class selectors, as the following example shows:
/* styles/runtime/assets/ComplexStyles.css */
Application {
backgroundImage : "assets/greenBackground.gif";
theme-color: #9DBAEB;
}
Button {
fontFamily: Tahoma;
color: #000000;
fontSize: 11;
fontWeight: normal;
text-roll-over-color: #000000;
upSkin: Embed(source="../../../assets/orb_up_skin.gif");
overSkin: Embed(source="../../../assets/orb_over_skin.gif");
downSkin: Embed(source="../../../assets/orb_down_skin.gif");
}
.noMargins {
margin-right: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
horizontal-gap: 0;
vertical-gap: 0;
}
You cannot load an uncompiled CSS file into your Flex
application at run time. You must compile it into a SWF file before
loading it.
Compiling the CSS-based SWF file
Before you can load a style sheet at run time, you must compile the style sheet into a SWF file.
To compile the CSS file into a SWF file, you use the mxmlc
command-line compiler. The default result of the compilation is a SWF
file with the same name as the CSS file, but with the .swf extension.
The following example produces the BasicStyles.swf file:
> mxmlc /skins/runtime/BasicStyles.css
The style sheet that you compile into a SWF file must use a .css filename extension.
When you compile your Flex application, the compiler does not
perform any compile-time link checking against the CSS-based SWF files
used by the application. This means that you are not required to create
the SWF file before you compile your main application.
Loading style sheets at run time
You load a CSS-based SWF file at run time by using the StyleManager's loadStyleDeclarations() method. To use this method, you must import the mx.core.StyleManager class.
The following example loads a style sheet when you click the button:
<?xml version="1.0"?>
<!-- styles/runtime/BasicApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
public function applyRuntimeStyleSheet():void {
StyleManager.loadStyleDeclarations("assets/BasicStyles.swf")
}
]]>
</mx:Script>
<mx:Label text="Click the button to load a new CSS-based SWF file"/>
<mx:Button id="b1" label="Click Me" click="applyRuntimeStyleSheet()"/>
</mx:Application>
The first parameter of the loadStyleDeclarations() method is the location of the style sheet to load. The location can be local or remote.
The following example shows loading a local and a remote SWF file:
// Load a locally-accessible style sheet:
StyleManager.loadStyleDeclarations("assets/LocalStyles.swf");
// Load a remote style sheet:
StyleManager.loadStyleDeclarations("http://www.domain2.com/styles/RemoteStyles.swf", true, true);
If the style sheet is local (from the same domain as the
loading application), you can load it without any additional settings.
If the location of the style sheet is remote (in any domain that is not
an exact match of the loading application's domain), you must set the
third parameter of the loadStyleDeclarations() method, trustContent, to true.
Loading remote style sheets does not require a crossdomain.xml file
that gives the loading application permission to load the SWF file.
Also, to use remote style sheets, you must compile the loading application with network access (have the use-network compiler property set to true,
the default). If you compile and run the application on a local file
system, you might not be able to load a remotely accessible SWF file.
The loadStyleDeclarations() method returns an instance
of the IEventDispatcher class. You can use this object to trigger
events based on the success of the style sheet's loading. You have
access to the StyleEvent.PROGRESS, StyleEvent.COMPLETE, and StyleEvent.ERROR events of the loading process.
The following application calls a method when the style sheet finishes loading:
<?xml version="1.0"?>
<!-- styles/runtime/StylesEventApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.events.StyleEvent;
public function init():void {
var myEvent:IEventDispatcher =
StyleManager.loadStyleDeclarations("assets/ACBStyles.swf");
myEvent.addEventListener(StyleEvent.COMPLETE, getImage);
}
private function getImage(event:StyleEvent):void {
map1.source = acb.getStyle("dottedMap");
}
]]>
</mx:Script>
<mx:ApplicationControlBar id="acb" width="100%" styleName="homeMap">
<mx:Image id="map1"/>
<mx:Button label="Submit"/>
</mx:ApplicationControlBar>
</mx:Application>
The second parameter of the loadStyleDeclarations() method is update. Set the update parameter to true to force an immediate update of the styles. Set it to false
to avoid an immediate update of the styles in the application. The
styles are updated the next time you call this method or the unloadStyleDeclarations() method with the update property set to true.
Each time you call the loadStyleDeclarations() method with the update parameter set to true,
Adobe Flash Player reapplies all styles to the display list, which can
degrade performance. If you load multiple CSS-based SWF files at the
same time, you should set the update parameter to false
for all but the last call to this method. As a result, Flash Player
only applies the styles once for all new style SWF files rather than
once for each new style SWF.
The following example loads three style SWF files, but does not apply them until the third one is loaded:
<?xml version="1.0"?>
<!-- styles/runtime/DelayUpdates.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.events.StyleEvent;
public function init():void {
StyleManager.loadStyleDeclarations(
"assets/ButtonStyles.swf", false);
var myEvent:IEventDispatcher =
StyleManager.loadStyleDeclarations(
"assets/LabelStyles.swf", false);
myEvent.addEventListener(StyleEvent.COMPLETE, doUpdate);
}
public function doUpdate(event:StyleEvent):void {
StyleManager.loadStyleDeclarations(
"assets/ACBStyles.swf", true);
}
]]>
</mx:Script>
<mx:Label text="This is a label"/>
<mx:ApplicationControlBar id="acb" width="100%">
<mx:Button label="Submit"/>
</mx:ApplicationControlBar>
</mx:Application>
Unloading style sheets at run time
You can unload a style sheet that you loaded at run time. You do this by using the StyleManager's unloadStyleDeclarations()
method. The result of this method is that all style properties set by
the specified style SWF files are returned to their defaults.
The following example loads and unloads a style SWF when you toggle the check box:
<?xml version="1.0"?>
<!-- styles/runtime/UnloadStyleSheets.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
public function toggleStyleSheet():void {
if (cb1.selected == true) {
StyleManager.loadStyleDeclarations(
"assets/ButtonStyles.swf", true, false)
StyleManager.loadStyleDeclarations(
"assets/LabelStyles.swf", true, false)
} else {
StyleManager.unloadStyleDeclarations(
"assets/ButtonStyles.swf", true);
StyleManager.unloadStyleDeclarations(
"assets/LabelStyles.swf", true);
}
}
]]>
</mx:Script>
<mx:Button id="b1" label="Click Me"/>
<mx:Label id="l1" text="Click the button"/>
<mx:CheckBox id="cb1"
label="Load style sheet"
click="toggleStyleSheet()"
selected="false"
/>
</mx:Application>
Using run-time style sheets in custom components
You can use run-time style sheets in custom components. To do this, you generally call the loadStyleDeclaration() method after the component is initialized. If the style sheet contains class selectors, you then apply them by setting the styleName property.
The following example defines style properties and skins in a class selector named specialStyle:
/* styles/runtime/assets/CustomComponentStyles.css */
.specialStyle {
fontSize: 24;
color: #FF9933;
upSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyUpSkin");
overSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyOverSkin");
downSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyDownSkin");
}
The following example custom component loads this style sheet
and applies the specialStyle class selector to itself during
initialization:
// styles/runtime/MyButton.as -->
package {
import mx.controls.Button;
import mx.events.*;
import mx.styles.StyleManager;
public class MyButton extends Button {
public function MyButton() {
addEventListener(FlexEvent.INITIALIZE,
initializeHandler);
}
// Gets called when the component has been initialized
private function initializeHandler(event:FlexEvent):void {
StyleManager.loadStyleDeclarations(
"assets/CustomComponentStyles.swf");
this.styleName = "specialStyle";
}
}
}
Using theme SWC files as run-time style sheets
If you have an existing theme SWC file, you can use it as a run-time
style sheet. To do this, you must extract the CSS file from the theme
SWC file. You then compile the style SWF file by passing the remaining
SWC file as a library.
The following steps show this process using the command line:
- Extract the CSS file from the SWC file using PKZip or similar archiving utility; for example:
$ unzip haloclassic.swc defaults.css
- (Optional) Rename the CSS file to a meaningful
name. This is the name of your style SWF file. The following example
renames the defaults.css file to haloclassic.css:
$ mv defaults.css haloclassic.css
- Compile the style SWF file. Add the theme SWC file to the style SWF file by using the
include-libraries option, as the following example shows:
$ mxmlc -include-libraries=haloclassic.swc haloclassic.css
If you have multiple CSS files inside a theme SWC file, you must extract all of them before compiling the style SWF file.