Flex4: if I want different icons, should I create a skin class for each button ?

Question

hi,

i have a sequence of buttons and each button has its own icon. I was wondering if I have to create a Spark skin file for each button in order to assign its icon.

thanks

Answer 1

You don't have to create separate skins, you could make 1 skin and 1 class (that extends Button) with a property you can set to determine which icon to draw based on the button.

You can extend the button class like this

package com.components
{
    import spark.components.Button;     

    //icons
    [Style(name="iconImg",type="*")]

    public class IconButton extends Button
    {
        public function IconButton()
        {
            super();
        }
    }
}

At this point you'd have a set of IconButtons and you'd need to set the iconImg property for each.

Declare the icon

[Embed('assets/bookmarkIcon.png')]
public static const icon_bookmark:Class;

And the set the iconImg property

<components:IconButton id="ibBookmark"
               iconImg="{icon_bookmark}"
               skinClass="com.skins.IconButtonSkin"                        
               click="" /> 

Then in your skin you use the property like this

<mx:Image id="icon" source="{hostComponent.getStyle('iconImg')}"  />