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

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

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

Пример диалогового окна для открытия файла –

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

function showDialog() {

dialog.showOpenDialog({

defaultPath: './images', // Путь по умолчанию

buttonLabel: 'Select Logo', // Название кнопки в диалоге

properties: [

'openFile', // Указываем тип диалога

'multiSelections', // Указываем возможность выбрать несколько файлов

'createDirectory' // Добавляем кнопку создать новую папку в MacOS

]

}, (openPath) => {

console.log(openPath) // Получим массив с путями к файлам

})

}

Пример диалогового окна для сохранения файла –

function saveDialog() {
  dialog.showSaveDialog({
    defaultPath: './images', // Путь по умолчанию 
  }, (filename) => {
      console.log(filename) // Получим путь с именем файла
  })
}

function saveDialog() {

dialog.showSaveDialog({

defaultPath: './images', // Путь по умолчанию

}, (filename) => {

console.log(filename) // Получим путь с именем файла

})

}

Пример диалогового окна для показа сообщения с вопросами к пользователю –

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]) // Получим ответ из диалога
  })
}

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]) // Получим ответ из диалога

})

}

Пример диалогового окна для сообщения о ошибке –

function messageErrorDialog() {
  dialog.showErrorBox(
    'Electron Error Message',
    'Error Message'
  )
}

function messageErrorDialog() {

dialog.showErrorBox(

'Electron Error Message',

'Error Message'

)

}

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

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