[book note] Manning MEAP – Election in Action – Chapter 6

Building Application and Context Menus

This chapter covers:

• Creating menus using Electron’s Menu and MenuItem modules
• Building menus from a template
• Defining custom menus for different target operating systems.
• Assigning common operating system roles to our menu items
• Making menu items with custom, application-specific functionality
• Creating custom context menus for different parts of your user interface.

In browser-based applications, developers only have access to the viewport. They can’t add controls to the browser’s tool bar or menu bar. All the user interface for the application’s functionality must be inside of the window. Developers also face limitations within the viewport. The can’t modify the context menus that appear when the user right-click on part of their user interface. It can be a challenge to find a place for every option and command.

Electron, on the other hand, enables developers to add functionality outside of the browser window. Developers can create custom. application menus and context menus that appear when the user right-clicks on a component of the user interface.

With the basic menu functionality implemented, we’ll add in our own application-specific menu items-our user interface, and render its contents as HTML in the right pane. Lastly, we’ll create a custom context menu containing common text manipulation tasks (e.g. cut, copy, and paste) whenever the user right-clicks on the left pane.

Electron provides a standard menu by default. This menu can be overwritten by the developer, but then it becomes to the developer’s responsibility to build. menu from the group up.

• After the foundation has been laid, we will extend it with our own custom functionality.

Replacing and Replicating the Default Menu

const { app, BrowserWindow, Menu, shell } = require('electron')
const mainProcess = require('./main')

const template = [
  {
    label: 'Edit'
    submenu: [
      {
        label: 'Copy'
        accelerator: 'ComaandOrControl+C'
        role: 'copy',
      },
      {
        label: 'Paste',
        acclerator: 'CommandOrControl+V',
        role: 'pase',
      },
    ]
  }
]

module.exports = Menu.buildFromTemplate(template)