Диалоговое окно HTML и модельное окно для Electron

Для замены быстрого () или другого диалогового окна используется простой HTML-тег.

Тег <dialog> HTML пока (апрель 2017) реализован только в Chrome. Так что не для использования в веб-приложении, но для Electron это другое...

В предыдущей статье мы видели, как заменить диалоговое окно prompt (), отсутствующее в разделе Electron, на BrowserWindows. Это работает в ipcMain, но было бы проще, если бы у нас было решение в ipcRenderer, так что прямо в коде интерфейса приложения. С помощью нового тега <dialog> можно создать модальное диалоговое окно в HTML.

Он всегда будет асинхронным, поскольку обработка не прекращается в точке создания диалогового окна. Но она блокирует взаимодействие с пользователем до тех пор, пока он не будет закрыт, что является модальным, что требуется, если лечение зависит от ответа пользователя.

Исходный код диалогового окна прост...

<dialog id="pDialog">
  <label for="pAnswer" id="pLabel">Default label:</label>
  <input id="pAnswer" type="text" value="">
  <menu>
    <button onclick="pDialog.close('')">Cancel</button>
    <button onclick="pDialog.close(document.getElementById('pAnswer').value)">OK</button>
  </menu>
</dialog>

Метод закрытого диалога возвращает значение, заданное программой. В данном случае, когда пользователь нажимает кнопку ОК, то возвращается то, что он ввел в текстовое поле ввода.

Когда пользователь нажимает кнопку «Отменить», возвращается пустая строка.

Затем определяется функция, которая заменит команду prompt ():

function promptDialog(question, cb) {
  var pDialog = document.getElementById('pDialog')

  var fe = function(e) {
    cb(pDialog.returnValue)
    pDialog.removeEventListener("close", fe)
  }  

  document.getElementById("pLabel").innerHTML = question  
  var x = pDialog.showModal()
  pDialog.addEventListener('close', fe)
}

Первый параметр - это формулировка из коробки, которая соответствует вопросу, на который пользователь должен дать ответ.
Второй параметр - это обратный вызов, необходимый, поскольку диалог является асинхронным и используется для возврата ответа.

Откроется поле с методом showModal (). Затем значение параметра метода close () извлекается с помощью прослушивателя и атрибута dialog returnValue.

Этот запрос замены используется с вызовом функции:

promptDialog("Mon propre libellé:", function(x) {
    if(x != '')
        alert(x)
})

Замените предупреждение (x) кодом, специфичным для вашего приложения...

Полный код демо доступен в архиве:

Чтобы запустить демонстрацию, введите: electron dialog.js

Этот код может быть обобщен для всевозможных диалоговых окон и фактически делает диалог. showMessageBox () устаревшим.

Диалоговое окно используется Advanced Explorer с версии 4.3 для функций Copy/Rename и Create folder.