May 26th, 2012

Adding an Icon inside a Button Component

More articles by »
Written by: Nouman Naveed
Tags: ,
adobe flex spark iconbutton

There are many times while doing your project development when you want to display an icon inside your cute Spark Button. To achieve this requirement we need to extend s:Button with an ActionScript class and add the necessary properties and skin parts.

Skin parts are referenced in a component using the [SkinPart] metadata tag. This tag has an option required property that specifies whether the skin part is optional and is set to true by default. The following components extends s:Button using ActionScript and adds two additional properties: icon, which is an instance of mx:Image, and source, a String.

Icon is defined as an optional skin part and will be added to the skin class further on in the recipe. Because, in the lifecycle of the component, the source property can be defined before icon has been added to the displayList of the button, getter and setter functions are used for the source property and the value is only assigned to icon if it is defined.

The Protected function partAdded() is also overridden to assign the source property to icon when it is added to the displayList. Her’s the code:

package components
import mx.controls.Image;

import spark.components.Button;

public class IconButton extends Button
protected var _source:String;
public var icon:Image;

public function get source():String
return _source;

public function set source(val:String):void{

override protected function partAdded(partName:String, instance:Object):void{

The skin class contains a simple rectangle, an instance of s:Label, and an instance of mx:Image whith an id of icon. It is important to remember that the property names of the skin parts declared in the host component must match the ids of the corresponding components in the skin class:

<?xml version=”1.0″ encoding=”utf-8″?>
<s:SparkSkin xmlns:fx=”http://ns.adobe.com/mxml/2009″
minWidth=”21″ minHeight=”30″
xmlsns:mx=”library://ns.adobe.com/flex/mx” xmlns:mx=”library://ns.adobe.com/flex/mx”>


<!– states –>
<s:State name=”up” />
<s:State name=”over” />
<s:State name=”down” />
<s:State name=”disabled” />

<s:SolidColor id=”fillColor” color=”#FFFFFF” color.over=”#DDDDDD”/>
<s:SolidColorStroke id=”strokeColor” color=”#333333″ color.over=”#111111″ weight=”2″/>

<s:Rect top=”0″ left=”0″ bottom=”0″ right=”0″ radiusX=”15″ radiusY=”15″ fill=”{fillColor}” stroke=”{strokeColor}”/>

<s:Group left=”8″ right=”25″ top=”2″ bottom=”2″>
<s:HorizontalLayout verticalAlign=”middle” gap=”8″/>

<mx:Image id=”icon” maxHeight=”24″/>
<s:Label id=”labelDisplay” left=”25″ right=”25″ top=”9″ bottom=”6″ color=”{strokeColor.color}” fontWeight=”bold”/>


About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.



Apache Flex 4.10.0 Available

Here comes Apache Flex 4.10. This project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.10.0. This release makes some important improvements ...
by Nouman Naveed



Be the first to comment!

Leave a Reply

Your email address will not be published. Required fields are marked *