Dialogs Example

Files:

Description

The Dialogs example demonstrates how to use the various dialogs to show notifications to the user.

Overview

In this example we'll learn how to use the various dialog classes, as provided by the BB framework, to show notifications to the user or ask for certain input.

UI

The UI of this sample application consists of a set of a TextField where the user can type in some text that will be shown in the dialog and a RadioGroup where the user can select the kind of dialog that will be shown. The 'Show' and 'Cancel' buttons are used to show and hide the specific dialog.

    attachedObjects: [
        SystemToast {
            id: toast
            body: qsTr("Toast body")
            icon: "asset:///images/Battery-low.png"
            onFinished: {
                if (result == SystemUiResult.ConfirmButtonSelection) {
                    console.log("confirm");
                } else if (result == SystemUiResult.CancelButtonSelection) {
                    console.log("cancel");
                } else if (result == SystemUiResult.TimeOut) {
                    console.log("timeout");
                }
            }
        },
        SystemPrompt {
            id: prompt
            title: qsTr("PROMPT")
            modality: SystemUiModality.Application
            inputField.inputMode: SystemUiInputMode.Password
            confirmButton.label: qsTr("Okay button")
            confirmButton.enabled: true
            cancelButton.label: qsTr("Cancel button")
            cancelButton.enabled: true
            onFinished: {
                if (result == SystemUiResult.ConfirmButtonSelection) {
                    console.log("confirm");
                } else if (result == SystemUiResult.CancelButtonSelection) {
                    console.log("cancel");
                }
            }
        },
        SystemCredentialsPrompt {
            id: credentialsPrompt
            title: qsTr("CREDENTIALS PROMPT")
            body: qsTr("Credentials dialog body")
            includeShowPassword: true
            includeRememberMe: true
            confirmButton.label: qsTr("Login button")
            confirmButton.enabled: true
            cancelButton.label: qsTr("Cancel button")
            cancelButton.enabled: true
            onFinished: {
                if (result == SystemUiResult.ConfirmButtonSelection) {
                    console.log("confirm");
                } else if (result == SystemUiResult.CancelButtonSelection) {
                    console.log("cancel");
                }
            }
        },
        SystemDialog {
            id: dialog
            title: qsTr("DIALOG")
            body: qsTr("Dialog body")
            confirmButton.label: qsTr("Okay button")
            confirmButton.enabled: true
            cancelButton.label: qsTr("Cancel button")
            cancelButton.enabled: true
            buttons: [
                SystemUiButton {
                    id: random
                    label: qsTr("RANDOM")
                    enabled: true
                },
                SystemUiButton {
                    id: random2
                    label: qsTr("RANDOM2")
                    enabled: true
                }
            ]
            onFinished: {
                var x = result;
                console.log(dialog.error);
                if (x == SystemUiResult.ConfirmButtonSelection) {
                    console.log("confirm");
                } else if (x == SystemUiResult.CancelButtonSelection) {
                    console.log("cancel");
                } else if (x == SystemUiResult.ButtonSelection) {
                    console.log("button");
                } else if (x == SystemUiResult.None) {
                    console.log("none");
                } else if (x == SystemUiResult.Error) {
                    console.log("error");
                } else if (x == SystemUiResult.TimeOut) {
                    console.log("timeout");
                } else {
                    console.log(x);
                }
            }
        }

    ]

For each dialog type (toast, prompt, credentials prompt and normal dialog), we define an instance as an attached object of the page. The API of these dialogs is quite similar, they provide properties to set the title and body text, the label of the buttons and their state. All dialogs also provide a 'finished()' signal that we declare a signal handler for to evaluate the user interaction with the dialog.

    Button {
        id: show
        text: qsTr("Show")
        onClicked: group.selectedValue.show()
    }

If the user clicks the 'Show' button, we check which type he has selected in the RadioGroup and call the 'show()' method on the corresponding dialog instance.

    Button {
        id: cancel
        text: qsTr("Cancel")
        onClicked: group.selectedValue.cancel()
    }

If the user clicks the 'Cancel' button, we check which type he has selected in the RadioGroup and call the 'cancel()' method on the corresponding dialog instance.

Contents

Dialogs Example

Description

Overview

UI