jump to navigation

Loading CSS style sheets at run time in Flex3 September 1, 2010

Posted by Tournas Dimitrios in Flex.
trackback

This previous article demonstrated the basics of changing the look-and-feel of your Flex application by introducing the concepts of CSS .One drawback to that approach shown in that article is that the CSS files are compiled into the applications . This means that any changes to the applications style sheet require that the application be recompiled . A better approach is the ability to load Css at runtime.

Benefits of Runtime CSS:

There are a number of benefits to being able  to change Css at runtime . Chief among them is more rapid maintenance , in that a designer can simply deploy a new version of the CSS to the web server eliminating the need to recompile and redeploy the application . Another benefit  is it offers a much easier approach for deploying a single application that can be presented with multiple skins without the need for separately deployed applications for each skin . 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

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.(Well this is not 100% true 🙂  , later on this article i will show you that there is an solution for this ) .

Loading style sheets at run time is a three-step process:

  1. Write a CSS file for your application.
  2. Compile the CSS file into a SWF file.
  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.

Before you can load a style sheet at run time, you must compile the style sheet into a SWF file. The style sheet that you compile into a SWF file must use a .css filename extension.

To compile the CSS file into a SWF file, you use the mxmlc command-line compiler or Flex Builder’s 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 by using the mxmlc command-line compiler:

mxmlc BasicStyles.css

Don’t panic the Flex IDE provides an simple mechanism for converting an existing CSS style sheet into a SWF , with which Flash Player can easily interact . All you need to do is right click the CSS file in the Flex Navigation view , and choose the Compile To SWF option as seen in the following figure .

The code in Listing A, Listing B, and Listing C demonstrates how to create two different CSS files and switch between them and the default style, all at run-time.

Listing A: RuntimeCSSMain.mxml :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.styles.StyleManager;
import mx.events.StyleEvent;

private var lastCSS:String;
private function changeCSS( name:String ):void
{
// If you do not unload the last style
// previous style settings will be in effect
unloadCSS( false );
var styleEvent:IEventDispatcher =
StyleManager.loadStyleDeclarations( name, true );
lastCSS = name;
}
private function unloadCSS( updateFlag:Boolean ):void
{
if( lastCSS )
StyleManager.unloadStyleDeclarations( lastCSS, updateFlag );
}
]]>
</mx:Script>

<mx:Panel id="pnlApp" title="Sample Application" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" layout="vertical" horizontalAlign="center">
<mx:Label text="Please fill out the form below and click on Login!" />
<mx:Form>
<mx:FormItem label="Username:">
<mx:TextInput id="txtUsername" />
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="txtPassword" displayAsPassword="true" />
</mx:FormItem>
</mx:Form>
<mx:Button id="btnTrace" label="Login" styleName="sLogin" />
</mx:Panel>
<mx:HBox>
<mx:Button id="btnUnload" cornerRadius="0" click="unloadCSS( true )" label="one"
fillColors="[#7C929D,#CCCCCC]" />
<mx:Button id="btnBlue" cornerRadius="0" click="changeCSS( 'blueCSS.swf' )" label=”two” fillColors=”[#336699,#5588BB]” />
<mx:Button id=”btnRed” cornerRadius=”0″ click=”changeCSS( ‘redCSS.swf’ )” label=”three” fillColors=”[#993333,#BB5555]” />
</mx:HBox>
</mx:Application>

Listing : blueCSS.css :

/* CSS file */
Application {
backgroundImage: "";
backgroundColor: #336699;
}

Panel {
cornerRadius: 0;
backgroundColor: #DDDDDD;
borderStyle: none;
}

.sLogin {
fillColors: #777777,#000000;
color: #DDDDDD;
}

Listing C: redCSS.css :

/* CSS file */
Application {
backgroundImage: "";
backgroundColor: #993333;
}

Panel {
cornerRadius: 6;
backgroundAlpha: 0.2;
backgroundColor: #DDDDDD;
}

Label {
color: #FFFFFF;
fontWeight: bold;
fontStyle: italic;
}

Create a Flex Builder project and put the Listing A , Listing B , and Listing C files into the project root folder. Ensure that the CSS files have the Compile CSS to SWF context menu item selected and then run the application. The figures shows the initial state of the application and the three buttons on the bottom labeled one, two, and three. Button two (center) and button three (far right) are implemented to load the blueCSS.swf and redCSS.swf dynamically when each respective button is clicked.

It is important to note that if the code did not unload the previous style each time the button were clicked, it would be possible to have leftover styles hanging around. For example, comment out the unloadCSS ( false ) and lastCSS = name; code lines in the RuntimeCSSMain.mxml, as shown here:

...
private function changeCSS( name:String ):void
{
// If you do not unload the last style
// previous style settings will be in effect
// unloadCSS( false );
var styleEvent:IEventDispatcher =
StyleManager.loadStyleDeclarations( name, true );
//lastCSS = name;
}
...

Now, run the application and click button three (far right) first, then button two (center). The redCSS.swf sets the Label’s font color style to white and the font weight to bold. When clicking button two, the blueCSS.swf is loaded, but the Label’s style is not defined explicitly. Therefore, it is not reset, and stays bold and white.

With the ability to load style resources at run-time, developers now have more options to approach lazy-loading SWF applications.

Previously I mentioned  that 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 . After googling I found this Class made from Ruben . This  class enables you to load “Cascading Style Sheets”CSS files into your flex application during runtime, a functionality Actionscript3.0 lacks. It’s actually as easy as this:

var loader:CSSLoader = new CSSLoader();
loader.load("mycssfile.css", "nameToBeGiven", displayObj1, displayObj2);

Go to Ruben’s Blog and discover this nice Class .

Further reading :

Loading style sheets at run time by Adobe

Advertisements

Comments»

1. Alejandro - October 4, 2011

Tks. Good Information, this is I need..!!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s