Flex Skin index

Skin is the process of changing component appearance when the component get
event by the user by modifying or replacing its visual elements. It is used to
provide more attractive visual components.

Skin Component in flex :

Skin is the process of changing component appearance when the component get event by the user by modifying or replacing its visual elements. It is used to provide more attractive visual components. There are three types of skins in flex.

1. Graphical skin : This skin are applying through Images that define the appearance of the skin.

Graphical skin example :-

<?xml version="1.0"?>

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Style>

LinkButton
{

upSkin:
Embed("assets/button.jpeg");

over-skin:
Embed("assets/button1.jpeg");

down-skin:
Embed("assets/button2.jpeg");

}

</mx:Style>

<mx:Panel
width="300" height="300">

<mx:LinkButton
id="linkbutton"
label="Link Button Skin"/>

</mx:Panel>
</mx:Application>Output:

2. Programmatic skin :- We can apply this skin through action script program
or class. This class extends ProgrammaticSkin base class and override
updateDisplayList function for define the skin for a component.

Programmatic skin example :- This is the .mxml application code

<?xml version="1.0"?>

<!-- skins/ApplySimpleButtonSkinAS.mxml -->

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Style>

Button
{

down-skin:
ClassReference("ButtonSkinAS");

up-skin:
ClassReference("ButtonSkinAS");

}

</mx:Style>

<mx:Button
id="Button1" label="Click
Me"/>

</mx:Application>

and actionscript class code is that

package

{

// skins\ButtonUpSkinAS.as

import
mx.skins.ProgrammaticSkin;

publicclass
ButtonSkinAS extends
ProgrammaticSkin {

// Constructor.

publicfunction
ButtonSkinAS() {

super();

}

overrideprotectedfunction
updateDisplayList(unscaledWidth:Number,

unscaledHeight:Number):

void
{

graphics.lineStyle(10, 0x000000);

graphics.beginFill(0xffffff, 0.90);

// graphics.drawCircle(20,20,50);

graphics.drawRoundRect(1, 1, unscaledWidth, unscaledHeight, 20,
20);

}

}

}

Output :

3.Stateful skin:- you could add transitions between one state to the other or
change any property between states, without leaving Flex Builder. you can change
look and feel of the component to make state in this skining.