You are here:
Home Flex

Flex Tutorials

Flex Runtime CSS

Written by Philip

Why Skin a Flex Component at Runtime?

There comes a time in everyone's life when they need to skin Flex components within their application or website at runtime.

A common example of this could be a user clicks a button on a site, which selects different styles for the website.

We can achieve this by using Flex CSS, compiling this to a SWF, and then loading this SWF in at runtime, and if the user
wishes to change skin, we just load in a different SWF. It's harder than it sounds! Trust me !

Flex Skinning using Runtime CSS

As mentioned above we use Flex CSS, compile it to a SWF and then load in this SWF at runtime.

Flex CSS is great for styling although if you're coming from a HTML & CSS background, it doesn't
entirely compare to 'normal' css, but lets not get into this!

Flex CSS is used to style Flex components in various ways. It can be used quite simply to set a flex component's color,
rollover colors, or other styles on that flex component i.e.

color: #0033ff;
textRollOverColor: #003366;

But it can also be used to set graphical skins for flex components as well. Which is pretty neat.

up-skin: Embed("assets/images/up1.jpg");
over-skin: Embed("assets/images/over1.jpg");
down-skin: Embed("assets/images/down1.jpg");

Therefore skinning using Flex CSS can be used to create a wide variety of great looking skins for flex components!

Let's get started making our first Flex CSS runtime skin! Go ahead and create a Flex Button and link it to a style within
a CSS file, if you've done this before jump to Setting up the Runtime CSS.

Building the Flex Component

For the example we'll be skining a flex button component at runtime. I'm sure you've created a button before. So to start create a button and give it a styleName, which we'll use to link the button to the CSS.

<mx:Button styleName="Button" />

Create the CSS

Step 2 : Create the CSS. Right click and select New CSS, if you're using Flex Builder. If you're using another
IDE, ie. Flash Develop, FDT etc. You will need to create you're CSS file.

Once created add paths to the up, over and down skins for your flex button component, I usually place
my skins into an assets folder. But it's up to you where you place yours.

So you will have something like as follows within your CSS.

.Button 
{
 up-skin: Embed("assets/images/up1.jpg");
 over-skin: Embed("assets/images/over1.jpg");
 down-skin: Embed("assets/images/down1.jpg")    
}

Link the Flex Button to the CSS Style

Within your MXML use the following to link the flex button to the style.

<mx:Style source="/assets/css/runtime.css"/>

Run it and you should see the Flex Button with the styles you have setup within the CSS upon the Flex Button, it should look
pretty cool!

Setting up the Runtime CSS

Now for the fun part. Remove the link to the CSS file from your MXML. ie. Remove

<mx:Style source="/assets/css/runtime.css"/>

Right Click on the css you have created and select "Compile CSS to SWF". Yes! this does mean that
your CSS will get compiled to a SWF that you can use at runtime! AWESOME.

You can check that it has been compiled to a SWF within your file system. It should be in the same directory
as your runtime.css

Now we have the runtime.swf! We need to load this in.

Loading in the Compiled CSS Runtime SWF

This is quite simple, now that we have the swf all we have to do is load it in, and set the styles within
the compiled SWF that has been compiled from the CSS onto the Flex Button. We do this using the Flex StyleManager.

Step 1 : Create a Load Button

You know how to do this ! :)

<mx:Button id="loadButton1" label="Load Runtime Skin 1" click="loadButtonClickHandler(event)" />

Step 2 : Use the StyleManager to load in the Compiled SWF.

private function loadButtonClickHandler(event:Event):void
{
 StyleManager.loadStyleDeclarations("assets/css/runtime.swf");            
}

Now run your application. Hit the load button that you've created and the Flex application should go off and get the SWf that
contains the compiled CSS. The CSS within the compiled SWF will then be used to style the button you've created!

Congratulations You've just created your first runtime skinable application!

Testing we can actaully change the button styles at runtime.

