Учебники

Электрон — Определение ярлыков

Февраль 4, 2019

Обычно мы запоминаем определенные ярлыки для всех приложений, которые мы ежедневно используем на нашем ПК. Чтобы сделать ваши приложения интуитивно понятными и легкодоступными для пользователя, вы должны разрешить пользователю использовать ярлыки.

Мы будем использовать модуль globalShortcut для определения ярлыков в нашем приложении. Обратите внимание, что ускорители — это строки, которые могут содержать несколько модификаторов и кодов клавиш, объединенных символом +. Эти ускорители используются для определения сочетаний клавиш в нашем приложении.

Давайте рассмотрим пример и создадим ярлык. Для этого мы будем следовать примеру диалоговых окон, где мы использовали открытое диалоговое окно для открытия файлов. Мы зарегистрируем ярлык 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>

Мы зарегистрировали новый ярлык и передали обратный вызов, который будет выполняться всякий раз, когда мы нажимаем этот ярлык. Мы можем отменить регистрацию ярлыков, когда они нам не нужны.

Теперь, когда приложение открыто, мы получим сообщение об открытии файла, используя только что определенный ярлык.

Открыть диалог

Эти ярлыки можно сделать настраиваемыми, позволяя пользователю выбирать свои ярлыки для определенных действий.

45
Share: