Electron - okna dialogowe systemu

Bardzo ważne jest, aby każda aplikacja była przyjazna dla użytkownika. W rezultacie nie powinieneś tworzyć okien dialogowych za pomocą wywołań alert (). Electron zapewnia całkiem niezły interfejs do wykonania zadania tworzenia okien dialogowych. Przyjrzyjmy się temu.

Electron zapewnia plik dialog moduł, którego możemy użyć do wyświetlania rodzimych okien dialogowych systemu do otwierania i zapisywania plików, alarmowania itp.

Przejdźmy bezpośrednio do przykładu i stwórzmy aplikację do wyświetlania prostych plików tekstowych.

Utwórz nowy plik main.js i wprowadź w nim następujący kod -

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)

Ten kod otworzy otwarte okno dialogowe za każdym razem, gdy nasz główny proces otrzyma komunikat „openFile” z procesu renderowania. Ta wiadomość przekieruje zawartość pliku z powrotem do procesu renderowania. Teraz będziemy musieli wydrukować treść.

Teraz utwórz nowy index.html plik o następującej treści -

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

Teraz za każdym razem, gdy uruchamiamy naszą aplikację, pojawi się natywne otwarte okno dialogowe, jak pokazano na poniższym zrzucie ekranu -

Po wybraniu pliku do wyświetlenia jego zawartość zostanie wyświetlona w oknie aplikacji -

To było tylko jedno z czterech okien dialogowych oferowanych przez Electron. Wszystkie mają jednak podobne zastosowanie. Gdy nauczysz się, jak to zrobić, używającshowOpenDialog, możesz użyć dowolnego z pozostałych okien dialogowych.

Okna dialogowe mające tę samą funkcjonalność to -

showSaveDialog ([browserWindow,] options [, callback])
showMessageDialog ([browserWindow,] options [, callback])
showErrorDialog (tytuł, treść)