Индикаторы прогресса в ElectronJS | Комплект - 1

Опубликовано: 29 Июля, 2021

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

Индикаторы прогресса - важная часть веб-разработки. Нам не нужно подчеркивать важность индикаторов выполнения в приложении. Уже существует бесчисленное множество способов разработки сложных и интерактивных индикаторов выполнения с использованием HTML, CSS и JavaScript. Однако в настольном приложении мы хотим отображать индикаторы выполнения, которые хорошо сочетаются с собственным пользовательским интерфейсом системы и подтверждают внешний вид системной ОС. В Electron мы можем отображать индикаторы выполнения на панели задач / значке док-станции приложения. Это позволяет приложению предоставлять пользователю информацию о ходе выполнения без необходимости переключаться на само окно приложения. Этого можно добиться с помощью метода Instance объекта BrowserWindow. Кроме того, с помощью внешних пакетов мы можем отображать привлекательные и настраиваемые индикаторы выполнения в окне приложения, которые также хорошо интегрируются с собственной системной темой. В этом руководстве мы продемонстрируем, как создавать индикаторы выполнения в приложении Electron.

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

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

Пример: следуйте инструкциям, приведенным в разделе «Динамическое оформление в ElectronJS», чтобы настроить базовое приложение «Электрон». Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Кроме того, установите пакет electronic-progressbar с помощью npm. Этот внешний пакет предоставляет простой и настраиваемый API для управления и отображения индикаторов выполнения в Electron. Каждый аспект индикатора выполнения можно настроить с помощью CSS, а также можно динамически устанавливать значения. Для получения дополнительной информации об электронном индикаторе прогресса ,

См. Ссылку: https://www.npmjs.com/package/electron-progressbar.

 npm install electronic-progressbar --save

Кроме того, внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.

package.json:

 {
  "name": "электрон-прогресс",
  "версия": "1.0.0",
  "description": "Полосы прогресса в электроне",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0",
    "электрон-прогрессбар": "^ 1.2.0"
  }
}

Выход:

Индикаторы выполнения в Electron: Экземпляр BrowserWindow является частью основного процесса . Чтобы импортировать и использовать BrowserWindow в процессе рендеринга, мы будем использовать удаленный модуль Electron. Сначала мы продемонстрируем, как создать индикатор выполнения по умолчанию на панели задач / значке в доке приложения, используя метод Instance объекта BrowserWindow.

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

html




< h3 >Progress Bar in Electron</ h3 >
< button id = "progress" >
Click to Launch BrowserWindow Progress Bar
</ button >
< br >< br >
  • index.js: кнопка Click to Launch BrowserWindow Progress Bar еще не имеет связанных с ней функций. Чтобы изменить это, добавьте следующий фрагмент кода в файл index.js

javascript






const electron = require( 'electron' )
// Import BrowserWindow using Electron remote
const { getGlobal, BrowserWindow } = electron.remote
let win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
var progress = document.getElementById( 'progress' );
progress.addEventListener( 'click' , () => {
win.setProgressBar(0.5, {
mode: "indeterminate"
});
});

Метод экземпляра win.setProgressBar (progress, options) объекта BrowserWindow создает индикатор выполнения на панели задач / значке док-станции приложения и устанавливает значение выполнения в индикаторе выполнения. Этот метод экземпляра поддерживается на всех платформах ОС. В Windows кнопка панели задач по умолчанию, созданная для приложения, будет использоваться для отображения информации о ходе выполнения. Как упоминалось ранее, пользователю не нужно переключаться в окно приложения для просмотра информации о ходе выполнения. Эта функция присутствует во многих современных настольных приложениях, таких как веб-браузер Google Chrome. API Проводника Windows по умолчанию также использует ту же реализацию при выполнении файловых операций. В macOS индикатор выполнения будет отображаться как часть значка док-станции. В Linux эта функция поддерживается только в среде рабочего стола Unity . Нам нужно указать имя файла * .desktop в поле desktopName в файле package.json. По умолчанию будет использоваться {app.name} .desktop . Этот метод не имеет возвращаемого типа. Он принимает следующие параметры.

  • progress: Double Этот параметр отвечает за установку значения прогресса в индикаторе выполнения. Допустимый диапазон значений для этого параметра [0, 1.0] . Например, если мы хотим указать 49% , мы должны вызвать этот метод экземпляра со значением прогресса 0,49 . Установка для этого параметра значения ниже 0, например -1, убирает индикатор выполнения. Это можно использовать, чтобы закрыть неопределенный индикатор выполнения. Установка этого значения выше 1.0, например 2 , изменит режим индикатора выполнения на неопределенный, который рассматривается в следующем параметре.
  • options: Object (Необязательно) Этот объект параметров поддерживается только в Windows. Он принимает следующие параметры.
    • mode: String Определяет режим для индикатора выполнения. Он может содержать следующие значения.
      • Нет: Не отображается индикатор выполнения , независимо от установленного значения прогресса в методе Instance.
      • нормальный: отображает определенный индикатор выполнения с минимальным значением 0 и максимальным значением 1,0 для параметра прогресса. См. Вывод ниже.
      • неопределенный: отображает неопределенный индикатор выполнения. Значение, установленное в параметре прогресса, игнорируется, и индикатор выполнения продолжает отображаться до тех пор, пока он не будет завершен вручную, например, установив значение параметра прогресса как -1 . См. Вывод ниже.
      • Ошибка: выводит сообщение об ошибке прогресс бара с процент прогресса равна значением параметра прогресса , где произошла ошибка. Индикатор выполнения не переходит дальше. См. Вывод ниже.
      • помолчал: Отображает Приостановлено прогресс бар с процент прогресса равен значению параметра прогресса , где был приостановлен прогресс бар. Индикатор выполнения не переходит дальше. См. Вывод ниже.

Чтобы получить текущий экземпляр BrowserWindow в процессе рендеринга, мы можем использовать некоторые статические методы, предоставляемые объектом BrowserWindow.

  • BrowserWindow.getAllWindows (): этот метод возвращает массив активных / открытых экземпляров BrowserWindow. В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться из массива, как показано в коде.
  • BrowserWindow.getFocusedWindow (): этот метод возвращает экземпляр BrowserWindow, который ориентирован на приложение. Если текущий экземпляр BrowserWindow не найден, возвращается значение null . В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.

На этом этапе после запуска приложения Electron мы должны увидеть неопределенный индикатор выполнения внутри значка приложения на панели задач. В настоящее время мы установили режим индикатора выполнения как неопределенный .
Выход:

Определенный индикатор выполнения, режим: 'ошибка' :

Определенная полоса прогресса, режим: 'пауза' :

Определенная полоса прогресса, режим: «нормальный» :

Примечание. Мы реализуем настраиваемую полосу выполнения с помощью пакета npm electronic-progressbar , который мы установили ранее во время установки приложения, в отдельной статье. Пожалуйста, обратитесь: Индикаторы прогресса в ElectronJS | Комплект - 2 . Эта статья будет продолжением, и мы продолжим использовать ту же кодовую базу.