This can be baked into the underlying component, like this:

public function MyComponent() extends SkinnableComponent {
 
    public function MyComponent() {
        addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, onCurrentStateChange);
    }
 
    private function onCurrentStateChange(event:StateChangeEvent):void {
        invalidateSkinState();
    }
}

Now if you just use MyComponent everywhere, its SkinState will be invalidated every time its State changes. Easy.

In Smiley we have 3 SkinStates and 3 States, I just made the names the same. It would be nice if State had some attribute to promote the component state to a skin state. Then I could just say isSkinStateToo="true".

And yes, compound skin states are cool. I just wrote a custom button with:

return super.getCurrentSkinState() + (alerted ? 'AndAlerted' : '');

So my states where: up, over, down, disabled and upAndAlerted, overAndAlerted, downAndAlerted, disabledAndAlerted.

I do all components in AS3 and only the skins in MXML. Extend SkinnableComponent and override at most seven methods:

• set – set property and call invalidateProperties()
• invalidateProperties() – say properties have changed
• commitProperties() – act on combination of properties
• invalidateDisplay() – if property change should change display
• updateDisplayList() – only if you must intrude on layout…
• getCurrentSkinState() – when skin needs to know what to show…
• partAdded() – watch for parts you need to initialize (addEventListener, etc)
• partRemoved() – clean up whatever partAdded() did

John Hicks