Fun with Flex 4 Skinning and the ToggleButton

I’ve been having a blast with the new Flex 4 skinning model and the flexibility/customization it provides. One of my favorite components to mess with is the ToggleButton because it’s so basic (either on or off) and yet pretty complex when you get down and dig in. It extends ToggleButtonBase which extends ButtonBase so it has the typical up/over/down/disabled states but because it’s a ToggleButton it also has the selected equivalent of all of those. That ends up making it difficult to do transitions between states because the transitions between the interim states like down to downAndSelected are so short. And if you roll off of it or move the mouse it fires an over state so the transition will look jerky.

Even with this limitation you can have some fun. When creating a transition between on and off you primarily want to deal with the over and overAndSelected states. Creating transitions between those two states will let you create something custom as the ToggleButton moves from the off state to the on state. And since the new Flex 4 component model lets you swap out skins at runtime it’s easy to create some interesting themes on the traditional ToggleButton. You can check out the SWF below (with source enabled) to see what I mean. And the code is very straight forward. The only variation is in the skin files:

<s:states>
<s:State name="normal" />
<s:State name="text" />
<s:State name="beer" />
<s:State name="coins" />
</s:states>
<mx:ComboBox id="cb" y="5" x="0" change="this.currentState = cb.selectedLabel;">
<mx:dataProvider>
<mx:ArrayCollection>
<fx:Object id="normal" label="normal" skinClass="{spark.skins.default.ToggleButtonSkin}" />
<fx:Object id="text" label="text" skinClass="{components.TextToggle}" />
<fx:Object id="beer" label="beer" skinClass="{components.BeerToggle}" />
<fx:Object id="coins" label="coins" skinClass="{components.CoinFlip}" />
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
<s:ToggleButton id="toggle" y="100" x="0" skinClass="{cb.selectedItem.skinClass}" />

Some notes:

  • A selected beer is an empty beer.
  • Notice in the code above that skinClass is a bindable attribute. Makes it easy to swap in and out.
  • Be careful when you move the mouse after clicking the ToggleButton or some states won’t play correctly.
  • When clicking the coin, keep the mouse towards the top of the coin and don’t move it or you won’t get the effect.

Show Comments

Hide Comments

Comments are closed.