Este artículo es una continuación del artículo: Barras de progreso en ElectronJS | Conjunto – 1 . En el artículo anterior, hemos discutido cómo crear barras de progreso en el ícono de la barra de tareas/dock de la aplicación Electron usando el método Instance del objeto BrowserWindow . En este artículo, implementaremos una barra de progreso personalizada dentro de la aplicación Electron usando el paquete electron-progressbar npm que instalamos anteriormente durante la configuración de la aplicación. Continuaremos usando la misma base de código desde donde lo dejamos en el artículo anterior. La estructura del proyecto y el archivo package.json también siguen siendo los mismos. Como se discutió en el artículo anterior, la barra de progreso de electronesEl paquete proporciona una API fácil y altamente personalizable para mostrar y controlar las barras de progreso dentro de la aplicación Electron. Este paquete solo puede ser importado y utilizado directamente en el Proceso Principal . Para importar y usar este paquete en el proceso Renderer , debemos realizar un cambio adicional en el archivo main.js. No podemos usar el módulo remoto Electron en este caso ya que es un paquete externo. Además, este paquete solo se puede usar después de que se emita el evento listo del módulo de la aplicación en el proceso principal de la aplicación.
- main.js : agregue el siguiente fragmento en ese archivo. Después de eso, podemos importar y usar este paquete en los procesos de procesamiento de la aplicación, ya que hemos agregado esa importación al objeto global en el archivo main.js. En caso de que importemos el paquete electron-progressbar directamente en Renderer Process , encontraremos el Error: Uncaught TypeError: BrowserWindow is not a constructor . Este error se genera porque internamente este paquete intenta inicializar un objeto BrowserWindow directamente desde Electron sin usar el módulo remoto que solo se admite en el proceso principal y no en elProcesos de renderizado .
javascript
const { app, BrowserWindow } = require('electron')
global.ProgressBar = require('electron-progressbar');
- index.html : agregue el siguiente fragmento en ese archivo.
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 : el botón Hacer clic para iniciar Electron ProgressBar desde el paquete aún no tiene ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo 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);
});
El nuevo constructor ProgressBar (opciones) se usa para crear e inicializar una nueva barra de progreso dentro de la aplicación. Necesitamos pasar un objeto de opciones a este constructor para inicializar la barra de progreso con configuraciones personalizadas. Toma los siguientes parámetros. Este constructor devuelve una instancia de ProgressBar .
- abortOnError: Boolean Este parámetro define si la barra de progreso debe cancelarse y cerrarse si ocurre un error interno. El valor predeterminado es falso .
- indeterminado: booleano Este parámetro define e inicializa el modo de la barra de progreso. Si se establece en true , se inicializa una barra de progreso indefinida que es equivalente al modo indeterminado como se explicó en el artículo anterior. Si se establece en falso , la barra de progreso se inicializará en modo determinado . El valor predeterminado es verdadero . En este tutorial, inicializamos una barra de progreso determinada y usamos el método setInterval() para simular una tarea de barra de progreso real. Consulte la salida para una mejor comprensión.
- initialValue: Integer Este parámetro establece el valor inicial de la barra de progreso. Esto solo se puede usar para una barra de progreso determinada , es decir, cuando es indeterminada: false . El valor predeterminado es 0 .
- maxValue: Integer Este parámetro establece el valor máximo de la barra de progreso. Cuando el valor de la barra de progreso sea igual al valor de este parámetro, la barra de progreso se configurará como completada y se activará el evento completo . El método de instancia isCompleted() devolverá true . Esto solo se puede usar para una barra de progreso determinada , es decir, cuando es indeterminada: false . El valor predeterminado es 100 .
- closeOnComplete: Boolean Este parámetro define si la ventana de la barra de progreso debe cerrarse automáticamente al finalizar. Si se establece en false , la barra de progreso debe cerrarse manualmente llamando al método de instancia close() o cerrando la tarea de la ventana de la barra de progreso. El valor predeterminado es verdadero .
- título: String Este parámetro define el Texto que se mostrará en la barra de título de la ventana de la barra de progreso. El valor predeterminado es Esperar …
- text: String Este parámetro define el texto que se mostrará dentro de la ventana pero encima del elemento de la barra de progreso. El valor predeterminado es Esperar … Este valor se puede establecer o cambiar dinámicamente mediante las Propiedades de instancia de la barra de progreso.
- detalle: string Este parámetro define el texto que se mostrará entre el parámetro de texto y el elemento real de la barra de progreso. Este parámetro se utiliza para mostrar el estado actual de la barra de progreso, es decir, el valor completado o el porcentaje de progreso de la tarea real que se está realizando. Este parámetro no tiene ningún valor por defecto. Este valor se puede establecer o cambiar dinámicamente usando las Propiedades de instancia de la barra de progreso.
- estilo: Objeto (Opcional) Este parámetro toma un objeto. Aquí es donde definimos los estilos visuales para los diferentes elementos de la barra de progreso según nuestros propios estilos CSS. Toma los siguientes parámetros. Todos los estilos definidos siguen estrictas reglas CSS.
- texto: Objeto Este parámetro toma un objeto que contiene cualquier propiedad CSS para diseñar el elemento de texto de la barra de progreso. Este parámetro no tiene ningún objeto por defecto.
- detalle: Objeto Este parámetro toma un objeto que contiene cualquier propiedad CSS para diseñar el elemento de detalle de la barra de progreso. Este parámetro no tiene ningún objeto por defecto.
- bar: Objeto Este parámetro toma un objeto que contiene cualquier propiedad CSS para diseñar el elemento de la barra de la barra de progreso. Este parámetro tiene un objeto CSS predeterminado predefinido: {‘width’:’100%’, ‘background-color’:’#BBE0F1′} para el elemento de barra .
- valor: Objeto Este parámetro toma un objeto que contiene cualquier propiedad CSS para diseñar el elemento de valor en la ventana de la barra de progreso. Este parámetro tiene un objeto CSS predeterminado predefinido: {‘background-color’:’#0976A9′} para el elemento de valor .
- browserWindow: Object Este parámetro incluye las opciones de instancia de BrowserWindow de Electron . Aunque solo se utilizan unas pocas propiedades de forma predeterminada, podemos especificar cualquier cantidad de propiedades para el objeto de opciones de instancia de BrowserWindow que se admiten. Este parámetro define las características de la ventana de la barra de progreso. Toma los siguientes parámetros.
Nota: Es obligatorio pasar este objeto con los parámetros por defecto requeridos para que la barra de progreso se comporte correctamente. A continuación se proporciona una lista detallada de todos los parámetros predeterminados necesarios para este objeto.- padre: Instancia de BrowserWindow Este parámetro toma una instancia de BrowserWindow . Si se pasa, la ventana de la barra de progreso siempre se mostrará en la parte superior de la ventana principal y la bloqueará para que los usuarios no puedan interactuar con ella hasta que la barra de progreso se complete/cancele y se cierre. El valor predeterminado pasado es nulo . Cuando se pasa la Instancia del objeto BrowserWindow en este parámetro, se dice que la ventana principal está informada .
- modal: booleano Este parámetro define si la ventana de la barra de progreso es una ventana modal o no. Una ventana modal es una ventana secundaria que desactiva la ventana principal. Este parámetro solo funcionará si la ventana de la barra de progreso es una ventana secundaria , es decir, cuando la instancia del objeto BrowserWindow se pasa en el parámetro principal . Una ventana secundaria siempre se muestra en la parte superior de la ventana principal . El valor predeterminado para este parámetro es verdadero .
- redimensionable: booleano Este parámetro define si la ventana de la barra de progreso es redimensionable o no. El valor predeterminado es falso .
- closable: booleano Este parámetro define si la ventana de la barra de progreso se puede cerrar o no, es decir, si el usuario puede cerrar esta ventana de la barra de progreso manualmente. El valor predeterminado es falso . Cuando este parámetro se establece en false , el ícono de cerrar aún se muestra en la barra de título de la ventana de la barra de progreso, pero no responde.
- minimizable: booleano Este parámetro define si la ventana de la barra de progreso se puede minimizar o no. El valor predeterminado es falso .
- maximizable: booleano Este parámetro define si la ventana de la barra de progreso se puede maximizar o no. El valor predeterminado es falso .
- ancho: Entero Este parámetro define el ancho de la ventana de la barra de progreso en píxeles . El valor predeterminado para el ancho de la ventana de la barra de progreso es 450px .
- altura: Entero Este parámetro define la altura de la ventana de la barra de progreso en píxeles . El valor predeterminado para la altura de la ventana de la barra de progreso es 175px .
La instancia de ProgressBar devuelta por el constructor admite los siguientes eventos de instancia. El método de instancia on(eventName, listener) agrega la función de escucha para el evento eventName . No se realizan comprobaciones para ver si la función de escucha ya se ha agregado. Varias llamadas que pasan la misma combinación de evento eventName y función de escucha darán como resultado que se agregue y se llame a la escucha varias veces. Este método de instancia devuelve una referencia a esto para que varias llamadas de EventListener se puedan enstringr juntas a la misma barra de progreso.Instancia. Consulte el código para una mejor comprensión.
- listo: Evento Este evento de instancia se activa cuando la barra de progreso se inicializa y está lista para usarse. Como ya se mencionó anteriormente, la barra de progreso solo se puede usar después de que se emita el Evento listo del módulo de la aplicación .
- progreso: Evento Este evento de instancia se activa solo en el caso de barras de progreso determinadas , es decir, cuando son indeterminadas: falso . Este evento de instancia se activa cada vez que cambia el valor de la barra de progreso . Recibe un solo parámetro llamado valor: Entero que representa el valor actual del progreso. Este evento de instancia se utiliza para establecer y mostrar dinámicamente el estado actual de la barra de progreso al usuario. Consulte el código para una mejor comprensión.
- completado: Evento Este evento de instancia se activa cuando se completa la barra de progreso, es decir, cuando su valor se iguala al parámetro maxValue definido o se llama al método de instancia complete() en la barra de progreso. Recibe un solo parámetro llamado valor: Entero que representa el valor actual del progreso.
- abortado: Evento Este evento de instancia se activa cuando la barra de progreso se cierra pero aún no se ha completado, es decir, cuando el usuario cierra manualmente la ventana de la barra de progreso ( closable: true ) o se llama al método de instancia close() antes de que se complete la barra de progreso, es decir, antes el evento Instancia completado se ha disparado. Recibe un solo parámetro llamado valor: Entero que representa el valor actual del progreso en el que se abortó.
La instancia de ProgressBar devuelta por el constructor admite las siguientes propiedades de instancia. Estas propiedades de instancia se pueden usar para cambiar dinámicamente el estado de la barra de progreso.
- valor: entero Esta propiedad de instancia se utiliza para obtener o establecer dinámicamente el progreso actual de la barra de progreso. Cuando este parámetro de valor cambia, se activa el evento de instancia de progreso y este parámetro se pasa al evento de instancia. Esta propiedad de instancia solo está disponible para determinadas barras de progreso. Consulte el código para una mejor comprensión.
- texto: string Esta propiedad de instancia se utiliza para obtener o establecer dinámicamente el parámetro de texto . Esto representa el texto que se mostrará dentro de la ventana de la barra de progreso pero encima del elemento de la barra de progreso.
- detalle: string Esta propiedad de instancia se utiliza para obtener o establecer dinámicamente el parámetro de detalle . Esto representa el texto que se mostrará entre el parámetro de texto y el elemento real de la barra de progreso. Este parámetro se usa para mostrar el estado actual de la barra de progreso y se puede cambiar dinámicamente según el parámetro de valor . Consulte el código para una mejor comprensión.
Además, la instancia de ProgressBar devuelta por el constructor admite los siguientes métodos de instancia. Estos métodos de instancia son útiles para controlar el comportamiento de la barra de progreso y verificar el estado actual de la barra de progreso.
- isCompleted(): este método de instancia devuelve un valor booleano que representa el estado actual de la barra de progreso. Este método devolverá verdadero solo cuando la barra de progreso esté marcada como completada; de lo contrario, devolverá falso .
- setCompleted(): este método de instancia marca el estado de la barra de progreso como completo . Si la barra de progreso es indeterminada , se requiere una llamada manual a este método Instancia porque es la única forma de completar la tarea y desenstringr el evento completo ; de lo contrario, la barra de progreso se mostraría para siempre. Este método no tiene un tipo de devolución.
- isInProgress(): este método de instancia devuelve un valor booleano que representa el estado actual de la barra de progreso. Este método devolverá verdadero si la barra de progreso aún no se ha completado o cancelado; de lo contrario, devolverá falso .
- close(): este método de instancia cierra la ventana de la barra de progreso. Si la barra de progreso aún no se ha completado, se cancelará y se activará el Evento de instancia cancelado . Este método de Instancia no tiene un tipo de retorno. Si se puede cerrar: false en el parámetro browserWindow , se requiere una llamada a este método para finalizar la tarea de la ventana de la barra de progreso.
- getOptions(): este método de instancia simplemente devuelve un objeto que representa todas las opciones que se definieron y configuraron para el constructor de la barra de progreso en el momento de la inicialización.
En este punto, hemos implementado con éxito una barra de progreso determinada que es visible en la ventana de la aplicación con la ayuda del paquete electron-progressbar npm. Para este tutorial, hemos hecho que la barra de progreso sea dinámica al simular una tarea real usando el método setInterval() . Al iniciar la aplicación Electron, deberíamos ver el siguiente resultado:
Publicación traducida automáticamente
Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA