[Electron] Menu

2020/08/31 - [Web/JavaScript] - [Electron] Getting Started

2020/08/31 - [Web/JavaScript] - [Electron] BrowserWindow

2020/09/01 - [Web/JavaScript] - [Electron] IPC (Inter Process Communication)

2020/09/01 - [Web/JavaScript] - [Electron] Menu

2020/09/01 - [Web/JavaScript] - [Electron] Global Shortcut

2020/09/01 - [Web/JavaScript] - [Electron] Tray

---

The Electron has two types of menus: application menu and context menu.

Application Menu

The application menu is registered when the Electron application is ready.

const Menu = electron.Menu;

app.on("ready", () => {
  createWindow();
  const template = [];
  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
});

Define an instance of Electron's Menu class.

Build a menu from the template.

Set our menu to application.

 

If you run this application, there is no menu because we put an empty template.

Now, let's fill the menu template.

const template = [
  {
    label: "menu1",
    submenu: [
      {
        label: "submenu1",
        accelerator: "ctrl+1",
        click: () => {
          console.log("Clicked submenu1");
        },
      },
      {
        type: "separator",
      },
      {
        label: "submenu2",
        accelerator: "ctrl+2",
        click: () => {
          console.log("Clicked submenu2");
        },
      },
    ],
  },
];

You can make a menu and its submenu.

In the above example, I made a menu named 'menu1', and its submenu 'submenu1' and 'submenu2'.

I also added an accelerator and function to run when the submenu is executed.

You can run submenus through shortcut keys.

And I added a separator for separating two submenus.

 

Because these menus are executed on the main process, the log shows in the terminal, not in the application.

Can you see this?!

Please click the submenus or press the shortcut, and see the log message.

 

Let's add more menu.

const template = [
  {
    ...
  },
  {
    label: "menu2",
    click: () => {
      electron.shell.openExternal("http://electronjs.org");
    },
  },
];

If you execute the 'menu2', our application opens the homepage of Electron in our web browser.

Let's try it!!

 

Now, let's add a built-in menus.

const template = [
  {
    label: "built-in",
    submenu: [
      { role: "undo" },
      { role: "redo" },
      { type: "separator" },
      { role: "cut" },
      { role: "copy" },
      { role: "paste" },
      { role: "pasteandmatchstyle" },
      { role: "delete" },
      { role: "selectall" },
    ],
  },
  {
    ...
  },
  {
    ...
  }
];

And run it.

Yes! I agree. It is super cool.

The Electron provides us the built-in menus. We don't need to make these menus.

Context Menu

A context menu is a popup menu.

It shows up when we click the right button of a mouse.

const Menu = electron.Menu;
const MenuItem = electron.MenuItem;

app.on("ready", () => {
  createWindow();
  const ctxMenu = new Menu();
  win.webContents.on("context-menu", (e, params) => {
    ctxMenu.popup(win, params.x, params.y);
  });
});

Define a Menu and MenuItem.

Define an instance for context menu.

When we click the right button of a mouse, the context menu will show up at the location.

 

Let's test this.

Good. It works well.

 

Now, fill the menu.

app.on("ready", () => {
  ...
  ctxMenu.append(
    new MenuItem({
      label: "menu1",
      click: () => {
        console.log("Clicked context menu1");
      },
    })
  );
  ...
});

I made a 'menu1' and if it is executed, it logs in the terminal.

 

Go ahead~

The menu shows well, and the log is printed as well.

 

We can also use the built-in menu like an application menu.

app.on("ready", () => {
  ...
  ctxMenu.append(
    new MenuItem({
      label: "menu1",
      click: () => {
        console.log("Clicked context menu1");
      },
    })
  );
  ctxMenu.append(new MenuItem({ role: "selectall" }));
  ...
});

Append a built-in menu after our menu.

And, execute the Select All menu.

Perfect!!!

Reference

https://www.electronjs.org/docs/api/menu

https://www.electronjs.org/docs/api/menu-item