cpp

Добавление значка приложения в область уведомлений

Класс Tray позволяет добавить иконку приложения в область уведомления, расположенную в правой части Панели задач в Windows.

Класс Tray

Конструктор класса Tray имеет такой формат:

const { Tray } = require('electron');
<Объект> = new Tray(<Значок>[, <guid>]);

Класс Tray содержит следующие основные методы (полный список см. в документации):

  • setImage(<Значок>) — задает значок:
tray.setImage('test.ico');
  • setContextMenu(<Menu>) — добавляет контекстное меню, отображаемое при щелчке правой кнопкой мыши на значке (рис. 6.1):
tray.setContextMenu(Menu.buildFromTemplate(templateMenu));
  • setToolTip(<Текст>) — устанавливает текст подсказки, отображаемый при наведении указателя мыши на значок (рис. 6.2):
tray.setToolTip('Текст подсказки');

Добавим значок приложения в область уведомлений. При щелчке правой кнопкой мыши отобразим контекстное меню с двумя пунктами. При выборе первого пункта откроем окно. Выбор второго пункта приведет к завершению работы приложения. При наведении указателя мыши на значок отобразим всплывающую подсказку. Содержимое файла main.js приведено в листинге 6.1, а файла index.html — в листинге 6.2.

Листинг 6.1. Содержимое файла C:\book\e1\main.js

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

let win = null, tray = null;

// Приложение в единственном экземпляре
const lockApp = app.requestSingleInstanceLock();
if (!lockApp) {
   app.quit();
}
else {
   function createWindow() {
      win = new BrowserWindow({
         width: 500,
         height: 300,
         show: false,
         webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
         }
      });
      win.webContents.loadFile('index.html');
      win.on('close', (e) => {
         e.preventDefault();
         win.hide();
      });
      win.on('closed', () => {
         win = null;
      });
   
      let templateMenu = [
         {
            label: 'Показать окно',
            click: () => {
               win.show();
            }
         },
         {
            label: 'Выход',
            click: () => {
               app.exit(0);
            }
         }
      ];
      
      tray = new Tray('test.ico');
      tray.setContextMenu(Menu.buildFromTemplate(templateMenu));
      tray.setToolTip('Текст подсказки');
   }
   
   app.whenReady().then( () => {
      createWindow();
      app.on('activate', () => {
         if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
         }
      });
   } );
   
   app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
         app.quit();
      }
   });
}

Листинг 6.2. Содержимое файла C:\book\e1\index.html

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self'">
   <title>Класс Tray</title>
</head>
<body>
   <h1>Класс Tray</h1>
</body>
</html>

Рис. 6.1. Контекстное меню рядом со значком в области уведомлений

Рис. 6.2. Всплывающая подсказка рядом со значком в области уведомлений

Обработка событий

Класс Tray поддерживает следующие основные события (полный список см. в документации):

  • click — при щелчке левой кнопкой мыши на значке. Обработчик события принимает три параметра. Через первый параметр доступен объект события KeyboardEvent. Через второй параметр — границы значка в области уведомления, например: { x: 1688, y: 1042, width: 24, height: 38 }. А через третий — позиция события, например: { x: 1700, y: 1061 }:
tray.on('click', (p1, p2, p3) => {
   console.log('click');
   console.log(p1, p2, p3);
});
  • right-click — при щелчке правой кнопкой мыши на значке. Если прикреплено контекстное меню, то событие не генерируется. Обработчик события принимает два параметра. Через первый параметр доступен объект события KeyboardEvent. Через второй параметр — границы значка в области уведомления, например: { x: 1688, y: 1042, width: 24, height: 38 };
  • double-click — при двойном щелчке левой кнопкой мыши на значке. Обработчик события принимает два параметра. Через первый параметр доступен объект события KeyboardEvent. Через второй параметр — границы значка в области уведомления, например: { x: 1688, y: 1042, width: 24, height: 38 }.

Учебник по Electron js
Учебник Electron js в формате PDF

Реквизиты

ЮMoney: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp