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 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"?>

<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;

public class ButtonSkinAS extends ProgrammaticSkin {

// Constructor.

public function ButtonSkinAS() {

super();

}

override protected function 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.

Ads