تعریف میانبر (Shortcut) در الکترون

به طور معمول ما با برنامه های مختلفی کار می کنیم و اکثر این برنامه ها دارای میانبرهایی هستند که برای راحتی کار با برنامه تعریف شده اند. در برنامه هایی که با الکترون نوشته می شوند نیز می توان به راحتی برای قسمت های مختلف برنامه کلید های میانبر تعریف کرد. در این بخش به بررسی این موضوع می پردازیم.

ما از ماژول globalShortcut برای تعریف میانبرهای مربوط به برنامه خود استفاده خواهیم کرد. توجه داشته باشید که Accelerator رشته ای شامل چند کلید کنترلی مانند CTRL، ALT و غیره به همراه سایر کلید های کیبورد است (مانند CTRL + N).

برای درک بهتر موضوع مثالی که در بخش آموزش System Dialog در الکترون ایجاد کردیم را در اینجا تغییر می دهیم و یک کلید میانبر برای باز کردن فایل (CommandOrControl+O) ایجاد خواهیم کرد.

یک فایل جدید با نام 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>

در کد فوق ما یک میانبر ثبت و یک callback برای مشخص کردیم که در هنگام فشرده شدن کلید میانبر اجرا خواهد شد.

حال اگر برنامه را اجرا کرده و کلید های ترکیبی CTRL + O را فشار دهید، کادر مربوط به انتخاب فایل نمایش داده می شود. مانند تصویر زیر: