Creating a label button

How to

Create a label button in your application.

Solution

Construct the button variable in the root of your class

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

Initialize your button's attributes

// Location and size
myLabelButton.setPosition(200,450);			
myLabelButton.width = 150;
myLabelButton.height = 80;

// Set up the button's label
myLabelButton.label = "Login";

// Call labelButtonClicked function when button is clicked.
myLabelButton.addEventListener(MouseEvent.CLICK, labelButtonClicked);

// Add check box to stage.
this.addChild(myLabelButton);

Set text formats for label button states (optional)

// Create a new TextFormat instance.
var buttonDownFormat:TextFormat = new TextFormat();
// Set font, size, color, alignment.
buttonDownFormat.font = "Slate Pro";
buttonDownFormat.size = 30;
buttonDownFormat.color = 0xFFFFFF;
buttonDownFormat.align = TextAlign.CENTER;

// Second format type.
var buttonUpFormat:TextFormat = new TextFormat();
buttonUpFormat.font = "Slate Pro";
buttonUpFormat.size = 30;
buttonUpFormat.color = 0xCC0000;
buttonUpFormat.align = TextAlign.CENTER;

// Third format type.
var buttonDisabledFormat:TextFormat = new TextFormat();
buttonDisabledFormat.font = "Slate Pro";
buttonDisabledFormat.size = 30;
buttonDisabledFormat.color = 0xCCCCCC;
buttonDisabledFormat.align = TextAlign.CENTER;

// Apply formats to Button for different Button states.
myLabelButton.setTextFormatForState(buttonDownFormat,SkinStates.DOWN);
myLabelButton.setTextFormatForState(buttonUpFormat,SkinStates.UP);
myLabelButton.setTextFormatForState(buttonDisabledFormat,SkinStates.DISABLED);

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

private function labelButtonClicked(event:MouseEvent) {
	// Output click event to console.
     	trace("myLabelButton clicked!");
}

Build requirements

You must include the following classes in your project:

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

// The following three imports are for the optional text formatting step.
import qnx.fuse.ui.text.TextFormat;
import qnx.fuse.ui.text.TextAlign;
import qnx.fuse.ui.skins.SkinStates;

Discussion

When you create a label button, you declare the LabelButton variable within the class scope and then set its attributes. You can include the optional TextFormat, TextFormatAlign, and SkinStates libraries to create and assign different text styles to different states of the button. To add functionality, add a MouseEvent.CLICK listener function to perform any actions that are defined in the function when the check box is clicked. You can also reference the state of the button anywhere in the class by using the selected property.

comments powered by Disqus