Electron - Menu
Le app desktop sono dotate di due tipi di menu: il application menu(sulla barra in alto) e un file context menu(menu di scelta rapida). Impareremo come crearli entrambi in questo capitolo.
Useremo due moduli: i moduli Menu e MenuItem . Notare che i moduli Menu e MenuItem sono disponibili solo nel processo principale. Per utilizzare questi moduli nel processo di rendering, è necessario il modulo remoto . Ci imbatteremo in questo quando creeremo un menu contestuale.
Ora, creiamo un nuovo file main.js file per il processo principale -
const {app, BrowserWindow, Menu, MenuItem} = require('electron')
const url = require('url')
const path = require('path')
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
}))
}
const template = [
{
label: 'Edit',
submenu: [
{
role: 'undo'
},
{
role: 'redo'
},
{
type: 'separator'
},
{
role: 'cut'
},
{
role: 'copy'
},
{
role: 'paste'
}
]
},
{
label: 'View',
submenu: [
{
role: 'reload'
},
{
role: 'toggledevtools'
},
{
type: 'separator'
},
{
role: 'resetzoom'
},
{
role: 'zoomin'
},
{
role: 'zoomout'
},
{
type: 'separator'
},
{
role: 'togglefullscreen'
}
]
},
{
role: 'window',
submenu: [
{
role: 'minimize'
},
{
role: 'close'
}
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More'
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
app.on('ready', createWindow)Stiamo costruendo un menu da un modello qui. Ciò significa che forniamo il menu come JSON alla funzione e lei si occuperà del resto. Ora dobbiamo impostare questo menu come menu dell'applicazione.
Ora crea un file HTML vuoto chiamato index.html ed esegui questa applicazione usando -
$ electron ./main.jsNella posizione normale dei menu dell'applicazione, vedrai un menu basato sul modello sopra.
Abbiamo creato questo menu dal processo principale. Creiamo ora un menu contestuale per la nostra app. Lo faremo nel nostro file HTML -
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Menus</title>
</head>
<body>
<script type = "text/javascript">
const {remote} = require('electron')
const {Menu, MenuItem} = remote
const menu = new Menu()
// Build menu one item at a time, unlike
menu.append(new MenuItem ({
label: 'MenuItem1',
click() {
console.log('item 1 clicked')
}
}))
menu.append(new MenuItem({type: 'separator'}))
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
menu.append(new MenuItem ({
label: 'MenuItem3',
click() {
console.log('item 3 clicked')
}
}))
// Prevent default action of right click in chromium. Replace with our menu.
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
menu.popup(remote.getCurrentWindow())
}, false)
</script>
</body>
</html>Abbiamo importato i moduli Menu e MenuItem utilizzando il modulo remoto; quindi, abbiamo creato un menu e aggiunto le nostre voci di menu una per una. Inoltre, abbiamo impedito l'azione predefinita del clic con il pulsante destro del mouse in Chrome e l'abbiamo sostituita con il nostro menu.
La creazione di menu in Electron è un'operazione molto semplice. Ora puoi collegare i tuoi gestori di eventi a questi elementi e gestire gli eventi in base alle tue esigenze.