StarUML documentation
Search…
v3
Introduction
User Guide
Introduction
Basic Concepts
Managing Project
Editing Elements
Formatting Diagram
Managing Extensions
User Interface
Validation Rules
Keyboard Shortcuts
Working with Diagrams
Class Diagram
Package Diagram
Composite Structure Diagram
Object Diagram
Component Diagram
Deployment Diagram
Use Case Diagram
Sequence Diagram
Communication Diagram
Statechart Diagram
Activity Diagram
Profile Diagram
Entity-Relationship Diagram
Flowchart Diagram
Data Flow Diagram
Developing Extensions
Getting Started
Commands
Menus
Keymaps
Accessing Elements
Creating and Modifying Elements
Working with Selections
Defining Preferences
Using Dialogs
Registering to Extension Registry
Powered By
GitBook
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!
Developing Extensions - Previous
Defining Preferences
Next - Developing Extensions
Registering to Extension Registry
Last modified
4yr ago
Copy link
Contents
File Dialogs
Message Dialogs
Input Dialogs
Element Dialogs
Toast