Electron - Dialoghi di sistema

È molto importante che qualsiasi app sia di facile utilizzo. Di conseguenza non dovresti creare finestre di dialogo usando le chiamate alert (). Electron fornisce un'interfaccia piuttosto buona per svolgere il compito di creare finestre di dialogo. Diamo un'occhiata a questo.

Electron fornisce a dialog modulo che possiamo utilizzare per visualizzare le finestre di dialogo del sistema nativo per l'apertura e il salvataggio di file, avvisi, ecc.

Passiamo direttamente a un esempio e creiamo un'app per visualizzare semplici file di testo.

Crea un nuovo file main.js e inserisci il seguente codice al suo interno -

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)

Questo codice aprirà la finestra di dialogo aperta ogni volta che il nostro processo principale riceve un messaggio "openFile" da un processo di rendering. Questo messaggio reindirizzerà il contenuto del file al processo di rendering. Ora dovremo stampare il contenuto.

Ora crea un nuovo file index.html file con il seguente contenuto -

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

Ora ogni volta che eseguiamo la nostra app, verrà visualizzata una finestra di dialogo aperta nativa come mostrato nello screenshot seguente:

Una volta selezionato un file da visualizzare, il suo contenuto verrà visualizzato nella finestra dell'app -

Questo era solo uno dei quattro dialoghi forniti da Electron. Tuttavia, hanno tutti un utilizzo simile. Una volta che impari a farlo usandoshowOpenDialog, quindi puoi utilizzare una qualsiasi delle altre finestre di dialogo.

Le finestre di dialogo con la stessa funzionalità sono:

  • showSaveDialog ([browserWindow,] opzioni [, callback])
  • showMessageDialog ([browserWindow,] opzioni [, callback])
  • showErrorDialog (titolo, contenuto)