Flex Mobile Development – ToggleSwitch Sample (with source)!

The Flex/Flash Builder 4.6 prerelease includes a new ToggleSwitch control that can be used to indicate a binary value (like a CheckBox). Below is a screenshot showing a sample of two being used. The first switch shows it selected by default using a specified slide duration (for animation in milliseconds), and the second one uses a custom skin class to define different labels:

The important part of the sample MXML using the components is shown below. Note how you can use the change event on the switch to determine when selection has changed:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="Sample ToggleSwitch">
	
	<fx:Script>
		<![CDATA[
			protected function toggleswitch1_changeHandler(event:Event):void
			{
				lbl.text=event.target.id + " selected = " + event.target.selected;
			}
		]]>
	</fx:Script>
	
	<s:layout>
		<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" gap="12" 
						  horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	
	<!-- only specifying this skin class on the TextArea to get around a prerelease bug where it won't wrap using the emulator unless this is set -->
	<s:TextArea width="95%" skinClass="spark.skins.mobile.TextAreaSkin" editable="false"
				text="The Spark ToggleSwitch control defines a binary switch. Clicking anywhere in the control toggles the state. You can also slide the thumb along the track to change state. 
Default values for the unselected and selected labels are OFF (unselected) and ON (selected). You can also easily change the labels shown by defining a custom skin as shown in the 2nd ToggleSwitch
component below:"/>
	
	<s:VGroup gap="8">
		<s:Label text="SETTINGS"/>
		<s:HGroup verticalAlign="middle">
			<s:Label text="Wifi"/>
			<s:ToggleSwitch id="switch1" selected="true" slideDuration="100" change="toggleswitch1_changeHandler(event)"/>
		</s:HGroup>
		<s:HGroup verticalAlign="middle">
			<s:Label text="Port 80"/>
			<s:ToggleSwitch id="switch2" skinClass="skins.MyToggleSwitchSkin" change="toggleswitch1_changeHandler(event)"/>
		</s:HGroup>
		<s:Label id="lbl"/>
	</s:VGroup>		
</s:View>

The simple ActionScript skin used to change the labels to the custom values in the 2nd ToggleSwitch control is shown here:

package skins
{
	import spark.skins.mobile.ToggleSwitchSkin;
	
	public class MyToggleSwitchSkin extends ToggleSwitchSkin
	{
		public function MyToggleSwitchSkin()
		{
			super();
			selectedLabel="Open";
			unselectedLabel="Closed";
		}
	}
}

You can download the sample code, project or apk HERE.

If you haven’t joined the Flex 4.6/Flash Builder 4.6 prerelease yet, you can do so here!