[Electron] Tray

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 subject of this posting is about a tray.

As you already know, a tray is a function that is on the toolbar of OS.

We can get information about an application from it and set configuration through it.

 

Let's open the main.js file and add code for the tray.

const path = require("path");

const iconPath = path.join(__dirname, "logo.png");
let tray = null;

app.on("ready", () => {
  tray = new Tray(iconPath);
});

Define the path for our tray icon.

Load our tray icon.

Create a Tray instance with the icon and assign it to the tray variable.

 

Now, run it.

You can see your tray icon.

The green H is my icon. lol

 

Okay, let's add some functions.

First, I set a tooltip.

app.on("ready", () => {
  ...  
  tray.setToolTip("Test Tray");
});

And run the application!!

If you hover a mouse pointer in the icon, the tooltip will be displayed.

 

Next, I added some menus.

const Menu = electron.Menu;

app.on("ready", () => {
  ...  
  const template = [
    {
      label: "menu1",
      submenu: [
        { label: "submenu1", type: "radio", checked: true },
        { label: "submenu2", type: "radio" },
      ],
    },
    {
      label: "menu2",
      submenu: [
        {
          label: "submenu1",
          click: () => {
            console.log(`Clicked tray menu`);
          },
        },
      ],
    },
  ];
  const ctxMenu = Menu.buildFromTemplate(template);
  tray.setContextMenu(ctxMenu);
});

The 'menu1' has two radio buttons as its submenus.

The 'menu2' has a function to print a log message.

Build the context menu from the template.

Set the context menu to the tray.

 

Do you need a menu?
Please refer to this post.

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

 

Let's run again.

Yay~ It works well.

And if we execute the 'menu2', we can see the log message.