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.

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:

<cs:IconButton id="prev"
		skinClass="skins.IconBtnSkin"
		icon="{SomeEmbeddedIconImage}"/>

The IconButton class:

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

Now the generic icon button skin (IconBtnSkin):

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" >
 
	<fx:Metadata>
		[HostComponent("cs.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')}" />
 
</s:SparkSkin>

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

	setStyle("skinClass", "skins.IconBtnSkin");
  • Share/Bookmark