Creating an icon button

How to

Create an icon button in your application.

Solution

Construct the button variable in the root of your class

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

Embed the icon you want to use on your button in the root of your class

[Embed(source="IMAGEPATH")] private var my_icon : Class;
//embed image at IMAGEPATH inside my_icon

Initialize your button's attributes

// Location and size 
myIconButton.setPosition(200,200);
myIconButton.width = 100; 
myIconButton.height = 100; 

// Toggle or click
myIconButton.toggle = true; 

// Set previously defined icon.
myIconButton.setIconForState(new my_icon()); 

// Call myIconButtonEvent function when button is clicked. 
myIconButton.addEventListener(MouseEvent.CLICK, myIconButtonEvent); 

// Add button to stage.
this.addChild(myIconButton);

Create the function that is called by your button's click event

private function myIconButtonEvent(event:MouseEvent) { 
	// Output click event to console.
	myIconButton.selected 
	// Returns true when button is in the down state. 
	trace ("myIconButton has been clicked, current toggle state is:" + myIconButton.selected); 
}

Build requirements

You must include the following classes in your project:

import qnx.fuse.ui.buttons.IconButton; 
import flash.events.MouseEvent;

Discussion

When you create an icon button, you declare the IconButton button variable and define an embedded version of your image, and then set its attributes. To add functionality, add a MouseEvent.CLICK listener function to perform any actions that are defined in the function when the button is clicked. You can also reference the state of the button anywhere in the class by using the selected property. The IconLabelButton class performs exactly the same as an IconButton, with the addition of a label property that allows text to be specified to accompany the icon on the button.

comments powered by Disqus