Creating a toggle switch

How to

Create a toggle switch in your application.

Solution

Construct the switch variable in the root of your class

private var myToggleSwitch:ToggleSwitch= new ToggleSwitch(); 	
// Placing this at the class root allows other 
// application elements to reference it.

Initialize the attributes for your switch

// Location and size
myToggleSwitch.setPosition(200,450);
myToggleSwitch.width = 200;

// Set content for the text elements of the switch.
myToggleSwitch.defaultLabel = "NO";
myToggleSwitch.selectedLabel = "YES";

// Set padding spacing on displayed switch text.
myToggleSwitch.labelPadding = 20;

// Call myToggleEvent function when switch is toggled.
myToggleSwitch.addEventListener(Event.SELECT, myToggleEvent);

// Add switch to stage.
this.addChild(myToggleSwitch);

Create the function in your class to be called by your switch's click event

private function myToggleEvent(e:Event) {
	// Output selection event to console. myToggleSwitch.selected 
	// returns true when button is in the active state.
	if ( myToggle.selected == true ){
      	trace("Toggle is ON");
      }
      else{
		trace("Toggle is OFF");
      }
}

Build requirements

You must include the following classes in your project:

import qnx.fuse.ui.buttons.ToggleSwitch;
import flash.events.Event;

Discussion

When you create a segmented control, you declare the ToggleSwitch variable and then set its attributes. You can use the defaultLabel and selectedLabel attributes to change the displayed text from the default values of Off/On. To add functionality, add an Event.SWITCH listener function to perform any actions that are defined in the function when the state of the toggle switch changes. You can also reference the state of the switch anywhere in the class by using the selected property.

comments powered by Disqus