Tip: Easy Spark Icon Button

I needed a simple spark button with only an icon – basically a bitmap made into a button. The problem is that I have lots of these buttons, each with a different icon – and all the skin samples use hard-coded assets.

UPDATE:  The new Flex 4.5 Hero has this feature built in, as described in this recent post.

Well, the old Button class used to have an icon style (it was called skin or upSkin) so I decided to bring back the icon style so I’d be able to reuse the same skin and pass a different icon to each instance.

Usage:

The IconButton class:

package cs
{
        // icon style
	[Style(name="icon",type="*")]
 
	public class IconButton extends Button
	{
	}
}

Now the generic icon button skin (IconBtnSkin):

	<fx:Metadata>
		[HostComponent("cc.IconButton")] 
	</fx:Metadata>
 
	<s:states> 
		<s:State name="up" /> 
		<s:State name="over" /> 
		<s:State name="down" /> 
		<s:State name="disabled" /> 
	</s:states>  
 
	<!-- icon -->
	<s:BitmapImage source="{hostComponent.getStyle('icon')}" />

To use, just use the skin with the IconButton class, and set the icon style to the asset of choice:

	<cc:IconButton skin="IconBtnSkin" icon="myAsset">

You can also couple the skin with the IconButton class explicitly by setting the skinClass from the constructor:

	setStyle("skinClass", "skins.IconBtnSkin");

6 thoughts on “Tip: Easy Spark Icon Button

  1. Could you post an example of this? I dont quite follow how to pass the unique icon in for each instance.

  2. I ended up doing something similar, based on your post, but rather than make a separate subclass, I just added some logic to the ButtonSkin.mxml that I was already using to show an icon if the “icon” style is declared.

    Replace the simple Label section in the ButtonSkin.mxml that you copied from the default ButtonSkin with something like this:

        <!-- layer 8: text -->
        <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
        <s:HGroup left="5"
                   right="5"
                   top="2"
                   bottom="5"
                   gap="2"
                   horizontalCenter="0"
                   verticalCenter="1">
                   <s:BitmapImage id="iconDisplay"
                           horizontalAlign="center"
                           verticalAlign="middle"
                           horizontalCenter="0"
                           verticalCenter="0"
                           filters="{[iconGlow]}"
                           source="{hostComponent.getStyle('icon')}"
                           visible="{Boolean(hostComponent.getStyle('icon') != null)}"
                           includeInLayout="{Boolean(hostComponent.getStyle('icon') != null)}" />
                   <s:Label id="labelDisplay"
                           paddingLeft="{Boolean(hostComponent.getStyle('icon') != null) ? 2 : 4}"
                           paddingRight="4"
                           textAlign="center"
                           verticalAlign="middle"
                           height="100%"
                           width="100%"
                           maxDisplayedLines="1"
                           alpha.disabled="1"
                           visible="{Boolean(hostComponent.label)}"
                           includeInLayout="{Boolean(hostComponent.label)}"
                           >
                   </s:Label>
           </s:HGroup>

    You might also want to add “iconDisplay” to the list of colorize exclusions along with “labelDisplay”.

Comments are closed.