Elétron - Definindo Atalhos

Normalmente, memorizamos certos atalhos para todos os aplicativos que usamos diariamente em nosso PC. Para tornar seus aplicativos intuitivos e facilmente acessíveis ao usuário, você deve permitir que o usuário use atalhos.

Usaremos o módulo globalShortcut para definir atalhos em nosso aplicativo. Observe queAcceleratorssão Strings que podem conter vários modificadores e códigos de tecla, combinados pelo caractere +. Esses aceleradores são usados para definir atalhos de teclado em todo o nosso aplicativo.

Vamos considerar um exemplo e criar um atalho. Para isso, seguiremos o exemplo das caixas de diálogo onde utilizamos a caixa de diálogo abrir para abrir arquivos. Vamos registrar umCommandOrControl+O atalho para abrir a caixa de diálogo.

Nosso main.jso código permanecerá o mesmo de antes. Então, crie um novomain.js arquivo e digite o seguinte código nele -

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)

Este código irá abrir a caixa de diálogo aberta sempre que nosso processo principal receber uma mensagem 'openFile' de um processo renderizador. Anteriormente, essa caixa de diálogo aparecia sempre que o aplicativo era executado. Vamos agora limitar a abertura apenas quando pressionamosCommandOrControl+O.

Agora crie um novo index.html arquivo com o seguinte conteúdo -

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

Registramos um novo atalho e passamos um callback que será executado sempre que pressionarmos este atalho. Podemos cancelar o registro de atalhos quando não os exigirmos.

Agora, uma vez que o aplicativo seja aberto, obteremos a mensagem para abrir o arquivo usando o atalho que acabamos de definir.

Esses atalhos podem ser personalizados, permitindo que o usuário escolha seus próprios atalhos para ações definidas.