Loading style sheets at run time (from adobe)

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:

1. Write a CSS file for your application.
2. Compile the CSS file in a SWF file by using the mxmlc compiler.
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.

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

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:

1. Extract the CSS file from the SWC file using PKZip or similar archiving utility; for example:

   $ unzip haloclassic.swc defaults.css
       

2. (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
       

3. 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.

posted on 2008-09-19 14:49 gembin 阅读(519) 评论(0)  编辑  收藏 所属分类: Flex