StarUML documentation
Search…
v3
User Guide
Working with Diagrams
Using Dialogs
In this chapter, we're going to learn how to use dialogs.
File Dialogs
You can use Open Dialog and Save Dialog to allow users to choose files or directories.
Following is an example of Open Dialog for choosing a text
*.txt file.1
var filters = [
2
{ name: "Text Files", extensions: [ "txt" ] }
3
]
4
var selected = app.dialogs.showOpenDialog("Select a text file...", null, filters)
5
// Returns an array of paths of selected files
Copied!
Following is an example of Save Dialog for getting a file name.
1
var filters = [
2
{ name: "Text Files", extensions: [ "txt" ] }
3
]
4
var selected = app.dialogs.showSaveDialog("Save text as...", null, filters)
5
// Returns a file path to save
Copied!
Message Dialogs
There are three types of message dialogs to show error, alert, and info.
1
// Error Dialog
2
app.dialogs.showErrorDialog("This is error message.")
3
​
4
// Alert Dialog
5
app.dialogs.showAlertDialog("This is alert message.")
6
​
7
// Info Dialog
8
app.dialogs.showInfoDialog("This is info message.")
Copied!
Input Dialogs
Here are code examples to show dialogs to get user inputs.
Input Dialog (single line text)
1
app.dialogs.showInputDialog("Enter your name.").then(function ({buttonId, returnValue}) {
2
if (buttonId === 'ok') {
3
console.log("Your name is", returnValue)
4
} else {
5
console.log("User canceled")
6
}
7
})
Copied!
Text Dialog (multi line text)
1
app.dialogs.showTextDialog("Enter your biography.", "Edit here...").then(function ({buttonId, returnValue}) {
2
if (buttonId === 'ok') {
3
console.log("Your bio is", returnValue)
4
} else {
5
console.log("User canceled")
6
}
7
})
Copied!
Confirm Dialog
1
var buttonId = app.dialogs.showConfirmDialog("Are you sure?")
Copied!
Select Radio Dialog
1
var options = [
2
{ text: "First", value: 1 },
3
{ text: "Second", value: 2 },
4
{ text: "Third", value: 3 }
5
]
6
app.dialogs.showSelectRadioDialog("Select one of the following items.", options).then(function ({buttonId, returnValue}) {
7
if (buttonId === 'ok') {
8
console.log(returnValue)
9
} else {
10
console.log("User canceled")
11
}
12
})
Copied!
Select Dropdown Dialog
1
var options = [
2
{ text: "First", value: 1 },
3
{ text: "Second", value: 2 },
4
{ text: "Third", value: 3 }
5
]
6
app.dialogs.showSelectDropdownDialog("Select one of the following items.", options).then(function ({buttonId, returnValue}) {
7
if (buttonId === 'ok') {
8
console.log(returnValue);
9
} else {
10
console.log("User canceled")
11
}
12
})
Copied!
Color Dialog
1
// Initial color is red (#ff0000).
2
app.dialogs.showColorDialog("#ff0000").then(function ({buttonId, returnValue}) {
3
if (buttonId === 'ok') {
4
console.log(returnValue);
5
} else {
6
console.log("User canceled")
7
}
8
})
Copied!
Font Dialog
1
var font = {
2
face: "Helvetica",
3
size: 20,
4
color: "#ff0000"
5
}
6
app.dialogs.showFontDialog(font).then(function ({buttonId, returnValue}) {
7
if (buttonId === 'ok') {
8
console.log(returnValue);
9
} else {
10
console.log("User canceled")
11
}
12
})
Copied!
Element Dialogs
If you need to ask users to pick an model element, Element Picker Dialog can be used as follow:
1
app.elementPickerDialog.showDialog("Select a Class", null, type.UMLClass).then(function ({buttonId, returnValue}) {
2
if (buttonId === 'ok') {
3
console.log("You selected: ", returnValue)
4
}
5
})
Copied!
ElementPickerDialog
Or, you may need to constrain a list of elements which can be selected by users. Then you can use Element List Picker Dialog.
1
var classes = app.repository.select("@UMLClass")
2
var dlg = app.elementListPickerDialog.showDialog("Select a set of Class", classes).then(function ({buttonId, returnValue}) {
3
if (buttonId === 'ok') {
4
console.log("You selected: ", returnValue)
5
}
6
})
Copied!
ElementListPickerDialog
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.
1
app.toast.error("This is an error message") // Red color
2
app.toast.warning("This is a warning message") // Yellow color
3
app.toast.info("This is an info message") // Black color
Copied!
Copy link