Nell’articolo precedente abbiamo visto come sia possibile gestire i menu di sistema a seconda del sistema operativo e in varie modalità. Tuttavia l’articolo mancava volutamente di una sezione, ovvero le scorciatoie da tastiera. Ad esempio tutti noi conosciamo CTRL+C (o Command+C per macOS) per attivare la copia di qualcosa che abbiamo selezionato, e successivamente sostituendo la C con la V andremo ad incollare.
Electron permette di integrare queste combo di tasti, di cui una parte sono appunto standard come copia, incolla e altre possono essere totalmente create ex-novo per effettuare delle operazioni rapide sul nostro applicativo.
Questo esempio propone la creazione di una nuova finestra tipo pop-up che mostra un messaggio
const {app, dialog, globalShortcut} = require('electron')
app.on('ready', () => {
globalShortcut.register('cmdOCtrl+Alt+K', () => {
dialog.showMessageBox({
type: 'info',
message: 'Successo!',
detail: 'Hai premuto la sequenza di tasti corretta!.',
buttons: ['OK']
})
})
})
app.on('will-quit', () => {
globalShortcut.unregisterAll()
})In questo caso abbiamo caricato le API globalShortcut e dialog (quest’ultima per utilizzare la finestra tipo pop-up) e come scorciatoia sia stato utilizzato cmdOCtrl+Alt+K. Qui pongo l’accento sull’utilizzo direi obbligatorio di cmdOCtrl, infatti Electron permette anche solo l’utilizzo di Ctrl o Cmd, ma come si può intuire Cmd, che sta per Command è un tasto presente solo sui Mac. Quindi per non scrivere due volte la stessa cosa utilizzeremo cmdOCtrl che prevede entrambe le casistiche a seconda del sistema operativo utilizzato. Personalmente consiglio di utilizzare questo modificatore anche se avete pianificato di compilare esclusivamente per Windows o Linux. Ad esempio potrebbe essere il caso che dopo un po’ di tempo vorrete compilare anche per macOS, in questo modo non ci dovremo preoccupare delle scorciatoie da tastiera.
Le sequenze che potremo utilizzare sono pressoché infinite, e i tasti utilizzabili sono quelli indicati nella pagina dedicata a questa API. Chiaramente più la sequenza di tasti sarà complessa più sarà difficile da ricordare, quindi in linea di massima si cercherà di essere più semplici possibili. Come anticipato all’inizio, certe sequenze sono già occupate e dipendono dal sistema operativo utilizzato, quindi sinceratevi in fase di scrittura del codice che non vi sia un conflitto.
Nel caso dell’integrazione dei menu, potremo direttamente fornire l’acceleratore sul codice che avevamo visto nell’articolo precedente. Riprendiamo parte di quel codice con le modifiche del caso.
module.exports = [
{
label: 'miaApplicazione',
submenu: [
{label: 'Copia', accelerator: 'cmdOCtrl+C', role: 'copy'},
{label: 'Incolla', accelerator: 'cmdOCtrl+V', role: 'paste'},
{type: 'separator'},
{role: 'quit'}
]
},
{
label: 'azioni dedicate',
submenu: [
{
label: 'apri sito di Electron',
accelerator: 'CmdOrCtrl+Alt+K',
click () { require('electron').shell.openExternal('https://electronjs.org') }
}
]
}
]Come si vede ho potuto aggiungere oltre ad una label sulle role, anche la funzione accelerator. Nel caso di quit invece non ho messo nulla perché tale ruolo andrebbe scomposto per sistema operativo, infatti per macOS corrisponde a CMD+Q mentre in Windows è ALT+F4.
Come per Menu e MenuItem, sul main.js dovrà essere dichiarato l’api globalShortcut, visto che questo esempio prende in considerazione che il codice del menu sia su un file distinto.
Maggiori informazioni API Accelerator.