Electron - Définition de raccourcis

Nous avons généralement mémorisé certains raccourcis pour toutes les applications que nous utilisons quotidiennement sur notre PC. Pour que vos applications soient intuitives et facilement accessibles à l'utilisateur, vous devez autoriser l'utilisateur à utiliser des raccourcis.

Nous utiliserons le module globalShortcut pour définir des raccourcis dans notre application. Notez queAcceleratorssont des chaînes qui peuvent contenir plusieurs modificateurs et codes de touches, combinés par le caractère +. Ces accélérateurs permettent de définir des raccourcis clavier dans toute notre application.

Prenons un exemple et créons un raccourci. Pour cela, nous suivrons l'exemple des boîtes de dialogue où nous avons utilisé la boîte de dialogue d'ouverture pour ouvrir les fichiers. Nous enregistrerons unCommandOrControl+O raccourci pour afficher la boîte de dialogue.

Notre main.jsle code restera le même qu'avant. Alors créez un nouveaumain.js fichier et entrez le code suivant -

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)

Ce code ouvrira la boîte de dialogue ouverte chaque fois que notre processus principal reçoit un message 'openFile' d'un processus de rendu. Auparavant, cette boîte de dialogue apparaissait chaque fois que l'application était exécutée. Limitons-le maintenant pour ne l'ouvrir que lorsque nous pressonsCommandOrControl+O.

Maintenant, créez un nouveau index.html fichier avec le contenu suivant -

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

Nous avons enregistré un nouveau raccourci et passé un rappel qui sera exécuté chaque fois que nous appuierons sur ce raccourci. Nous pouvons désenregistrer les raccourcis au fur et à mesure que nous n'en avons pas besoin.

Maintenant, une fois l'application ouverte, nous recevrons le message pour ouvrir le fichier en utilisant le raccourci que nous venons de définir.

Ces raccourcis peuvent être personnalisés en permettant à l'utilisateur de choisir ses propres raccourcis pour les actions définies.