Home Tutorial Flex Flex-components Flex Skin index

 
 

Share on Google+Share on Google+
Flex Skin index
Posted on: March 11, 2010 at 12:00 AM
Advertisement
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;

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. 

 

 

Advertisement

Related Tags for Flex Skin index:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: March 11, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com