Author: Liang Bangbang

1. Introduction

Menus are divided into application menu, context menu, tray menu and Dock menu. This section mainly introduces the first two menus. The document address

1.1 Application Menu

MAC and Windows are in the top left corner, but one is in the top left corner of the screen and one is in the top left corner of the application view. The MAC looks like this:

Windows looks like this:

If the menu is not displayed under Windows, pressing Alt in the current window will appear.

1.2 Context Menu

The right click menu.

2. Create a menu

2.1 Creating an Application Menu

Next we create the application menu. The steps are as follows:

  1. Introduce the Menu class
  2. Define a menu template
  3. Call the Menu classbuildFromTemplateMethod, which creates a menu based on the template passed in
  4. Call the Menu classsetApplicationMenumethods

To create the application menu, take a look at the renderings.

Attached code:

/ / step one
const { Menu, dialog, app } = require('electron')

/ / in step 2
const template = [
  {
    label: 'app'.// macOS the first label is the application name, this setting is invalid
    submenu: [{label: 'exit'.click: () = > { app.quit() } },
      { label: 'about'.click: () = > { app.showAboutPanel() } }
    ]
  },
  {
    label: 'file'.submenu: [{label: 'Submenu'.click: () = > {
          // Call dialog (popover module) to demonstrate the effect
          dialog.showMessageBoxSync({
            type: 'info'.title: 'tip'.message: 'Click on the submenu'})}}]}/ / step 3
const menu = Menu.buildFromTemplate(template)

/ / step 4
Menu.setApplicationMenu(menu)
Copy the code

2.2 Creating a Context Menu

To create a right-click menu, the first three steps are the same as to create an application menu. The last step is to listen for the window context-menu event to display menu options. Listen for the event context-menu document

Let’s start with the renderings.

Attached code:

/ / step one
const { Menu, BrowserWindow } = require('electron')

/ / in step 2
const template = [
  {
    label: 'app'.// macOS the first label is the application name, this setting is invalid
    submenu: [{role: 'quit' },
      { role: 'about'}]}, {label: 'edit'.role: 'editMenu'}]/ / step 3
const contextMenu = Menu.buildFromTemplate(template)

/ / step 4
// The main process, the renderer can set the listener event using window.addeventListener
BrowserWindow.getFocusedWindow().webContents.on('context-menu'.() = > {
  contextMenu.popup()
})
Copy the code

As you may have noticed, this example has less code than the previous example, but more menus are implemented, and what does this role do? Don’t worry, read on.

3. Set menu properties

In the last video, what does this role do? In fact, there are two ways to create menu behavior, one is custom, which is implemented in 1.1, and the other is predefined, which is role.

Role is an attribute of MenuItem and is a predefined behavior of ELECTRON. The documentation says that it is better to assign roles to any menu to match a standard role, rather than trying to implement this behavior manually in the click function. The built-in role behavior will provide the best native experience. When using role, the label and Accelerator values are optional for each platform and default to appropriate values.

This means that as long as you set the role attribute, the text, shortcut keys, and event behavior of the menu are already implemented internally and are better than the custom behavior experience.

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

const templateCustom = [
  {
    label: 'app'.// macOS the first label is the application name, this setting is invalid
    submenu: [{label: 'quit'.role: 'quit' },
      {label: 'about'.role: 'about'.accelerator: 'CommandOrControl + shift + H'}]}, {label: 'edit'.submenu: [{role: 'editMenu'},
      {type: 'separator'},
      {label: 'Custom'.click: () = > {
        const win = new BrowserWindow()
        win.loadURL('https://electronjs.org'}}]}]const customMenu = Menu.buildFromTemplate(templateCustom)

Menu.setApplicationMenu(customMenu)
Copy the code

Line8 accelerator is a property that sets shortcut keys.

4. Hide the menu

The visible property of the hidden menu can be useful if we are using some menus in development, but do not want users to see them, and want to keep the functionality online, such as a debug window, for finding bugs online.

Take a look at the rendering:

const { Menu } = require('electron')
const menu = Menu.getApplicationMenu()

// Get the menu to hide and set its property visible to false
menu.items[3].submenu.items[2].visible = false;
Copy the code

As shown in the figure: At the beginning, you can see the sub-menu of View Toggle Developer Tools to switch the debugging window. Click Execute to hide the menu, then use the shortcut key CMD + Option +I(Windows CTRL + Shift +I) to switch the debugging window.

In order to learn electron better, we have created a series at present, if you are interested, you can have a look

  • [Electron playground series] Menu
  • 【Electron Playground series 】Dialog with file selection
  • [Electron playground series] Agreement
  • 【Electron Playground series 】 The tray

For more complete documentation, please refer to the documentation below

Electron-Playground official document

Github address portal: github.com/tal-tech/el…