Flex Mobile Development – ToggleSwitch Sample (with source)!

November 2, 2011By 4 Comments

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=&quot;Open&quot;;
			unselectedLabel=&quot;Closed&quot;;
		}
	}
}

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!

Filed in: Adobe FlexFlex 4.5Flex 4.5/MobileFlex 4.6Flex MobileMobile Development Tags:

About the Author ()

Comments (4)

Trackback URL | Comments RSS Feed

  1. vasu says:

    Hi Holly, Thanks.
    will flex 4.6 allow drag and drop?

  2. Hi,

    Is this, by any chance, possible to use images instead of texts?
    Thanks in advance.

    Best regards,
    Guillaume

  3. Don Kerr says:

    Hi Holly, is there a way to change the height/size of the ToggleSwitch? I don’t really need to different skin, I just need it bigger for large touch screen implementations. Changing height has no impact.

    Thanks,
    Don

  4. tiago says:

    Hi.

    Anyone know how to disable or enable WIFI device with Flex Mobile (rest of implementation of the code)?

Leave a Reply