Операции панели задач Windows в ElectronJS

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

Согласно официальному определению, панель задач - это элемент операционной системы, расположенный в нижней части экрана. Это позволяет нам находить и запускать программы через меню «Пуск» или просматривать любую открытую в данный момент программу. В правой части панели задач находится область уведомлений, которая позволяет нам проверять дату и время, элементы, работающие в фоновом режиме, и т. Д. Все современные настольные приложения, поддерживаемые на платформе ОС Windows, могут взаимодействовать с этой панелью задач Windows. Некоторые из наиболее распространенных операций на панели задач включают отображение наложения поверх исходного значка или мигание значка приложения для уведомления пользователя. Electron также предоставляет нам способ взаимодействия с этой панелью задач Windows, используя методы экземпляра объекта BrowserWindow. В этом руководстве будут продемонстрированы эти общие операции панели задач Windows в Electron. Для получения дополнительной информации о том, как Electron взаимодействует с областью уведомлений, обратитесь к статье: Пользовательские уведомления в ElectronJS. Более сложные операции панели задач Windows, такие как отображение настраиваемой панели инструментов эскизов для приложения и т. Д., Будут рассмотрены в отдельных статьях.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

• Структура проекта:
  

Пример: следуйте инструкциям, приведенным в разделе «Операции с рабочим столом» в ElectronJS, чтобы настроить базовое приложение Electron. Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Кроме того, внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними. Создайте папку с активами в соответствии со структурой проекта. Эта папка ресурсов будет содержать файл image.png, который будет использоваться в качестве оверлейного изображения для панели задач окна. В этом уроке мы использовали логотип Electron в качестве файла image.png.
package.json:

{
  "имя": "электронная панель задач",
  "версия": "1.0.0",
  "description": "Операции с панелью задач Windows в Electron",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0"
  }
}

Выход:

Операции панели задач Windows в Electron: Экземпляр BrowserWindow является частью основного процесса . Чтобы импортировать и использовать BrowserWindow в процессе рендеринга, мы будем использовать удаленный модуль Electron. Как упоминалось выше, двумя наиболее распространенными операциями на панели задач Windows являются наложение значков и мигающий эффект значков. Мы подробно рассмотрим обе эти операции с помощью кода.

Наложение значков на панели задач Windows

• Согласно официальному MSDN:

“Icon overlays serve as a contextual notification of status and are intended to negate the need for a separate notification area status icon to communicate that information to the user. For instance, the new mail status in Microsoft Outlook, currently shown in the notification area, can now be indicated through an overlay on the taskbar button. Again, you must decide during your development cycle which method is best for your application. Overlay icons are intended to supply important, long-standing status or notifications such as network status, messenger status, or new mail. The user should not be presented with constantly changing overlays or animations.”

В Electron мы можем использовать небольшой значок наложения, чтобы установить его поверх исходного значка приложения. Это может использоваться для отображения статуса приложения и может быть изменено соответствующим образом. Когда приложение Electron изначально запущено, оно отображает один значок приложения на панели задач Windows, как показано ниже:

• index.js : добавьте в этот файл следующий фрагмент.

Объяснение: Метод экземпляра win.setOverlayIcon (overlay, description) объекта BrowserWindow поддерживается только в ОС Windows. Этот метод экземпляра при вызове устанавливает 16 x Наложение 16-пиксельного изображения поверх текущего значка панели задач. Как упоминалось выше, он обычно используется для передачи какого-либо статуса приложения или для пассивного уведомления пользователя. Этот метод экземпляра не имеет возвращаемого типа. Принимает следующие параметры:

• overlay: NativeImage Этот параметр представляет значок NativeImage, отображаемый в правом нижнем углу значка приложения на панели задач Windows. Если для этого параметра установлено значение null , значок наложения очищается. Экземпляр NativeImage специально разработан для приложений Electron для создания значков на панели задач, док-станции, панели задач и приложений с использованием файлов PNG или JPG.
• description: String Этот параметр предоставляет описание значка наложения, который будет предоставлен программам чтения с экрана специальных возможностей. При очистке наложения со значка на панели задач этому параметру можно передать пустое значение String.

В приведенном выше коде мы использовали метод path.join () модуля пути NodeJS для извлечения файла image.png из папки ресурсов. Мы также использовали функцию setTimeout () для имитации удаления значка наложения с панели задач Windows через 5 секунд .
Выход:

Эффект флеш-кадра на панели задач Windows

• Согласно официальному MSDN:

“Typically, a window is flashed to inform the user that the window requires attention but that it does not currently have the keyboard focus.”

• index.js : в Electron мы можем выделить значок приложения на панели задач и заставить его мигать для уведомления пользователя. Мигание значка может происходить либо в течение определенного интервала времени, либо до тех пор, пока не произойдет определенное событие. Если уведомление является срочным, мы можем даже заставить значок мигать, пока пользователь не перестанет явно фокусироваться на окне приложения. Это похоже на подпрыгивание значка док-станции в macOS.

Объяснение: Метод экземпляра win.flashFrame (flag) объекта BrowserWindow запускает или останавливает мигание значка приложения на панели задач Windows в зависимости от предоставленного параметра flag: Boolean. Это эффективный способ привлечь внимание пользователя, и он используется во всех современных настольных приложениях. Этот метод экземпляра не имеет возвращаемого типа. В приведенном выше коде мы использовали функцию setTimeout () для имитации эффекта мигающего значка на панели задач Windows. Эффект мигания активируется через 5 секунд после запуска приложения.

Примечание. Если этот метод экземпляра не вызывается с параметром flag, установленным как false , мигание будет продолжаться бесконечно. В приведенном выше коде мы вызывали с flag: false, когда окно приложения переходит в фокус, то есть когда событие фокуса генерируется в текущем экземпляре BrowserWindow. Подробное объяснение статического метода BrowserWindow.getFocusedWindow () для получения текущего экземпляра BrowserWindow см. В статье: Эмуляция в ElectronJS.
Выход: