Electron-단축키 정의

우리는 일반적으로 PC에서 매일 사용하는 모든 앱에 대한 특정 바로 가기를 기억했습니다. 응용 프로그램이 직관적이고 사용자가 쉽게 액세스 할 수 있도록하려면 사용자가 바로 가기를 사용할 수 있도록 허용해야합니다.

globalShortcut 모듈을 사용하여 앱에서 바로 가기를 정의합니다. 참고Accelerators+ 문자로 결합 된 여러 수정 자와 키 코드를 포함 할 수있는 문자열입니다. 이러한 액셀러레이터는 애플리케이션 전체에서 키보드 단축키를 정의하는 데 사용됩니다.

예를 들어서 바로 가기를 만들어 보겠습니다. 이를 위해 파일을 열기 위해 열린 대화 상자를 사용한 대화 상자 예제를 따릅니다. 우리는CommandOrControl+O 바로 가기를 눌러 대화 상자를 불러옵니다.

우리의 main.js코드는 이전과 동일하게 유지됩니다. 그래서 새로 만들기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'메시지를받을 때마다 열기 대화 상자를 엽니 다. 이전에는 앱이 실행될 때마다이 대화 상자가 나타났습니다. 이제 우리가 누를 때만 열리도록 제한하겠습니다.CommandOrControl+O.

이제 새로 만들기 index.html 다음 내용의 파일-

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>File read using system dialogs</title>
   </head>
   
   <body>
      <p>Press CTRL/CMD + O to open a file. </p>
      <script type = "text/javascript">
         const {ipcRenderer, remote} = require('electron')
         const {globalShortcut} = remote
         globalShortcut.register('CommandOrControl+O', () => {
            ipcRenderer.send('openFile', () => {
               console.log("Event sent.");
            })
            
            ipcRenderer.on('fileData', (event, data) => {
               document.write(data)
            })
         })
      </script>
   </body>
</html>

새 바로 가기를 등록하고이 바로 가기를 누를 때마다 실행되는 콜백을 전달했습니다. 바로 가기가 필요하지 않을 때 등록을 취소 할 수 있습니다.

이제 앱이 열리면 방금 정의한 바로 가기를 사용하여 파일을 열라는 메시지가 표시됩니다.

이러한 바로 가기는 사용자가 정의 된 작업에 대해 자신의 바로 가기를 선택할 수 있도록하여 사용자 정의 할 수 있습니다.