Electron - definiowanie skrótów

Zwykle zapamiętaliśmy pewne skróty do wszystkich aplikacji, których codziennie używamy na naszym komputerze. Aby Twoje aplikacje były intuicyjne i łatwo dostępne dla użytkownika, musisz pozwolić mu na używanie skrótów.

Użyjemy modułu globalShortcut do zdefiniowania skrótów w naszej aplikacji. Zauważ, żeAcceleratorsto łańcuchy, które mogą zawierać wiele modyfikatorów i kodów klawiszy, połączone znakiem +. Te akceleratory służą do definiowania skrótów klawiaturowych w całej naszej aplikacji.

Rozważmy przykład i utwórzmy skrót. W tym celu będziemy postępować zgodnie z przykładem okien dialogowych, w których używaliśmy otwartego okna dialogowego do otwierania plików. ZarejestrujemyCommandOrControl+O skrót do wywołania okna dialogowego.

Nasz main.jskod pozostanie taki sam jak poprzednio. Więc stwórz nowymain.js plik i wprowadź w nim następujący kod -

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)

Ten kod otworzy otwarte okno dialogowe za każdym razem, gdy nasz główny proces otrzyma komunikat „openFile” z procesu renderowania. Wcześniej to okno dialogowe pojawiało się przy każdym uruchomieniu aplikacji. Ograniczmy się teraz do otwierania tylko po naciśnięciuCommandOrControl+O.

Teraz utwórz nowy index.html plik o następującej treści -

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

Zarejestrowaliśmy nowy skrót i przekazaliśmy wywołanie zwrotne, które będzie wykonywane po każdym naciśnięciu tego skrótu. Możemy wyrejestrować skróty wtedy, gdy ich nie potrzebujemy.

Teraz po otwarciu aplikacji otrzymamy komunikat, aby otworzyć plik za pomocą zdefiniowanego skrótu.

Skróty te można dostosować do własnych potrzeb, umożliwiając użytkownikowi wybranie własnych skrótów do określonych działań.