Comments on: Flex 4 Component States vs. Skin States

By: Jake

Jake — Sun, 15 Aug 2010 16:49:59 +0000

Great article. Clear and comprehensive, thanks man!

By: justin

justin — Thu, 24 Jun 2010 16:33:01 +0000

@John - yes, nowadays, I also tend to write my custom components in AS3 rather than MXML for most cases. But I'll still use MXML when my custom component contains a bunch of other components (thereby leveraging the power of MXML to add and layout components). 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.

By: John Hicks

John Hicks — Thu, 24 Jun 2010 04:59:59 +0000

Yes, thank you Justin especially for that last step, where you compound the states. 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

By: Pavel Jacko

Pavel Jacko — Mon, 16 Nov 2009 17:41:01 +0000

This is great post! I used this technique on article about different solutions for skinning in Flex 4 here: http://blog.paveljacko.com/?p=29

By: justin

justin — Tue, 03 Nov 2009 16:50:54 +0000

I love MXML, especially with the advances made in Flex 4. But if you have to go with AS3, just listen for the FlexEvent.ENTER_STATE event:

var s:State = new State();
s.name = 'foo';
s.addEventListener(FlexEvent.ENTER_STATE, enterStateHandler);

By: Jonathan Dumaine

Jonathan Dumaine — Tue, 03 Nov 2009 16:18:54 +0000

Great post! Thanks, Justin!

Now I just have to figure out how to get enterState syntax on an AS only component.