Elektron - Dialog Sistem

Sangat penting bagi aplikasi apa pun untuk menjadi yang ramah pengguna. Akibatnya, Anda tidak boleh membuat kotak dialog menggunakan panggilan alert (). Electron menyediakan antarmuka yang cukup bagus untuk menyelesaikan tugas membuat kotak dialog. Mari kita lihat.

Elektron menyediakan a dialog modul yang dapat kita gunakan untuk menampilkan dialog sistem asli untuk membuka dan menyimpan file, memberi peringatan, dll.

Mari kita langsung beralih ke contoh dan membuat aplikasi untuk menampilkan file tekstil sederhana.

Buat file main.js baru dan masukkan kode berikut di dalamnya -

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)

Kode ini akan membuka kotak dialog terbuka setiap kali proses utama kami menerima pesan 'openFile' dari proses renderer. Pesan ini akan mengarahkan kembali konten file ke proses renderer. Sekarang, kita harus mencetak isinya.

Sekarang, buat file index.html file dengan konten berikut -

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

Sekarang setiap kali kami menjalankan aplikasi kami, kotak dialog terbuka asli akan muncul seperti yang ditunjukkan pada gambar berikut -

Setelah kami memilih file untuk ditampilkan, isinya akan ditampilkan di jendela aplikasi -

Ini hanyalah salah satu dari empat dialog yang disediakan oleh Electron. Mereka semua memiliki penggunaan yang serupa. Setelah Anda mempelajari cara melakukannya dengan menggunakanshowOpenDialog, lalu Anda dapat menggunakan dialog lainnya.

Dialog yang memiliki fungsi yang sama adalah -

showSaveDialog ([browserWindow,] options [, callback])
showMessageDialog ([browserWindow,] options [, callback])
showErrorDialog (judul, konten)