Electron - Menus
Les applications de bureau sont livrées avec deux types de menus: le application menu(sur la barre du haut) et un context menu(menu contextuel). Nous apprendrons comment créer ces deux éléments dans ce chapitre.
Nous utiliserons deux modules - les modules Menu et MenuItem . Notez que les modules Menu et MenuItem ne sont disponibles que dans le processus principal. Pour utiliser ces modules dans le processus de rendu, vous avez besoin du module distant . Nous rencontrerons cela lorsque nous créerons un menu contextuel.
Maintenant, créons un nouveau main.js fichier pour le processus principal -
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)Nous construisons un menu à partir d'un modèle ici. Cela signifie que nous fournissons le menu sous forme de JSON à la fonction et qu'il s'occupera du reste. Nous devons maintenant définir ce menu comme menu Application.
Créez maintenant un fichier HTML vide appelé index.html et exécutez cette application en utilisant -
$ electron ./main.jsSur la position normale des menus de l'application, vous verrez un menu basé sur le modèle ci-dessus.
Nous avons créé ce menu à partir du processus principal. Créons maintenant un menu contextuel pour notre application. Nous le ferons dans notre fichier 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>Nous avons importé les modules Menu et MenuItem en utilisant le module distant; ensuite, nous avons créé un menu et y avons ajouté nos menus un par un. De plus, nous avons empêché l'action par défaut du clic droit dans le chrome et l'avons remplacée par notre menu.
La création de menus dans Electron est une tâche très simple. Vous pouvez désormais attacher vos gestionnaires d'événements à ces éléments et gérer les événements en fonction de vos besoins.