Atajos de teclado en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.
El uso de atajos de teclado es una actividad eficiente y que ahorra tiempo. Los usuarios que están acostumbrados a utilizar los métodos abreviados de teclado son más productivos y realizan múltiples tareas de manera más eficiente que los usuarios que no lo hacen. Los atajos de teclado te permiten lograr más con menos esfuerzo. Son útiles cuando se gestionan numerosas tareas en el PC a la vez. Electron nos proporciona una forma en la que podemos definir accesos directos globales en toda la aplicación utilizando los métodos de Instancia del acceso directo global integrado.módulo. Este tutorial demostrará cómo registrar atajos de teclado globales en toda la aplicación en Electron.
Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto:

Atajos Globales en Electron: El módulo globalShortcut se utiliza para detectar Eventos de Teclado cuando la aplicación no tiene Foco de Teclado ya que el evento registrado es Global. Este Módulo es parte del Proceso Principal . Para importar y usar el módulo globalShortcut en el proceso Renderer , usaremos el módulo remoto Electron . El módulo globalShortcut registra/desregistra un atajo de teclado global con el sistema operativo nativo y podemos personalizar estos atajos para realizar varias operaciones en toda la aplicación. Este módulo solo debe usarse después del evento listo de la aplicaciónEl módulo se emite como se muestra en el archivo main.js. El módulo globalShortcut solo admite métodos de instancia. No tiene eventos de Instancia ni propiedades asociadas.
Ejemplo: siga los pasos dados para implementar accesos directos globales en Electron. 
 

• Paso 1: siga los pasos indicados en Cómo encontrar texto en una página en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Realice también los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 
  paquete.json: 
   

{
  "name": "electron-shortcut",
  "version": "1.0.0",
  "description": "Register Global Shortcuts in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

• Salida: en este punto, nuestra aplicación electrónica básica está configurada. Al iniciar la aplicación, deberíamos ver el siguiente resultado: 
   

• Paso 2: agregue los siguientes fragmentos de código en el archivo index.html e index.js para implementar accesos directos globales en Electron.
  index.html: agregue el siguiente fragmento en ese archivo. 
   

<h3>Keyboard Shortcuts in Electron</h3>
  <button id="register">
    Register Ctrl+Shit+X
  </button>
  <button id="unregister">
    Unregister Ctrl+Shit+X
  </button>

• Los botones Register Ctrl+Shit+X y UnregistereCtrl+Shit+X aún no tienen ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo index.js ,
  index.js: Agregue el siguiente fragmento de código en ese archivo. 

const electron = require("electron");
const globalShortcut = electron.remote.globalShortcut;
  
var register = document.getElementById("register");
var unregister = document.getElementById("unregister");
  
register.addEventListener("click", (event) => {
    const check = globalShortcut.register("CommandOrControl+Shift+X", () => {
        console.log("CommandOrControl+Shift+X is pressed");
    });
  
    if (check) {
        console.log("Ctrl+Shit+X Registered Successfully");
    }
  
    globalShortcut.registerAll(["CommandOrControl+X", 
                                "CommandOrControl+Y"], () => {
        console.log("One Global Shortcut defined " + 
                    "in registerAll() method is Pressed.");
    });
});
  
unregister.addEventListener("click", (event) => {
    if (globalShortcut.isRegistered("CommandOrControl+Shift+X")) {
        globalShortcut.unregister("CommandOrControl+Shift+X");
        console.log("Ctrl+Shit+X unregistered Successfully");
    }
  
    globalShortcut.unregisterAll();
});

• globalShortcut.register(accelerator, callback) Este método registra un Global Shortcut según lo definido por el acelerador para la aplicación. Este método devuelve un valor booleano que indica si el acceso directo global se registró correctamente o no. Toma los siguientes parámetros. Para obtener información más detallada sobre el método globalShortcut.register() .
  • accelerator: String El Accelerator String como se define arriba.
  • devolución de llamada: Función Esta función se llama cuando el usuario presiona el atajo registrado.
  • Reproducir/Pausar medios
  • Pista siguiente multimedia
  • Pista anterior multimedia
  • Parada de medios
• globalShortcut.registerAll(aceleradores, devolución de llamada) Este método se comporta exactamente de la misma manera que el método globalShortcut.register() excepto que toma una String[] de aceleradores en lugar de una sola String. Este método no devuelve ningún valor ya que no podemos verificar si cada elemento del acelerador en String[] se registró correctamente o no. La función de devolución de llamada se llamará cuando el usuario presione cualquiera de los accesos directos registrados en la array de aceleradores . Para obtener información más detallada sobre el método globalShortcut.registerAll() .
• globalShortcut.isRegistered(accelerator) Este método se utiliza para comprobar si la aplicación tiene registrado o no el acceso directo del acelerador . Devuelve un valor booleano . Toma como parámetro la String del acelerador a verificar. Cuando el Acelerador ya está siendo utilizado por otra aplicación que también se está ejecutando simultáneamente en el sistema operativo del sistema, esta llamada devolverá silenciosamente false . Este comportamiento está definido por el sistema operativo nativo del sistema, ya que no quieren que las aplicaciones luchen por accesos directos globales.
• globalShortcut.unregister(accelerator) Este método se usa para anular el registro del acceso directo global según lo definido por el parámetro de string del acelerador. Este método no tiene ningún tipo de retorno.
• globalShortcut.unregisterAll() Este método se utiliza para anular el registro de todos los accesos directos globales para la aplicación. Este método no tiene ningún tipo de retorno.

Producción:

Los accesos directos globales de la aplicación son diferentes de los eventos de teclado del objeto BrowserWindow . Para obtener una explicación detallada de los eventos de teclado admitidos en Electron, consulte el artículo Eventos de teclado en ElectronJS . Los eventos de teclado utilizan los diferentes eventos de instancia del objeto BrowserWindow para leer y registrar pulsaciones de teclas en el teclado. Se pueden usar para definir accesos directos dentro de la instancia de BrowserWindow . El evento de instancia before-input-event se emite antes de enviar eventos keydown y keyup en la página. Se puede usar para capturar y manejar accesos directos personalizados en BrowserWindowInstancia, cuya explicación también se proporciona en el artículo mencionado. Si no queremos hacer un análisis manual de atajos en ElectronJS, podemos usar bibliotecas externas como mousetrap que hacen detección avanzada de claves en JavaScript. Mousetrap es una biblioteca liviana y simple para manejar atajos de teclado en JavaScript y proporciona un amplio soporte para navegadores Chromium. Esta biblioteca también es compatible con los eventos de instancia keyup y keydown de BrowserWindowobjeto para combinaciones de teclas y secuencias específicas. Tampoco requiere que se envíe el evento de instancia antes del evento de entrada y no se requieren dependencias externas. También funciona con el teclado numérico en los teclados y puede vincularse directamente a caracteres especiales como ? y * sin tener que especificar ningún modificador adicional como Shift o / ya que son inconsistentes en los diferentes teclados.

Nota: Electron no admite el Evento de instancia de pulsación de tecla, ya que ha quedado obsoleto en la propia API web de KeyboardEvent , pero la trampa para ratones aún lo admite.