Electron-시스템 대화 상자

모든 앱이 사용자 친화적 인 앱이되는 것은 매우 중요합니다. 결과적으로 alert () 호출을 사용하여 대화 상자를 작성해서는 안됩니다. Electron은 대화 상자를 만드는 작업을 수행 할 수있는 꽤 좋은 인터페이스를 제공합니다. 한 번 살펴 보겠습니다.

Electron은 dialog 파일 열기 및 저장, 경고 등을위한 기본 시스템 대화 상자를 표시하는 데 사용할 수있는 모듈입니다.

예제로 직접 이동하여 간단한 텍스트 파일을 표시하는 앱을 만들어 보겠습니다.

새 main.js 파일을 만들고 다음 코드를 입력하십시오.

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)

이 코드는 메인 프로세스가 렌더러 프로세스에서 'openFile'메시지를받을 때마다 열기 대화 상자를 엽니 다. 이 메시지는 파일 콘텐츠를 렌더러 프로세스로 다시 리디렉션합니다. 이제 내용을 인쇄해야합니다.

이제 새로운 index.html 다음 내용의 파일-

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

이제 앱을 실행할 때마다 다음 스크린 샷과 같이 기본 열기 대화 상자가 나타납니다.