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

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

Эта статья является продолжением статьи: Индикаторы прогресса в ElectronJS | Set - 1. В предыдущей статье мы обсудили, как создавать индикаторы выполнения на панели задач / значке док-станции приложения Electron, используя метод Instance объекта BrowserWindow. В этой статье мы реализуем настраиваемую полосу выполнения в приложении Electron с помощью пакета npm electronic-progressbar , который мы установили ранее во время установки приложения. Мы продолжим использовать ту же базу кода, на которой остановились в предыдущей статье. Структура проекта и файл package.json также остаются прежними. Как обсуждалось в предыдущей статье, пакет electronic-progressbar предоставляет простой и настраиваемый API для отображения и управления индикаторами выполнения в приложении Electron. Этот пакет можно только импортировать и использовать непосредственно в основном процессе . Чтобы импортировать и использовать этот пакет в процессе рендеринга , нам нужно внести дополнительные изменения в файл main.js. В этом случае мы не можем использовать удаленный модуль Electron, так как это внешний пакет. Кроме того, этот пакет можно использовать только после того, как событие готовности модуля приложения генерируется в основном процессе приложения.

  • main.js : добавьте в этот файл следующий фрагмент. После этого мы можем импортировать и использовать этот пакет в процессах рендеринга приложения, поскольку мы добавили этот импорт к глобальному объекту в файле main.js. В случае, если мы импортируем пакет electronic-progressbar непосредственно в процесс рендеринга, мы столкнемся с ошибкой: Uncaught TypeError: BrowserWindow не является конструктором . Эта ошибка возникает, потому что внутри этот пакет пытается инициализировать объект BrowserWindow непосредственно из Electron без использования удаленного модуля, который поддерживается только в основном процессе, но не в процессах рендеринга .

javascript




const { app, BrowserWindow } = require( 'electron' )
global.ProgressBar = require( 'electron-progressbar' );
  • index.html : добавьте в этот файл следующий фрагмент.

html




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

javascript




const { getGlobal, app, BrowserWindow } = electron.remote
// Importing ProgressBar in the Renderer Process from global
// Actual Import in main.js file
const ProgressBar = getGlobal( 'ProgressBar' );
// Cannot Import Directly in the Renderer Process
// const ProgressBar = require('electron-progressbar')
var custom = document.getElementById( 'custom' );
custom.addEventListener( 'click' , () => {
var progressBar = new ProgressBar({
abortOnError: false ,
// Determinate Progress Bar
indeterminate: false ,
initialValue: 0,
maxValue: 100,
// On Completion, Progress Bar window will not close.
closeOnComplete: false ,
title: 'Title of the Progress Bar' ,
text: 'Text of the Progress Bar' ,
detail: 'Detail to Show actual Progress, ' +
'Can be set as Dynamic to show actual Status' ,
style: {
text: {},
detail: {},
bar: { 'width' : '100%' , 'background-color' : '#BBE0F1' },
value: {}
},
browserWindow: {
parent: null ,
modal: true ,
resizable: false ,
closable: false ,
minimizable: false ,
maximizable: false ,
width: 500,
height: 170,
// Important - If not passed, Progress Bar will not be displayed.
webPreferences: {
nodeIntegration: true
}
}
});
progressBar
.on( 'completed' , (value) => {
console.log(progressBar.isCompleted());
console.log( 'Progress Bar Completed' );
progressBar.detail = 'Task completed. Exiting...' ;
})
.on( 'ready' , () => {
console.log(progressBar.getOptions())
})
.on( 'aborted' , (value) => {
console.log(`aborted... ${value}`);
})
.on( 'progress' , (value) => {
progressBar.detail =
`Value ${value} out of ${progressBar.getOptions().maxValue}...`;
});
setInterval( function () {
if (!progressBar.isCompleted()) {
progressBar.value += 1;
}
}, 100);
});

