6. Electron.js – Основы. Electron API – dialog

21 января, 2019 в 4:23

Категория: Electron.js / JavaScript

Продолжу исследование Electron API и следующей темой для изучения будут диалоговые окна. Electron позволяет задействовать для общения с пользователем системные диалоговые окна и их внешний вид зависит от того в какой операционной система установлено приложение. Приведу несколько вариантов диалоговых окно оформленных в виде функций и предназначенных для решения различных задач.

Пример диалогового окна для открытия файла –
1
2
3
4
5
6
7
8
9
10
11
12
13
function showDialog() {
  dialog.showOpenDialog({
    defaultPath: './images', // Путь по умолчанию
    buttonLabel: 'Select Logo', // Название кнопки в диалоге
    properties: [
      'openFile', // Указываем тип диалога
      'multiSelections', // Указываем возможность выбрать несколько файлов
      'createDirectory' // Добавляем кнопку создать новую папку в MacOS
    ]
  }, (openPath) => {
    console.log(openPath) // Получим массив с путями к файлам
  })
}

Пример диалогового окна для сохранения файла –
1
2
3
4
5
6
7
function saveDialog() {
  dialog.showSaveDialog({
    defaultPath: './images', // Путь по умолчанию
  }, (filename) => {
      console.log(filename) // Получим путь с именем файла
  })
}

Пример диалогового окна для показа сообщения с вопросами к пользователю –
1
2
3
4
5
6
7
8
9
10
11
function messageDialog() {
  let buttons = ['Yes', 'No', 'Maybe'];
  dialog.showMessageBox({
    buttons: buttons,
    title: 'Electron Message Dialog',
    message: 'Please select an answer',
    detail: 'A more descriptive message with some details',
  }, (buttonIndex) => {
      console.log('User selected: ' + buttons[buttonIndex]) // Получим ответ из диалога
  })
}

Пример диалогового окна для сообщения о ошибке –
1
2
3
4
5
6
function messageErrorDialog() {
  dialog.showErrorBox(
    'Electron Error Message',
    'Error Message'
  )
}

Методов и параметров значительно больше чем рассмотрено здесь, для поиска необходимого решения лучше всего обратиться к документации – dialog

Здесь можно более детально рассмотреть проект на GitHub с установленными настройкам и дополнениями –  https://github.com/NetWorkRoom/electron-start/tree/dialog.

Теги :