Desktopapplicaties ontwikkelen met Electron · Les

Native menu's en contextmenu's

Implementeer aangepaste applicatiemenu's, contextmenu's en systeemvakmenu's om gebruikers vertrouwde navigatie en opties te bieden.

Les 1 van 411 stappen

Native menu's en contextmenu's is een gratis Desktopapplicaties ontwikkelen met Electron-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Desktopapplicaties ontwikkelen met Electron. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Desktopapplicaties ontwikkelen met Electron bevat in totaal 4 lessen.

Systeemeigen menu's in Electron

Met Electron kun je desktopapps bouwen met webtechnologieën. Maar desktopapps hebben ook systeemeigen functies nodig, zoals menu's!

Systeemeigen menu's bieden gebruikers een vertrouwde ervaring en sluiten naadloos aan op hun besturingssysteem. Met Electron's Menu-module kun je deze menu's maken.

Toepassingsmenu's: De hoofdmenubalk (Bestand, Bewerken, Weergave).
Contextmenu's: Menu's die je met de rechtermuisknop opent en die specifiek zijn voor een element.
Systeemvakmenu's: Menu's voor pictogrammen in het systeemvak of dock.

De hoofdmenubalk bouwen

Het toepassingsmenu is de hoofdmenubalk bovenaan het venster van je app (Windows/Linux) of bovenaan het scherm (macOS).

Het bevat meestal standaardopties zoals "Bestand", "Bewerken", "Weergave" en "Help". Deze menu's geven je app een systeemeigen uitstraling en bieden essentiële navigatie.

Je definieert de structuur met een JavaScript-array met objecten, die een menusjabloon wordt genoemd.

Code: eenvoudig toepassingsmenu

Laten we een minimaal toepassingsmenu maken. Dit codefragment plaats je in het bestand main.js van je Electron-app.

Het definieert een menu "Bestand" met een optie "Afsluiten" waarmee de app wordt afgesloten. (Let op: nodeIntegration: true, contextIsolation: false worden hier voor de eenvoud in voorbeelden gebruikt, maar voor productie-apps zijn vaak veiligere configuraties nodig.)

const { app, BrowserWindow, Menu } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html'); // Ensure you have an index.html file

  const template = [
    {
      label: 'File',
      submenu: [
        {
          label: 'Exit',
          accelerator: 'CmdOrCtrl+Q',
          click() { app.quit(); }
        }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

Geavanceerde menu-items en rollen

Menu-items kunnen speciale rollen hebben die standaardfunctionaliteit bieden (zoals 'copy', 'paste' en 'quit') en platformafhankelijk gedrag garanderen.

Je kunt ook geneste menu's (submenu's) maken om opties beter te ordenen. Voor snelle toegang kun je sneltoetsen toevoegen.

role: 'quit': Sluit de app af.
role: 'separator': Voegt een scheidingslijn toe.
accelerator: 'CmdOrCtrl+Z': Definieert een sneltoets.

Code: volledig toepassingsmenu

Laten we ons toepassingsmenu uitbreiden. We voegen een menu "Bewerken" met standaardrollen en een menu "Help" met een aangepast item toe.

Let erop hoe rollen veelvoorkomende acties vereenvoudigen en submenu's het hoofdmenu overzichtelijk houden.

const { app, BrowserWindow, Menu } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  const template = [
    {
      label: 'File',
      submenu: [
        { label: 'New', accelerator: 'CmdOrCtrl+N' },
        { type: 'separator' },
        { label: 'Exit', role: 'quit' }
      ]
    },
    {
      label: 'Edit',
      submenu: [
        { label: 'Undo', role: 'undo' },
        { label: 'Redo', role: 'redo' },
        { type: 'separator' },
        { label: 'Cut', role: 'cut' },
        { label: 'Copy', role: 'copy' },
        { label: 'Paste', role: 'paste' }
      ]
    },
    {
      label: 'Help',
      submenu: [
        { label: 'About App', click() { console.log('About clicked!'); } }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

Dynamische contextmenu's

Contextmenu's zijn de menu's die verschijnen wanneer je met de rechtermuisknop klikt op specifieke elementen of gebieden van een toepassing.

In tegenstelling tot het statische toepassingsmenu zijn contextmenu's vaak dynamisch: ze veranderen op basis van waarop je hebt geklikt. Ze worden gemaakt met dezelfde Menu-module.

Meestal worden ze in het hoofdproces gemaakt en vervolgens vanuit het rendererproces weergegeven (geopend) via Inter-Process Communication (IPC).

Code: een contextmenu maken

Zo definieer je een eenvoudig contextmenu. In dit voorbeeld laten we het voor de eenvoud na een vertraging vanuit het hoofdproces verschijnen. In een echte app wordt het meestal geactiveerd door een rechtsklikgebeurtenis in het rendererproces, dat met het hoofdproces communiceert.

De methode popup() geeft het menu weer.

const { app, BrowserWindow, Menu } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  const contextMenuTemplate = [
    { label: 'Inspect Element', click() { mainWindow.webContents.openDevTools(); } },
    { type: 'separator' },
    { label: 'Reload Page', role: 'reload' }
  ];

  const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);

  // For demonstration: show context menu after a delay
  setTimeout(() => {
    contextMenu.popup({ window: mainWindow });
    console.log('Context menu popped up!');
  }, 3000);

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

Menu's in het systeemvak en het dock

Met een systeemvakpictogram (op macOS ook wel een menubalkpictogram genoemd en op Windows/Linux een pictogram in het systeemvak) kan je applicatie op de achtergrond blijven draaien en snel toegang bieden tot veelgebruikte acties.

Met de module Tray in Electron kan je deze pictogrammen maken en er een systeemvakmenu aan koppelen. Dat menu verschijnt wanneer de gebruiker met het pictogram communiceert, bijvoorbeeld via een rechtsklik.

Code: eenvoudig systeemvakmenu

In dit voorbeeld zie je hoe je een eenvoudig systeemvakpictogram met een contextmenu maakt. Zorg ervoor dat je een klein pictogrambestand (bijvoorbeeld icon.png) in de hoofdmap van je project plaatst.

Het systeemvakpictogram verschijnt in het systeemvak of dock van je computer. Als je erop klikt, wordt de zichtbaarheid van het hoofdvenster in- of uitgeschakeld.

const { app, BrowserWindow, Menu, Tray } = require('electron');
const path = require('path');

let mainWindow;
let tray;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    show: false, // Start hidden for tray app
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(() => {
  createWindow();

  // Path to your icon file (e.g., in the same directory as main.js)
  const iconPath = path.join(__dirname, 'icon.png'); 
  tray = new Tray(iconPath);

  const contextMenu = Menu.buildFromTemplate([
    { label: 'Open App', click: () => { mainWindow.show(); } },
    { label: 'Toggle DevTools', click: () => { mainWindow.webContents.toggleDevTools(); } },
    { type: 'separator' },
    { label: 'Quit', click: () => { app.quit(); } }
  ]);

  tray.setToolTip('My Electron Tray App');
  tray.setContextMenu(contextMenu);

  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });
});

app.on('before-quit', () => {
  // Clean up tray icon before quitting to prevent memory leaks
  if (tray) tray.destroy();
});

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the dock icon is clicked
  if (mainWindow === null) createWindow();
});