Новый конструктор ProgressBar (options) используется для создания и инициализации нового индикатора выполнения в приложении. Нам нужно передать объект параметров этому конструктору для инициализации индикатора выполнения с пользовательскими конфигурациями. Он принимает следующие параметры. Этот конструктор возвращает экземпляр ProgressBar .

  • abortOnError: Boolean Этот параметр определяет, должен ли индикатор выполнения прерываться и закрываться при возникновении внутренней ошибки. Значение по умолчанию - false .
  • indeterminate: Boolean Этот параметр определяет и инициализирует режим индикатора выполнения. Если установлено значение true , инициализируется неопределенный индикатор выполнения, что эквивалентно неопределенному режиму, как обсуждалось в предыдущей статье. Если установлено значение false , индикатор выполнения будет инициализирован в детерминированном режиме. Значение по умолчанию - истина . В этом руководстве мы инициализировали определенный индикатор выполнения и использовали метод setInterval () для имитации фактической задачи индикатора выполнения. Обратитесь к выходным данным для лучшего понимания.
  • initialValue: Integer Этот параметр устанавливает начальное значение индикатора выполнения. Это можно использовать только для определенного индикатора выполнения, то есть, когда неопределенный: ложь . Значение по умолчанию - 0 .
  • maxValue: Integer Этот параметр устанавливает максимальное значение индикатора выполнения. Когда значение индикатора выполнения станет равным этому значению параметра, индикатор выполнения будет установлен как завершенный, и будет запущено событие завершения. Метод экземпляра isCompleted () вернет true . Это можно использовать только для определенного индикатора выполнения, то есть, когда неопределенный: ложь . Значение по умолчанию - 100 .
  • closeOnComplete: Boolean Этот параметр определяет, должно ли окно индикатора выполнения закрываться автоматически по завершении. Если установлено значение false , индикатор выполнения необходимо закрыть вручную, вызвав метод экземпляра close () или закрыв задачу окна индикатора выполнения. Значение по умолчанию - истина .
  • title: String Этот параметр определяет текст, который будет отображаться в строке заголовка окна индикатора выполнения. Значение по умолчанию - Подождите
  • text: String Этот параметр определяет текст, который будет отображаться внутри окна, но над элементом индикатора выполнения. Значение по умолчанию - Подождите … Это значение может быть динамически установлено или изменено с помощью свойств экземпляра индикатора выполнения.
  • detail: String Этот параметр определяет текст, который будет отображаться между текстовым параметром и фактическим элементом индикатора выполнения. Этот параметр используется для отображения текущего состояния индикатора выполнения, т. Е. Завершенного значения или процента прогресса фактического выполнения задачи. Этот параметр не имеет значения по умолчанию. Это значение может быть динамически установлено или изменено с помощью свойств экземпляра индикатора выполнения.
  • style: Object (Необязательно) Этот параметр принимает объект. Здесь мы определяем визуальные стили для различных элементов индикатора выполнения в соответствии с нашими собственными стилями CSS. Он принимает следующие параметры. Все определенные стили следуют строгим правилам CSS.
    • text: Object Этот параметр принимает объект, содержащий любые свойства CSS для стилизации текстового элемента индикатора выполнения. У этого параметра нет объекта по умолчанию.
    • detail: Object Этот параметр принимает объект, содержащий любые свойства CSS для стилизации элемента подробностей индикатора выполнения. У этого параметра нет объекта по умолчанию.
    • бар: Object Этого параметр принимает объект , содержащий какие - либо свойства CSS для укладки штрихового элемента индикатора выполнения. Этот параметр имеет предопределенный объект CSS по умолчанию: {'width': '100%', 'background-color': '# BBE0F1'} для элемента bar.
    • value: Object Этот параметр принимает объект, содержащий любые свойства CSS, для стилизации элемента значения в окне индикатора выполнения. У этого параметра есть предопределенный объект CSS по умолчанию: {'background-color': '# 0976A9'} для элемента значения.
  • browserWindow: Object Этот параметр принимает параметры экземпляра BrowserWindow Electron. Хотя по умолчанию используется только несколько свойств, мы можем указать любое количество поддерживаемых свойств для объекта параметров экземпляра BrowserWindow. Этот параметр определяет характеристики окна индикатора выполнения. Он принимает следующие параметры.
    Примечание: обязательно передать этот объект с параметрами по умолчанию, необходимыми для правильного поведения индикатора выполнения. Подробный список всех параметров по умолчанию, необходимых для этого объекта, приведен ниже.
    • parent: Экземпляр BrowserWindow. Этот параметр принимает экземпляр BrowserWindow. Если передано, окно индикатора выполнения всегда будет отображаться поверх родительского окна и будет блокировать его, чтобы пользователи не могли взаимодействовать с ним, пока индикатор выполнения не будет завершен / прерван и закрыт. Переданное значение по умолчанию - null . Когда в этом параметре передается экземпляр объекта BrowserWindow, считается, что родительское окно уведомлено .
    • modal: Boolean Этот параметр определяет, является ли окно индикатора выполнения модальным окном. Модальное окно - это дочернее окно, которое отключает родительское окно. Этот параметр будет работать только в том случае, если окно индикатора выполнения является дочерним окном, то есть когда экземпляр объекта BrowserWindow передается в родительском параметре. Дочернее окно всегда отображается в верхней части родительского окна. Значение по умолчанию для этого параметра - истина .
    • resizable: Boolean Этот параметр определяет, можно ли изменять размер окна индикатора выполнения. Значение по умолчанию - false .
    • closable: Boolean Этот параметр определяет, закрывается ли окно индикатора выполнения, т.е. может ли пользователь закрыть это окно индикатора выполнения вручную. Значение по умолчанию - false . Если для этого параметра установлено значение false , значок закрытия по-прежнему отображается в строке заголовка окна индикатора выполнения, но не отвечает.
    • Minimizable: Boolean Этот параметр определяет, можно ли свернуть окно индикатора выполнения. Значение по умолчанию - false .
    • maximizable: Boolean Этот параметр определяет, можно ли развернуть окно индикатора выполнения до максимума. Значение по умолчанию - false .
    • width: Integer Этот параметр определяет ширину окна индикатора выполнения в пикселях . Значение по умолчанию для ширины окна индикатора выполнения - 450 пикселей .
    • height: Integer Этот параметр определяет высоту окна индикатора выполнения в пикселях . Значение по умолчанию для высоты окна индикатора выполнения - 175 пикселей .

