UsingDialogs

Using Dialogs

In this chapter, we're going to learn how to use dialogs. StarUML provides the following Dialogs:

File Dialogs

• Open Dialog
• Save Dialog

Message Dialogs

• Error Dialog
• Alert Dialog
• Info Dialog

Input Dialogs

• Input Dialog (single line text)
• Text Dialog (multi line text)
• Confirm Dialog
• Select Radio Dialog
• Select Dropdown Dialog
• Color Dialog
• Font Dialog

Element Dialogs

• Element Picker Dialog
• Element List Picker Dialog

Toast

• info
• warning
• error

File Dialogs

You can use Open Dialog and Save Dialog to allow users to choose files or directories. File-related Dialogs are defined in FileSystem module. Please refer to API Docs for full specification of API.

Following is an example of Open Dialog for choosing a text *.txt file.

var FileSystem = require("filesystem/FileSystem");

FileSystem.showOpenDialog(false, false, "Select a text file...", null, ["txt"], function (err, files) {
    if (!err) {
        if (files.length > 0) {
            // User selected one or more files
        } else {
            // User canceled
        }
    } else {
        // Handle error
    }
});

Following is an example of Save Dialog for getting a file name.

var FileSystem = require("filesystem/FileSystem");

FileSystem.showSaveDialog("Save text as...", null, "Untitled.txt", function (err, filename) {
    if (!err) {
        if (filename) {
            // User selected a file name
        } else {
            // User canceled
        }
    } else {
        // Handle error
    }
});

Message Dialogs

To show message Dialogs, use Dialogs module.

var Dialogs = app.getModule('dialogs/Dialogs');

There are three types of message Dialogs to show error, alert, and info.

// Error Dialog
Dialogs.showErrorDialog("This is error message.");

// Alert Dialog
Dialogs.showAlertDialog("This is alert message.");

// Info Dialog
Dialogs.showInfoDialog("This is info message.");

All showing Dialogs are not synchronous call. So if you want to do something when user press OK button, you need to use callback function.

var dlg = Dialogs.showInfoDialog("This is info message.");
dlg.done(function () {
    console.log("done.");
});

Input Dialogs

Here are code examples to show dialogs to get user inputs.

Input Dialog (single line text)

var dlg = Dialogs.showInputDialog("Enter your name.");
dlg.done(function (buttonId, text) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log("Your name is", text);
    } else {
        // User canceled
    }
});

Text Dialog (multi line text)

var dlg = Dialogs.showTextDialog("Enter your biography.", "Edit here...");
dlg.done(function (buttonId, text) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log("Your bio is", text);
    } else {
        // User canceled
    }
});

Confirm Dialog

var dlg = Dialogs.showConfirmDialog("Are you sure?");
dlg.done(function (buttonId) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log("OK");
    } else {
        // User canceled
    }
});

Select Radio Dialog

var options = [
    { text: "First", value: 1 },
    { text: "Second", value: 2 },
    { text: "Third", value: 3 }
];
var dlg = Dialogs.showSelectRadioDialog("Select one of the following items.", options);
dlg.done(function (buttonId, selected) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log(selected);
    } else {
        // User canceled
    }
});

Select Dropdown Dialog

var options = [
    { text: "First", value: 1 },
    { text: "Second", value: 2 },
    { text: "Third", value: 3 }
];
var dlg = Dialogs.showSelectDropdownDialog("Select one of the following items.", options);
dlg.done(function (buttonId, selected) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log(selected);
    } else {
        // User canceled
    }
});

Color Dialog

var dlg = Dialogs.showColorDialog("#ff0000"); // Initial color is red (#ff0000).
dlg.done(function (buttonId, color) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log(color);
    } else {
        // User canceled
    }
});

Font Dialog

var font = {
    face: "Helvetica",
    size: 20,
    color: "#ff0000"
};
var dlg = Dialogs.showFontDialog(font);
dlg.done(function (buttonId, font) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log(font);
    } else {
        // User canceled
    }
});

Element Dialogs

If you need to ask users to pick an model element, ElementPickerDialog can be used as follow:

var ElementPickerDialog = app.getModule('dialogs/ElementPickerDialog');

var dlg = ElementPickerDialog.showDialog("Select a Class", null, type.UMLClass);
dlg.done(function (buttonId, selected) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log("You selected: ", selected);
    }
}); 

Or, you may need to constrain a list of elements which can be selected by users. Then you can use ElementListPickerDialog.

var Repository = app.getModule('core/Repository'),
    ElementListPickerDialog = app.getModule('dialogs/ElementListPickerDialog');

var classes = Repository.select("@UMLClass");
var dlg = ElementListPickerDialog.showDialog("Select a set of Class", classes);
dlg.done(function (buttonId, selected) {
    if (buttonId === Dialogs.DIALOG_BTN_OK) {
        console.log("You selected: ", selected);
    }
}); 

Toast

Toast is a way to show a short message in some seconds. It appears on the top of diagram area and disappears automatically after some seconds.

var Toast = app.getModule('ui/Toast');

Toast.error("This is an error message"); // Red color
Toast.warning("This is a warning message"); // Yellow color
Toast.info("This is an info message"); // Black color