Electron - Hộp thoại Hệ thống

Điều rất quan trọng đối với bất kỳ ứng dụng nào là phải thân thiện với người dùng. Do đó, bạn không nên tạo hộp thoại bằng lời gọi alert (). Electron cung cấp một giao diện khá tốt để hoàn thành nhiệm vụ tạo hộp thoại. Hãy để chúng tôi có một cái nhìn vào nó.

Electron cung cấp một dialog mô-đun mà chúng tôi có thể sử dụng để hiển thị các hộp thoại hệ thống gốc để mở và lưu tệp, cảnh báo, v.v.

Hãy để chúng tôi trực tiếp xem một ví dụ và tạo một ứng dụng để hiển thị các tệp văn bản đơn giản.

Tạo tệp main.js mới và nhập mã sau vào đó:

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)

Mã này sẽ bật mở hộp thoại đang mở bất cứ khi nào quy trình chính của chúng tôi nhận được thông báo 'openFile' từ quy trình kết xuất. Thông báo này sẽ chuyển hướng nội dung tệp trở lại quá trình kết xuất. Bây giờ, chúng ta sẽ phải in nội dung.

Bây giờ, hãy tạo một index.html tệp với nội dung sau:

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

Bây giờ bất cứ khi nào chúng tôi chạy ứng dụng của mình, một hộp thoại mở tự nhiên sẽ bật lên như được hiển thị trong ảnh chụp màn hình sau:

Khi chúng tôi chọn một tệp để hiển thị, nội dung của tệp sẽ được hiển thị trên cửa sổ ứng dụng -

Đây chỉ là một trong bốn hộp thoại mà Electron cung cấp. Tất cả chúng đều có cách sử dụng tương tự nhau. Sau khi bạn học cách sử dụngshowOpenDialog, sau đó bạn có thể sử dụng bất kỳ hộp thoại nào khác.

Các hộp thoại có cùng chức năng là -

showSaveDialog ([browserWindow,] tùy chọn [, callback])
showMessageDialog ([browserWindow,] tùy chọn [, callback])
showErrorDialog (tiêu đề, nội dung)