Экземпляр ProgressBar, возвращаемый конструктором, поддерживает следующие события экземпляра. Метод экземпляра on (eventName, listener) добавляет функцию прослушивателя для события eventName. Никаких проверок не выполняется, чтобы увидеть, была ли уже добавлена функция прослушивателя. Несколько вызовов, передающих одну и ту же комбинацию события eventName и функции прослушивателя , приведут к тому, что прослушиватель будет добавлен и вызван несколько раз. Этот метод Instance возвращает ссылку на это так , что несколько вызовов EventListener могут быть соединены друг с другом в одной и той же ProgressBar Instance. Обратитесь к коду для лучшего понимания.

  • ready: Event Это событие экземпляра запускается, когда индикатор выполнения инициализируется и готов к использованию. Как уже упоминалось выше, индикатор выполнения можно использовать только после того, как будет сгенерировано событие готовности модуля приложения.
  • progress: Event Это событие экземпляра запускается только в случае определенных индикаторов выполнения, то есть, когда undeterminate: false . Это событие экземпляра запускается каждый раз, когда изменяется значение progressBar. Он получает единственный параметр с именем value: Integer, который представляет текущее значение прогресса. Это событие экземпляра используется для динамической установки и отображения пользователю текущего состояния индикатора выполнения. Обратитесь к коду для лучшего понимания.
  • Завершено: Событие Это событие экземпляра запускается, когда индикатор выполнения завершается, т. е. когда его значение становится равным определенному параметру maxValue или когда на индикаторе выполнения вызывается метод экземпляра complete () . Он получает единственный параметр с именем value: Integer, который представляет текущее значение прогресса.
  • aborted: Event Это событие экземпляра запускается, когда индикатор выполнения закрывается, но он еще не завершен, т.е. когда пользователь вручную закрывает окно индикатора выполнения ( closable: true ) или метод экземпляра close () вызывается до того, как индикатор выполнения будет завершен, т.е. сработало завершенное событие экземпляра. Он получает единственный параметр с именем value: Integer, который представляет текущее значение хода выполнения, на котором он был прерван.

