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):
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;
}
}
}
 |
[...] here’s a css code sample of how to embed a bitmap image as a skin: LinkButton { cornerRadius: 0; overSkin: Embed(’./assets/images/skin.png’); downSkin: Embed(’./assets/images/skin.png’); textRollOverColor: #ffffff; textSelectedColor: #ffffff; letterSpacing: .5; fontFamily: myArial; fontSize: 13; } further reading: http://www.thomasdecaux.net/flex-tips/skin-flex-component-with-images.html [...] |
| How to UnFlex Your Flex – Making Flex applications look and feel unique wrote on December 19, 2008 at 9:12 am | |
Write your Comment
One Comment - “Skin Flex component with Images”