// For apps with tray icons, you might not want to quit when all windows are closed
// app.on('window-all-closed', () => {
//   if (process.platform !== 'darwin') app.quit(); 
// });

Controle van menutypen

Je hebt geleerd over verschillende typen systeemeigen menu's in Electron.

Welke van de volgende uitspraken over Electron-menu's is WAAR?

Beantwoord dit in de interactieve les

Belangrijkste punten over menu's

Goed gedaan! Je hebt geleerd hoe je systeemeigen menu's in je Electron-applicaties integreert.

Gebruik de module Menu om applicatie-, context- en systeemvakmenu's te maken.
Definieer menustructuren met menusjablonen (arrays met objecten).
Gebruik menupositierollen voor standaardfunctionaliteit en consistentie tussen platforms.
Applicatiemenu's zijn bedoeld voor de balk van het hoofdvenster, contextmenu's voor dynamische opties na een rechtsklik en systeemvakmenu's voor pictogrammen in het systeemvak of dock.
Gebruik altijd Menu.buildFromTemplate() en Menu.setApplicationMenu() voor het hoofdmenu van de app.

Deze systeemeigen details verbeteren de gebruikerservaring van je desktopapp aanzienlijk!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 47

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Native menu's en contextmenu's” gratis?

Ja — de volledige tekst van “Native menu's en contextmenu's” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Desktopapplicaties ontwikkelen met Electron wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Desktopapplicaties ontwikkelen met Electron bevat in totaal 4 lessen.

Wat leer ik in “Native menu's en contextmenu's”?

Implementeer aangepaste applicatiemenu's, contextmenu's en systeemvakmenu's om gebruikers vertrouwde navigatie en opties te bieden. Je oefent met Desktopapplicaties ontwikkelen met Electron door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Desktopapplicaties ontwikkelen met Electron te beginnen?

Ervaring vooraf is niet nodig. Desktopapplicaties ontwikkelen met Electron op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Native menu's en contextmenu's”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Desktopapplicaties ontwikkelen met Electron?

Ja. Elke les over Desktopapplicaties ontwikkelen met Electron bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Desktopapplicaties ontwikkelen met Electron