loading Skin images dynamically - actionscript-3

Question

(another of my never ending questions...)
I need an image component with states which behaves like a ToggleButton. Rather than build from scratch I thought I would try subclassing ToggleButton and defining a custom Flex skin. I don't have much experience with skinning and have cobbled together the code below.
It seems to work well – binding BitmapImages in the skin to BitmapData loading in the button instance: <s:BitmapImage source="{hostComponent.upImageData}"
Am I on the right track with this approach? Is there a more standard approach to this sort of thing?
ToggleButton Skin
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="21" minHeight="21"
alpha.disabledStates="0.5">
<fx:Metadata>[HostComponent("components.EventButton")]</fx:Metadata>
<!-- host component -->
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<s:BitmapImage source="{hostComponent.upImageData}"
includeIn="up, disabled"
left="0" right="0" top="0" bottom="0" />
<s:BitmapImage source="{hostComponent.overImageData}"
left="0" right="0" top="0" bottom="0"
includeIn="over"/>
<s:BitmapImage source="{hostComponent.downImageData}"
left="0" right="0" top="0" bottom="0"
includeIn="down, upAndSelected, overAndSelected, downAndSelected"/>
</s:Skin>
ToggleButton
<?xml version="1.0" encoding="utf-8"?>
<s:ToggleButton xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:skins = "skins.*"
skinClass="skins.EventSkin"
creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
[Bindable]
public var upImageData:BitmapData;
[Bindable]
public var overImageData:BitmapData;
[Bindable]
public var downImageData:BitmapData;
[Bindable]
public var disabledImageData:BitmapData;
// image loading code removed
]]>
</fx:Script>
</s:ToggleButton>

Answer 1

Yep, you are going in right way. The "Skin mechanism" is really powerful and flexible tool. I had similar task about year ago and I solved it in the same way (just with standard ToggleButton and custom skin). All changes in visual representation of spark component might to be in skin class.

Answer 2

As another option, you should be able to use the state variable syntax:
<s:ToggleButton icon.up="{upIcon}"
icon.over="{overIcon}"
icon.down="{downIcon}"
icon.disabled="{disabledIcon}"
icon.upAndSelected="{upAndSelectedIcon}"
icon.overAndSelected="{overAndSelectedIcon}"
icon.downAndSelected="{downAndSelectedIcon}"
icon.disabledAndSelected="{disabledAndSelectedIcon}" />
See this Apache mailing list thread for more discussion on this.