Skin Flex component with Images


1. What is a skin?

Skins let you change the control look without change the control behaviour. For example you can replace the CheckBox control look by the RadioButton look without change the checkbox behaviour!

But the feature the more interesting is the possibility to add Image in the look of the control.

2. Example

In this example, I have replaced the original CheckBox look by images (if selected) and by an AS class (if not selected) which draw nothing but inform the parent layout that the width of the skin measures 16 pixels (same width than the selected skin):

Download the SWF here

3. Sources

The source is just CSS code:

CheckBox {
downIcon: ClassReference(”NoSkin”);
overIcon: ClassReference(”NoSkin”);
upIcon: ClassReference(”NoSkin”);
selectedDownIcon: Embed(source=’check.gif’);
selectedOverIcon: Embed(source=’check.gif’);
selectedUpIcon: Embed(source=’check.gif’);
}

The NoSkin.as:


package
{
import mx.skins.ProgrammaticSkin;

public class NoSkin extends ProgrammaticSkin
{
public override function get measuredWidth():Number {
return 16;
}
}
}

Advertisements

~ by mjcprasad2000 on May 5, 2009.

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

 
%d bloggers like this: