Электрон: Диалоговое окно «Подсказка и модаль»

Создание модального диалогового окна для взаимодействия с пользователем.

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

Для создания этого диалогового окна используются объект BrowserWindows и HTML-страница, определяющая содержимое окна. Было бы проще создать его в окне приложения, но это невозможно. Чтобы быть модальным, окно должно указывать - по его определению - родительское окно. Поэтому он должен находиться в основном процессе, так как кажется, что окно процесса рендеринга не может иметь родителя в ручном процессе, а окно приложения открывается в ручном процессе.

Мы также используем протокол связи IPC от Electron, который подходит лучше, чем WebSocket, благодаря его синхронному режиму. Сравнение двух протоколов см. в разделе IPC против WebSocket.

Исходный код диалогового окна

Эта HTML-страница загружается в окно BrowserWindows, которое используется для создания диалогового окна, и определяет содержимое этого диалогового окна. 

<body>
<p id="label"></p>
<p>
  <input type = "text" id="data" value="">
  <input type = "button" id="ok" value="OK" onclick="response()">
  <input type = "button" value="Cancel" onclick="cancel()">
</p>

<script>
const { ipcRenderer } = require("electron")
function cancel() {
  ipcRenderer.send("closeDialog", "")
  this.close();
}

function response() {
  ipcRenderer.send("closeDialog", document.getElementById("data").value)
  this.close();
}

window.onload=function() {
  var options = ipcRenderer.sendSync("openDialog", "")
  var params = JSON.parse(options)
  document.getElementById("label").innerHTML = params.label;
  document.getElementById("data").value = params.value;
  document.getElementById("ok").value = params.ok;
}
</script>
</body>

При загрузке страницы элементов настройки из бэкенда запрашиваются описательная метка, значение по умолчанию для текстового поля ввода и метка кнопки действия.
Название диалогового окна задается бэкендом.

При нажатии кнопки ОК введенное пользователем содержимое передается на бэкэнд по каналу «closeDialog».
Когда ты нажимаешь «Отменить», ты посылаешь пустую строку.

Исходный код бэкэнда ipcMain

Диалоговое окно создается в главном процессе рядом с окном приложения, потомком которого оно должно быть определено. 

var promptWindow;
var promptOptions
var promptAnswer;

// Creating the dialog

function promptModal(parent, options, callback) {
  promptOptions = options;
  promptWindow = new BrowserWindow({
    width:360, height: 120, 
    'parent': parent,
    'show': false,
    'modal': true,
    'alwaysOnTop' : true, 
    'title' : options.title,
    'autoHideMenuBar': true,
    'webPreferences' : { 
      "nodeIntegration":true,
      "sandbox" : false 
    }   
  });
  promptWindow.on('closed', () => { 
    promptWindow = null 
    callback(promptAnswer);
  })

  // Load the HTML dialog box
  promptWindow.loadURL(path.join(__dirname, "prompt.html"))
  promptWindow.once('ready-to-show', () => { promptWindow.show() })
}

// Called by the dialog box to get its parameters

ipcMain.on("openDialog", (event, data) => {
    event.returnValue = JSON.stringify(promptOptions, null, '')
})

// Called by the dialog box when closed

ipcMain.on("closeDialog", (event, data) => {
  promptAnswer = data
})

// Called by the application to open the prompt dialog

ipcMain.on("prompt",  (event, notused) => {
	promptModal(win, {
	    "title": "Prompt demo",
	    "label":"Fill this input field:", 
	    "value":"example", 
	    "ok": "ok"
	    }, 
	    function(data) {
        event.returnValue = data
      }
    );        
});

Канал «openDialog» создается страницей диалогового окна во время загрузки для получения параметров окна.
Канал «closeDialog» открыт для возврата введенного пользователем значения или пустой строки, если он прекращает операцию.

Третий канал, «быстрый», также должен быть открыт, на этот раз приложением, для управления открытием диалогового окна. Как и предыдущие два, он синхронен, поскольку окно модально и прерывает любые другие операции.

Во время обратного вызова канал «prompt» вызывает функцию promptModal, которая создает диалоговое окно. Указано родительское окно win. Сама функция promptModal имеет обратный вызов, который возвращает приложению, открывшему канал «prompt» введенное пользователем значение.

Исходный код приложения, использующего запрос

Эта HTML-страница загружается в окно основного процесса. 

<body>
  <h1>Prompt demo</h1>
  <p>
    <input type="button" value="Get a value" onclick="ePrompt()">
  </p>
  <fieldset><div id="answer"></div></fieldset>

<script>
const { ipcRenderer } = require("electron")
function ePrompt() {
  var answer = ipcRenderer.sendSync("prompt", "")
  if(answer != "") 
    document.getElementById("answer").innerHTML = answer;
}
</script>
</body>

Эта демонстрационная программа довольно проста: при нажатии на кнопку она вызывает функцию ePrompt (). Она открывает синхронный канал «prompt» с бэкендом, который приказывает ему открыть диалоговое окно.
Ответ пользователя - возвращаемое значение функции ipcRenderer sendSyнк.
Это значение отображается в полевом наборе.

Загрузка

Полный код демонстрации доступен в архиве для скачивания.

Чтобы запустить приложение, зайдите в каталог electron-prompt и введите:

electron prompt.js

См. также: Electron: Prompt с тегом HTML dialog.
Диалоговое окно подстановки модели, полностью созданное с использованием элементов Electron.