Flex Toggle Switch Spark Skin

With Flex 4.6 Adobe introduced a new mobile component called the ToggleSwitch. This is a 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 toggled 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.