Electron - Diálogos del sistema

Es muy importante que cualquier aplicación sea fácil de usar. Como resultado, no debe crear cuadros de diálogo utilizando llamadas alert (). Electron proporciona una interfaz bastante buena para realizar la tarea de crear cuadros de diálogo. Echemos un vistazo.

Electron proporciona un dialog módulo que podemos usar para mostrar los diálogos nativos del sistema para abrir y guardar archivos, alertas, etc.

Pasemos directamente a un ejemplo y creemos una aplicación para mostrar archivos de texto simples.

Cree un nuevo archivo main.js e ingrese el siguiente código en él:

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 abrirá el cuadro de diálogo de apertura cada vez que nuestro proceso principal reciba un mensaje 'openFile' de un proceso de renderizado. Este mensaje redirigirá el contenido del archivo al proceso de renderizado. Ahora tendremos que imprimir el contenido.

Ahora, crea un nuevo index.html archivo con el siguiente contenido -

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

Ahora, cada vez que ejecutamos nuestra aplicación, aparecerá un cuadro de diálogo abierto nativo como se muestra en la siguiente captura de pantalla:

Una vez que seleccionamos un archivo para mostrar, su contenido se mostrará en la ventana de la aplicación:

Este fue solo uno de los cuatro diálogos que proporciona Electron. Sin embargo, todos tienen un uso similar. Una vez que aprenda a hacerlo usandoshowOpenDialog, luego puede usar cualquiera de los otros cuadros de diálogo.

Los cuadros de diálogo que tienen la misma funcionalidad son:

showSaveDialog ([browserWindow,] opciones [, callback])
showMessageDialog ([browserWindow,] opciones [, devolución de llamada])
showErrorDialog (título, contenido)

↰ Previous page Next page ↱