Tutorials on various usages of dialog

Dialog Usage Tutorials

Below is the implementation code for various dialogs:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:common_dialog"
        ohos:text="Common Dialog"
        ohos:width="match_parent"
        ohos:text_size="15fp"
        ohos:left_margin="20vp"
        ohos:right_margin="20vp"
        ohos:padding="10vp"
        ohos:background_element="$graphic:button_background"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="20vp"
        ohos:height="match_content"/>

    <Button
        ohos:id="$+id:list_dialog"
        ohos:text="List Single - Selection Dialog"
        ohos:width="match_parent"
        ohos:left_margin="20vp"
        ohos:right_margin="20vp"
        ohos:padding="10vp"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:button_background"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="20vp"
        ohos:height="match_content"/>

    <Button
        ohos:id="$+id:multiselect_dialog"
        ohos:text="List Multi - Selection Dialog"
        ohos:width="match_parent"
        ohos:background_element="$graphic:button_background"
        ohos:text_size="15fp"
        ohos:left_margin="20vp"
        ohos:right_margin="20vp"
        ohos:padding="10vp"
        ohos:top_margin="20vp"
        ohos:layout_alignment="horizontal_center"
        ohos:height="match_content"/>

    <Button
        ohos:id="$+id:custom_dialog"
        ohos:text="Custom Dialog"
        ohos:width="match_parent"
        ohos:background_element="$graphic:button_background"
        ohos:text_size="15fp"
        ohos:left_margin="20vp"
        ohos:right_margin="20vp"
        ohos:padding="10vp"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="20vp"
        ohos:height="match_content"/>

    <Text
        ohos:id="$+id:result_text"
        ohos:width="match_content"
        ohos:text_size="15fp"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="50vp"
        ohos:height="match_content"/>
</DirectionalLayout>

In this layout file, several buttons are defined. When clicked, these buttons trigger different types of dialogs for testing purposes.

Common Dialog

CommonDialog commonDialog = new CommonDialog(this);
commonDialog.setTitleText("Common Dialog");
commonDialog.setContentText("Do you want to exit the app?");
commonDialog.setCornerRadius(DIALOG_BOX_CORNER_RADIUS);
commonDialog.setAlignment(TextAlignment.CENTER);
commonDialog.setSize(DIALOG_BOX_WIDTH, MATCH_CONTENT);
commonDialog.setAutoClosable(true); // Allows closing the dialog by clicking outside or pressing the back button
commonDialog.setButton(IDialog.BUTTON1, "Confirm", (iDialog, var) -> {
    resultText.setText("You confirmed");
    iDialog.destroy();
});
commonDialog.setButton(IDialog.BUTTON2, "Cancel", (iDialog, var) -> {
    resultText.setText("You canceled");
    iDialog.destroy();
});
commonDialog.show();

After instantiating CommonDialog, various methods are called to set properties such as title, content text, corner radius, alignment, size, and auto - closable behavior. Finally, commonDialog.show() is called to display the dialog, which is a common example of a dialog used to confirm exiting an app.

Single - Selection List Dialog

String[] items = new String[]{"Item 1", "Item 2", "Item 3"};
ListDialog listDialog = new ListDialog(this);
listDialog.setAlignment(TextAlignment.CENTER);
listDialog.setSize(DIALOG_BOX_WIDTH, MATCH_CONTENT);
listDialog.setTitleText("Single - Selection Dialog");
listDialog.setAutoClosable(true);
listDialog.setItems(items);
listDialog.setOnSingleSelectListener((iDialog, index) -> {
    resultText.setText(items[index]);
    iDialog.destroy();
});
listDialog.show();

In this example, an items array simulates multiple selectable data entries. After instantiating ListDialog, properties such as title, size, and alignment are set. The data source is set using listDialog.setItems(items). Finally, listDialog.show() is called to display the dialog. The setOnSingleSelectListener method is used to handle the callback when an item is selected, allowing access to the selected data index.

Multi - Selection List Dialog

String[] itemsString = new String[]{"Item 1", "Item 2", "Item 3", "Item 4"};
boolean[] areSelected = new boolean[]{false, false, false, false};
List<String> selectedItems = new ArrayList<>();
ListDialog listDialog = new ListDialog(this);
listDialog.setTitleText("Multi - Selection Dialog");
listDialog.setAlignment(TextAlignment.CENTER);
listDialog.setSize(DIALOG_BOX_WIDTH, MATCH_CONTENT);
listDialog.setAutoClosable(true);
listDialog.setMultiSelectItems(itemsString, areSelected);
listDialog.setOnMultiSelectListener((iDialog, index, isSelected) ->
        multiSelect(itemsString[index], selectedItems, listDialog.getItemComponent(index)));
listDialog.setDialogListener(() -> {
    resultText.setText("");
    for (String selectedItem : selectedItems) {
        resultText.append(selectedItem);
    }
    return false;
});
listDialog.show();

Here, an itemsString array simulates data entries, and a areSelected array tracks selection status. After instantiating ListDialog, properties like title, alignment, and size are set. Data and selection status are passed using listDialog.setMultiSelectItems(itemsString, areSelected). Finally, listDialog.show() displays the dialog. The setOnMultiSelectListener method handles callbacks for multi - selection, allowing access to the selected indices for data processing.