Экземпляр ProgressBar, возвращаемый конструктором, поддерживает следующие свойства экземпляра. Эти свойства экземпляра можно использовать для динамического изменения состояния индикатора выполнения.

  • value: Integer Это свойство экземпляра используется для получения или динамической установки текущего прогресса индикатора выполнения. Когда этот параметр значения изменяется, запускается событие экземпляра прогресса, и этот параметр передается в событие экземпляра. Это свойство экземпляра доступно только для определенных индикаторов выполнения. Обратитесь к коду для лучшего понимания.
  • text: String Это свойство экземпляра используется для получения или динамической установки текстового параметра. Это представляет текст, который будет отображаться внутри окна индикатора выполнения, но над элементом индикатора выполнения.
  • detail: String Это свойство экземпляра используется для получения или динамической установки параметра подробностей. Это представляет текст, который будет отображаться между текстовым параметром и фактическим элементом индикатора выполнения. Этот параметр используется для отображения текущего состояния индикатора выполнения и может динамически изменяться в зависимости от параметра значения. Обратитесь к коду для лучшего понимания.

Кроме того, экземпляр ProgressBar, возвращаемый конструктором, поддерживает следующие методы экземпляра. Эти методы экземпляра полезны для управления поведением индикатора выполнения и для проверки текущего состояния индикатора выполнения.

  • isCompleted (): этот метод экземпляра возвращает логическое значение, которое представляет текущий статус индикатора выполнения. Этот метод вернет true только тогда, когда индикатор выполнения отмечен как завершенный, в противном случае он вернет false .
  • setCompleted (): этот метод экземпляра отмечает состояние индикатора выполнения как завершенное . Если индикатор выполнения не определен , требуется ручной вызов этого метода экземпляра, потому что это единственный способ завершить задачу и инициировать событие завершения , в противном случае индикатор выполнения будет отображаться вечно. Этот метод не имеет возвращаемого типа.
  • isInProgress (): этот метод экземпляра возвращает логическое значение, которое представляет текущий статус индикатора выполнения. Этот метод вернет true, если индикатор выполнения еще не завершен или не прерван, в противном случае он возвращает false .
  • close (): этот метод экземпляра закрывает окно индикатора выполнения. Если индикатор выполнения еще не заполнен, он будет прерван, и будет запущено событие Instance Event aborted . Этот метод экземпляра не имеет возвращаемого типа. Если closable: false в параметре browserWindow , то вызов этого метода требуется для завершения задачи окна индикатора выполнения.
  • getOptions (): этот метод экземпляра просто возвращает объект, представляющий все параметры, которые были определены и установлены для конструктора индикатора выполнения во время инициализации.

На этом этапе мы успешно реализовали определенный индикатор выполнения, который отображается в окне приложения с помощью пакета npm electronic-progressbar. В этом руководстве мы сделали индикатор выполнения динамическим, смоделировав реальную задачу с помощью метода setInterval (). После запуска приложения Electron мы должны увидеть следующий результат :

РЕКОМЕНДУЕМЫЕ СТАТЬИ