Flex Toggle Switch Spark Skin
Wednesday, January 18, 2012 at 5:55PM With Flex 4.6 Adobe introduced a new mobile component called the ToggleSwitch. This is toggle button that uses an interaction paradigm made popular with the iPhone. Unfortunately it is a Mobile component and using it in a desktop application or anything under Flex 4.6 requires some workarounds. In addition, as it's designed for a mobile context the skin is not written in MXML but rather in pure actionscript. This makes customizing difficult.
These limitations made me to decide to write a Spark skin for a Spark CheckBox that functions in the same way. It can be toggle by either clicking/touching or by sliding the toggle. It can be used in any Flex 4 application including desktop applications. That means it also doesn't require Flash Player 11 like Flex 4.6 does.
By default, it uses the labels Yes and No. To be able to define any label just use the ToggleSwitch class which subclasses ToggleButtonBase so it can be used in place of any CheckBox or ToggleButton. It includes selectedLabel and deselectedLabel to define the two labels used. This allows for easier customization of labels as opposed to Adobe's implementation which requires a whole new skin.
Right click for source.
You need Adobe Flash 10.2 to view this.
Reader Comments (2)
That's a great idea. I don't really get why they made the components mobile only. Can I use this source code? Are you releasing it under any particular license?
I think they wrote the skin in actionscript for performance reasons but I also don't understand why they didn't include a spark skin for the desktop themes. The callout is also really useful and they locked that away as well.
Yeah, feel free to use the code as you wish.