Electron - Boîtes de dialogue système

Il est très important que toute application soit conviviale. Par conséquent, vous ne devez pas créer de boîtes de dialogue utilisant des appels alert (). Electron fournit une assez bonne interface pour accomplir la tâche de création de boîtes de dialogue. Jetons-y un coup d'œil.

Electron fournit un dialog module que nous pouvons utiliser pour afficher des boîtes de dialogue système natives pour ouvrir et enregistrer des fichiers, alerter, etc.

Passons directement à un exemple et créons une application pour afficher des fichiers texte simples.

Créez un nouveau fichier main.js et entrez le code suivant -

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)

Ce code ouvrira la boîte de dialogue ouverte chaque fois que notre processus principal reçoit un message 'openFile' d'un processus de rendu. Ce message redirigera le contenu du fichier vers le processus de rendu. Maintenant, nous devrons imprimer le contenu.

Maintenant, créez un nouveau index.html fichier avec le contenu suivant -

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

Maintenant, chaque fois que nous exécutons notre application, une boîte de dialogue ouverte native apparaîtra comme indiqué dans la capture d'écran suivante -

Une fois que nous avons sélectionné un fichier à afficher, son contenu sera affiché dans la fenêtre de l'application -

Ce n'était que l'un des quatre dialogues proposés par Electron. Cependant, ils ont tous un usage similaire. Une fois que vous avez appris à le faire en utilisantshowOpenDialog, vous pouvez alors utiliser n'importe laquelle des autres boîtes de dialogue.

Les boîtes de dialogue ayant la même fonctionnalité sont -

showSaveDialog ([browserWindow,] options [, rappel])
showMessageDialog ([browserWindow,] options [, rappel])
showErrorDialog (titre, contenu)