Electron - Xác định phím tắt

Chúng tôi thường ghi nhớ các phím tắt nhất định cho tất cả các ứng dụng mà chúng tôi sử dụng trên PC hàng ngày. Để làm cho các ứng dụng của bạn cảm thấy trực quan và dễ dàng truy cập đối với người dùng, bạn phải cho phép người dùng sử dụng các phím tắt.

Chúng tôi sẽ sử dụng mô-đun globalShortcut để xác định các phím tắt trong ứng dụng của mình. Lưu ý rằngAcceleratorslà các Chuỗi có thể chứa nhiều bổ ngữ và mã khóa, được kết hợp bởi ký tự +. Các trình tăng tốc này được sử dụng để xác định các phím tắt trong suốt ứng dụng của chúng tôi.

Chúng ta hãy xem xét một ví dụ và tạo một phím tắt. Đối với điều này, chúng tôi sẽ làm theo ví dụ về hộp thoại nơi chúng tôi đã sử dụng hộp thoại mở để mở tệp. Chúng tôi sẽ đăng ký mộtCommandOrControl+O phím tắt để hiển thị hộp thoại.

Của chúng tôi main.jsmã sẽ vẫn như trước. Vì vậy, hãy tạo mộtmain.js 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. Trước đó hộp thoại này xuất hiện bất cứ khi nào ứng dụng được chạy. Bây giờ chúng ta hãy giới hạn nó chỉ mở khi chúng ta nhấnCommandOrControl+O.

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

Chúng tôi đã đăng ký một phím tắt mới và chuyển một lệnh gọi lại sẽ được thực thi bất cứ khi nào chúng ta nhấn phím tắt này. Chúng tôi có thể hủy đăng ký các phím tắt khi không yêu cầu.

Bây giờ khi ứng dụng được mở, chúng ta sẽ nhận được thông báo mở tệp bằng phím tắt mà chúng ta vừa xác định.

Các phím tắt này có thể được tùy chỉnh bằng cách cho phép người dùng chọn phím tắt của riêng mình cho các hành động đã xác định.