Electron - Definición de atajos

Por lo general, hemos memorizado ciertos atajos para todas las aplicaciones que usamos en nuestra PC a diario. Para que sus aplicaciones se sientan intuitivas y de fácil acceso para el usuario, debe permitir que el usuario utilice atajos.

Usaremos el módulo globalShortcut para definir accesos directos en nuestra aplicación. Tenga en cuenta queAcceleratorsson cadenas que pueden contener varios modificadores y códigos de tecla, combinados con el carácter +. Estos aceleradores se utilizan para definir atajos de teclado en toda nuestra aplicación.

Consideremos un ejemplo y creemos un atajo. Para ello, seguiremos el ejemplo de los cuadros de diálogo donde usamos el cuadro de diálogo abrir para abrir archivos. Registraremos unCommandOrControl+O atajo para abrir el cuadro de diálogo.

Nuestra main.jsEl código seguirá siendo el mismo que antes. Así que crea un nuevomain.js archivo e ingrese el siguiente código en él -

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 abrirá el cuadro de diálogo de apertura cada vez que nuestro proceso principal reciba un mensaje 'openFile' de un proceso de renderizado. Anteriormente, este cuadro de diálogo aparecía cada vez que se ejecutaba la aplicación. Limitémoslo ahora para que se abra solo cuando presionamosCommandOrControl+O.

Ahora crea un nuevo index.html archivo con el siguiente contenido -

<!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 un nuevo atajo y pasamos una devolución de llamada que se ejecutará cada vez que presionemos este atajo. Podemos dar de baja los accesos directos cuando no los necesitemos.

Ahora, una vez que se abre la aplicación, obtendremos el mensaje para abrir el archivo usando el acceso directo que acabamos de definir.

Estos atajos se pueden personalizar permitiendo al usuario elegir sus propios atajos para acciones definidas.

↰ Previous page Next page ↱