Электрон - Системные диалоги

Очень важно, чтобы любое приложение было удобным для пользователя. В результате вам не следует создавать диалоговые окна с помощью вызовов alert (). Electron предоставляет довольно хороший интерфейс для выполнения задачи создания диалоговых окон. Давайте посмотрим на это.

Электрон обеспечивает dialog модуль, который мы можем использовать для отображения собственных системных диалогов для открытия и сохранения файлов, предупреждений и т. д.

Давайте сразу перейдем к примеру и создадим приложение для отображения простых текстовых файлов.

Создайте новый файл main.js и введите в него следующий код -

const {app, BrowserWindow} = require('electron') 
const url = require('url') 
const path = require('path') 
const {ipcMain} = require('electron')  

let win  

function createWindow() { 
   win = new BrowserWindow({width: 800, height: 600}) 
   win.loadURL(url.format ({ 
      pathname: path.join(__dirname, 'index.html'), 
      protocol: 'file:', 
      slashes: true 
   })) 
}  

ipcMain.on('openFile', (event, path) => { 
   const {dialog} = require('electron') 
   const fs = require('fs') 
   dialog.showOpenDialog(function (fileNames) { 
      
      // fileNames is an array that contains all the selected 
      if(fileNames === undefined) { 
         console.log("No file selected"); 
      
      } else { 
         readFile(fileNames[0]); 
      } 
   });
   
   function readFile(filepath) { 
      fs.readFile(filepath, 'utf-8', (err, data) => { 
         
         if(err){ 
            alert("An error ocurred reading the file :" + err.message) 
            return 
         } 
         
         // handle the file content 
         event.sender.send('fileData', data) 
      }) 
   } 
})  
app.on('ready', createWindow)

Этот код будет открывать диалоговое окно открытия всякий раз, когда наш основной процесс получает сообщение openFile от процесса рендеринга. Это сообщение перенаправит содержимое файла обратно в процесс рендеринга. Теперь нам нужно будет распечатать содержимое.

Теперь создайте новый index.html файл со следующим содержанием -

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8"> 
      <title>File read using system dialogs</title> 
   </head> 
   
   <body> 
      <script type = "text/javascript"> 
         const {ipcRenderer} = require('electron') 
         ipcRenderer.send('openFile', () => { 
            console.log("Event sent."); 
         }) 
         
         ipcRenderer.on('fileData', (event, data) => { 
            document.write(data) 
         }) 
      </script> 
   </body> 
</html>

Теперь всякий раз, когда мы запускаем наше приложение, появляется собственное открытое диалоговое окно, как показано на следующем снимке экрана -

Как только мы выберем файл для отображения, его содержимое будет отображаться в окне приложения -

Это был только один из четырех диалогов, которые предоставляет Electron. Однако все они имеют одинаковое использование. Как только вы научитесь это делать с помощьюshowOpenDialog, то вы можете использовать любой другой диалог.

Диалоги с той же функциональностью:

showSaveDialog ([browserWindow,] параметры [, обратный вызов])
showMessageDialog ([browserWindow,] параметры [, обратный вызов])
showErrorDialog (заголовок, содержание)