Creating dialog boxes

Your application can prompt users when your application state changes. For example, if a user is one of the top scoring players in a game application, you can prompt them to add their name to the leaderboard. You can use one of the preloaded dialog boxes in the qnx.dialog package to communicate with your user.

To optimize visibility for a dialog box in the context of your application, you can control the size, position, and alignment of a dialog box on the screen. You can set the values for size, position, and alignment by using the constant values provided in the other classes in the qnx.dialog package.

Dialog box

Description

AlertDialog

This dialog box presents a message and a series of buttons.

LoginDialog

This dialog box presents two text input boxes, a check box, and a series of buttons.

PasswordChangeDialog

This dialog box presents three text input boxes and a series of buttons.

PopupList

This dialog box presents a list of and a series of buttons.

PromptDialog

This dialog box presents a text input box and a series of buttons.

When you want to display your dialog, make sure that you pass IowWindow.getAirWindow().group as a parameter when you invoke the show() method. This restricts the dialog box to lock your application only. If you do not specify the window group using the IowWindow class, your dialog will lock the user interface for the tablet until your user dismisses it.

myDialog.show(IowWindow.getAirWindow().group)

Create a dialog box

  1. Import the required classes and interfaces.
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import qnx.dialog.*;
    import qnx.fuse.ui.buttons.LabelButton;
    import qnx.fuse.ui.text.*;
  2. Add the following statement to your class before the class declaration. This statement sets the width, height, frame rate, and background color of the Stage.
    [SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
  3. Create an application framework by extending the Sprite class.
    public class DialogDemo extends Sprite
    {
        public function DialogDemo()
        {
        }
    }
  4. Create an instance variable that refers to a Label object. This label reports which button on the dialog the user presses. Add this statement to your application framework, before your constructor.
    private var lblWhichButton:Label = new Label();
  5. Create the initializeUI() method to setup and initialize the UI components.
    private function initializeUI():void
    {
    }
  6. In initializeUI(), add a button to invoke your dialog box, and center the button on the screen.
    var btnShowDialog:LabelButton = new LabelButton();
    btnShowDialog.label = "Click here";    
    btnShowDialog.x = (stage.stageWidth - btnShowDialog.width)/2;
    btnShowDialog.y = (stage.stageHeight - btnShowDialog.height)/2;
  7. Add an event listener to your button to capture click events. Invoke the ButtonClicked() method when the BlackBerry Tablet OS SDK reports a click event.
    btnShowDialog.addEventListener(MouseEvent.CLICK, buttonClicked);
  8. In initializeUI(), configure the label object you created in step 4. Center the label on the Stage below the button.
    lblWhichButton.x = (stage.stageWidth - btnShowDialog.width)/2;
    lblWhichButton.y = btnShowDialog.y + btnShowDialog.height;
    lblWhichButton.width = 600;
    lblWhichButton.text = "";
  9. In initializeUI(), add the button and label to the Stage.
    addChild(btnShowDialog);
    addChild(lblWhichButton);
  10. In the constructor for your class, invoke initializeUI().
    initializeUI();
  11. Create the ButtonClicked() method to respond to click events on your button.
    public function ButtonClicked(event:Object):void
    {
    }
  12. In ButtonClicked(), create an AlertDialog object.
    var myDialog:AlertDialog = new AlertDialog();
    myDialog.title = "Dialog";
    myDialog.message = "This is a small alert dialog";
    myDialog.addButton("OK");
    myDialog.addButton("Cancel");
    myDialog.dialogSize = DialogSize.SIZE_SMALL;
  13. Add an event listener to the button in the dialog box to capture click events. Invoke the alertButtonClicked() method when the BlackBerry Tablet OS SDK reports a click event.
    myDialog.addEventListener(Event.SELECT, alertButtonClicked);
  14. Display the dialog box for the user. myDialog.show(IowWindow.getAirWindow().group)
    myDialog.show(IowWindow.getAirWindow().group);
  15. Create the alertButtonClicked() method to respond to click events in the dialog.
    public function alertButtonClicked(event:Object):void
    {			
    }
  16. In alertButtonClicked(), update the value of the label on the Stage when the user clicks on a button in the dialog.
    lblWhichButton.text = "Index of button Clicked: " + e.target.selectedIndex;