Step 1 : Create another CSS file to be used as a skin for the button.
Step 2 : Set this to compile the CSS as a SWF.
Step 3 : Add another button within the Flex application to load the second SWF upon the second button being clicked.
Step 4 : Now click on your first load button to load the first runtime CSS SWF, and click on the second to load
your second runtime CSS SWF. You should find that the button styles are now changing on the fly at runtime!

Drawbacks of using Runtime CSS

There are a couple of drawbacks to using runtime CSS of course, as with anything. The first is that
the compiled CSS SWF has to be loaded in, so you will need to make sure that the compiled SWF is not overloaded with .jpg's, gif's,
or other swf's.

The second drawback is that you cannot control SWF's within the flex css fully ie. if you have an annimation within
the SWF that you are say using as an up skin ie.

up-skin: Embed("assets/images/up1.swf");

then you will not be able to control the annimation within this swf, as Flex cannot read the actionscript unless
you are using SWFLoader, therefore any annimation within the SWF will just keep playing continously.

I've also noticed that trying to compile the css to a swf just by using the compiler within the SDK. ie. mxmlc runtime.css is
annoying as for reason it keeps giving me Invalid Embed directive in stylesheet.

 

Flex Singleton Class

Written by Philip

The Singleton class, which can be used in Flex / Flash, which are of course coded in AS3, is designed to restrict instantiation of a class to only one object. It's great when you only want one object across the whole of your application. An example could be you load in a load of xml data and you want to store the values of the xml for use throughout the application. In Flex / Flash we can write a Singleton Class like the following. We use the getInstance() to return the object created.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
package com.howtocode
{
	[Bindable]
	public class Singleton
	{
 
        	/** Only one instance of the model locator **/
 
        	private static var instance:Singleton = new Singleton();
 
        	/** Bindable Data **/
 
        	public var flexData:String = "SuperApp";
		public var userScore:int = 0;
 
       	 	public function Singleton()
		{
			if(instance)
			{
				throw new Error ("We cannot create a new instance.
 Please use Singleton.getInstance()");
			}
		}
 
		public static function getInstance():Singleton
		{
			return instance;
		}
	}
}


Singleton Class Access

To access a variable from the Singleton class we use the following.

 

1
2
3
4
5
6
7
8
9
 
import com.howtocode.Singleton;
 
private var model:Singleton = Singleton.getInstance();
 
// To retrieve flexData String from Singleton Class use model.flexData
trace(model.flexData);
 
// To set flexData String in Singleton Class use the following
model.flexData = "FlexApp"

 

You can of course do something really cool which is place something like place

 

1
 
<mx:Button id="flexButton" label="{model.flexData}">

 

into you're MXML and when flexData is changed in your Singleton Class it automatically updates you're MXML as we've set the whole Singleton Class as [bindable].

 

Deferred Instantiation

Written by Philip

Deferred Instantiation

Article on Flex Application Performance and how to improve it.

http://www.adobe.com/devnet/flex/articles/client_perf_06.html

   

Flash Memory Usage

Written by Philip

Website / Blog : ( Your Website / Blog URL ie. www.how-to-code.com )

Contact : ( Your Email ie. This e-mail address is being protected from spambots. You need JavaScript enabled to view it )

Detect Memory Usage in Flash and Flex SWFs

http://www.websector.de/blog/2007/10/01/detecting-memory-leaks-in-flash-or-flex-applications-using-wsmonitor/

 

 

Flex 3 Component Explorer

Website / Blog : www.how-to-code.com

Contact : This e-mail address is being protected from spambots. You need JavaScript enabled to view it

The Flex 3 Component Explorer is a good way to browse through Flex 3 Components. http://examples.adobe.com/flex3/componentexplorer/explorer.html

If you're looking at this you might be interested in looking at Tour de Flex as well! Which is another component based explorer apart from with 3rd party components that are amazing!

   

More Articles...

Page 1 of 2