Elétron - Diálogos do Sistema

É muito importante que qualquer aplicativo seja amigável. Como resultado, você não deve criar caixas de diálogo usando chamadas alert (). Electron fornece uma interface muito boa para realizar a tarefa de criar caixas de diálogo. Vamos dar uma olhada nisso.

Elétron fornece um dialog módulo que podemos usar para exibir diálogos nativos do sistema para abrir e salvar arquivos, alertar, etc.

Vamos pular diretamente para um exemplo e criar um aplicativo para exibir arquivos de texto simples.

Crie um novo arquivo main.js e insira o seguinte código nele -

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)

Este código irá abrir a caixa de diálogo aberta sempre que nosso processo principal receber uma mensagem 'openFile' de um processo de renderização. Esta mensagem redirecionará o conteúdo do arquivo de volta ao processo de renderização. Agora teremos que imprimir o conteúdo.

Agora, crie um novo index.html arquivo com o seguinte conteúdo -

<!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>

Agora, sempre que executamos nosso aplicativo, uma caixa de diálogo nativa aberta aparecerá, conforme mostrado na imagem a seguir -

Depois de selecionar um arquivo para exibir, seu conteúdo será exibido na janela do aplicativo -

Este foi apenas um dos quatro diálogos que Electron oferece. Todos eles têm um uso semelhante. Depois de aprender a fazer isso usandoshowOpenDialog, então você pode usar qualquer uma das outras caixas de diálogo.

Os diálogos com a mesma funcionalidade são -

showSaveDialog ([browserWindow,] options [, callback])
showMessageDialog ([browserWindow,] options [, callback])
showErrorDialog (título, conteúdo)

↰ Previous page Next page ↱