Creating a login dialog

How to

Create a login dialog box in your application.

Solution

Construct the login dialog box variable in the root of your class

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

Initialize the attributes of your dialog box

// Set title and body text.
myLogin.title = "Application Locked";
myLogin.message = "Please enter your username and password:";
			
// Add buttons.
myLogin.addButton("Cancel");
myLogin.addButton("OK");

// Set up dialog's username and password entry fields.
myLogin.usernamePrompt = "username";
myLogin.passwordPrompt = "password";

// OPTIONAL: set up dialog's remember me checkbox.
myLogin.rememberMeLabel = 'Remember me';
myLogin.rememberMe = true;

// OPTIONAL: set up dialog's show password checkbox.
myLogin.showPasswordLabel = 'Show password';
myLogin.showPassword = false;

// Add a listener for user clicking on a button.
myLogin.addEventListener(Event.SELECT, loginButtonClicked);

Add the call to display your dialog box where desired

// In this sample it is fine to simply place this call 
// once right after setup to display one time on launch.
myLogin.show();

Create the function that is called by your dialog box's button selection event

private function loginButtonClicked(event:Event):void{
	// Output index of clicked button.
	trace("Button Clicked Index: " + myLogin.selectedIndex);
	
	// If first button was selected.
	if (myLogin.selectedIndex == 1){ 
	
		// Output user input name.
		trace("Welcome "+ myLogin.username); 
		// Output user input password.
		trace("Your entered password was "+ myLogin.password);

		// Check if remember me option was selected.
		if (myLogin.rememberMe){
			trace ("I will remember you"); 
		}
		else {
			trace ("I will not remember you");
		}
	}
}

Build Requirements

You must include the following classes in your project:

import qnx.fuse.ui.dialog.LoginDialog;
import flash.events.Event;

Discussion

When you create a login dialog, you create your LoginDialogobject, initialize its properties to whatever values your application requires, and finally call the show() function when you want to display the dialog. To add functionality, add an Event.SELECT listener function to perform any actions that are defined in the function when one of the buttons is selected. You can also reference which of your dialog's buttons was chosen by the user anywhere in the class by using the selectedIndex property. The username, password, and rememberMe properties will return the user's input into those respective fields of the dialog.