Electron - Definizione di scorciatoie
In genere abbiamo memorizzato alcune scorciatoie per tutte le app che utilizziamo quotidianamente sul nostro PC. Per rendere le tue applicazioni intuitive e facilmente accessibili all'utente, devi consentire all'utente di utilizzare i collegamenti.
Useremo il modulo globalShortcut per definire le scorciatoie nella nostra app. Nota cheAcceleratorssono stringhe che possono contenere più modificatori e codici chiave, combinati dal carattere +. Questi acceleratori vengono utilizzati per definire le scorciatoie da tastiera in tutta la nostra applicazione.
Consideriamo un esempio e creiamo una scorciatoia. Per questo, seguiremo l'esempio delle finestre di dialogo in cui abbiamo utilizzato la finestra di dialogo Apri per aprire i file. Registreremo un fileCommandOrControl+O collegamento per visualizzare la finestra di dialogo.
Nostro main.jsil codice rimarrà lo stesso di prima. Quindi creane uno nuovomain.js file e inserisci il seguente codice in esso -
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)Questo codice aprirà la finestra di dialogo Apri ogni volta che il nostro processo principale riceve un messaggio "openFile" da un processo di rendering. In precedenza, questa finestra di dialogo veniva visualizzata ogni volta che veniva eseguita l'app. Limitiamolo ora ad aprirlo solo quando premiamoCommandOrControl+O.
Ora crea un nuovo file index.html file con il seguente contenuto -
<!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>Abbiamo registrato una nuova scorciatoia e passato una richiamata che verrà eseguita ogni volta che premiamo questa scorciatoia. Possiamo annullare la registrazione delle scorciatoie come e quando non le richiediamo.
Ora una volta aperta l'app, riceveremo il messaggio per aprire il file utilizzando il collegamento che abbiamo appena definito.
Queste scorciatoie possono essere rese personalizzabili consentendo all'utente di scegliere le proprie scorciatoie per azioni definite.