StarUML documentation
v6
v6
  • Introduction
  • User Guide
    • Introduction
    • Basic Concepts
    • Managing Project
    • Managing Diagrams
    • Diagram Editor
    • Editing Elements
    • Formatting Elements
    • Annotation Elements
    • Managing Extensions
    • User Interface
    • CLI (Command Line Interface)
    • Validation Rules
    • Keyboard Shortcuts
    • TouchBar (MacBook)
    • Customization
  • Working with UML Diagrams
    • Class Diagram
    • Package Diagram
    • Composite Structure Diagram
    • Object Diagram
    • Component Diagram
    • Deployment Diagram
    • Use Case Diagram
    • Sequence Diagram
    • Communication Diagram
    • Timing Diagram
    • Interaction Overview Diagram
    • Statechart Diagram
    • Activity Diagram
    • Information Flow Diagram
    • Profile Diagram
  • Working with SysML Diagrams
    • Requirement Diagram
    • Block Definition Diagram
    • Internal Block Diagram
    • Parametric Diagram
  • Working with Additional Diagrams
    • Entity-Relationship Diagram
    • Flowchart Diagram
    • Data Flow Diagram
    • C4 Diagram
    • BPMN Diagram
    • Mindmap Diagram
    • Wireframe Diagram
    • AWS Architecture Diagram
    • GCP Architecture Diagram
  • Developing Extensions
    • Getting Started
    • Commands
    • Menus
    • Keymaps
    • Toolbox
    • Accessing Elements
    • Creating, Deleting and Modifying Elements
    • Working with Selections
    • Defining Preferences
    • Using Dialogs
    • Registering to Extension Registry
Powered by GitBook
On this page
  • File Dialogs
  • Message Dialogs
  • Input Dialogs
  • Element Dialogs
  • Toast
  1. Developing Extensions

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.

var filters = [
  { name: "Text Files", extensions: [ "txt" ] }
]
var selected = app.dialogs.showOpenDialog("Select a text file...", null, filters)
// Returns an array of paths of selected files

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

var filters = [
  { name: "Text Files", extensions: [ "txt" ] }
]
var selected = app.dialogs.showSaveDialog("Save text as...", null, filters)
// Returns a file path to save

Message Dialogs

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

// Error Dialog
app.dialogs.showErrorDialog("This is error message.")

// Alert Dialog
app.dialogs.showAlertDialog("This is alert message.")

// Info Dialog
app.dialogs.showInfoDialog("This is info message.")

Input Dialogs

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

Input Dialog (single line text)

app.dialogs.showInputDialog("Enter your name.").then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log("Your name is", returnValue)
  } else {
    console.log("User canceled")
  }
})

Text Dialog (multi line text)

app.dialogs.showTextDialog("Enter your biography.", "Edit here...").then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log("Your bio is", returnValue)
  } else {
    console.log("User canceled")
  }
})

Confirm Dialog

var buttonId = app.dialogs.showConfirmDialog("Are you sure?")

Select Radio Dialog

var options = [
  { text: "First", value: 1 },
  { text: "Second", value: 2 },
  { text: "Third", value: 3 }
]
app.dialogs.showSelectRadioDialog("Select one of the following items.", options).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log(returnValue)
  } else {
    console.log("User canceled")
  }
})

Select Dropdown Dialog

var options = [
  { text: "First", value: 1 },
  { text: "Second", value: 2 },
  { text: "Third", value: 3 }
]
app.dialogs.showSelectDropdownDialog("Select one of the following items.", options).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log(returnValue);
  } else {
    console.log("User canceled")
  }
})

Color Dialog

// Initial color is red (#ff0000).
app.dialogs.showColorDialog("#ff0000").then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log(returnValue);
  } else {
    console.log("User canceled")
  }
})

Font Dialog

var font = {
  face: "Helvetica",
  size: 20,
  color: "#ff0000"
}
app.dialogs.showFontDialog(font).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log(returnValue);
  } else {
    console.log("User canceled")
  }
})

Element Dialogs

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

app.elementPickerDialog.showDialog("Select a Class", null, type.UMLClass).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log("You selected: ", returnValue)
  }
})

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

var classes = app.repository.select("@UMLClass")
var dlg = app.elementListPickerDialog.showDialog("Select a set of Class", classes).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log("You selected: ", returnValue)
  }
})

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.

app.toast.error("This is an error message") // Red color
app.toast.warning("This is a warning message") // Yellow color
app.toast.info("This is an info message") // Black color
PreviousDefining PreferencesNextRegistering to Extension Registry

Last updated 1 year ago

ElementPickerDialog
ElementListPickerDialog