Barras de progreso en ElectronJS | Serie 1

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Las barras de progreso son una parte crítica del desarrollo web. No necesitamos enfatizar la importancia de las barras de progreso dentro de una aplicación. Ya existen innumerables formas en las que podemos desarrollar barras de progreso altamente sofisticadas e interactivas utilizando HTML, CSS y JavaScript. Sin embargo, en una aplicación de escritorio, queremos mostrar barras de progreso que encajen bien con la interfaz de usuario nativa del sistema y corroboren la apariencia del sistema operativo. En Electron, podemos mostrar las barras de progreso dentro del icono de la barra de tareas/dock de la aplicación. Esto permite que la aplicación proporcione información de progreso al usuario sin que el usuario tenga que cambiar a la ventana de la aplicación. Esto se puede lograr usando el método Instance de BrowserWindowobjeto. Además, con la ayuda de paquetes externos, podemos mostrar barras de progreso atractivas y personalizables dentro de la ventana de la aplicación que también se integran bien con el tema del sistema nativo. En este tutorial, demostraremos cómo crear barras de progreso dentro de una aplicación Electron. 

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto: 
   

Ejemplo: Siga los pasos dados en Estilo dinámico en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Continuaremos construyendo nuestra aplicación usando la misma base de código. Además, instale el paquete electron-progressbar usando npm . Este paquete externo proporciona una API fácil y altamente personalizable para controlar y mostrar barras de progreso en Electron. Cada aspecto de la barra de progreso se puede personalizar usando CSS y los valores también se pueden establecer dinámicamente. Para obtener más información sobre la barra de progreso de electrones , 

Consulte el enlace: https://www.npmjs.com/package/electron-progressbar. 
 

npm install electron-progressbar --save

Además, realice los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 

paquete.json: 

{
  "name": "electron-progress",
  "version": "1.0.0",
  "description": "Progress Bars in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-progressbar": "^1.2.0"
  }
}

Producción: 
 

Barras de progreso en Electron: la instancia de BrowserWindow es parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron . En primer lugar, demostraremos cómo crear una barra de progreso predeterminada en el ícono de la barra de tareas/dock de la aplicación usando el método Instance del objeto BrowserWindow . 

• index.html: agregue el siguiente fragmento en ese archivo. 

<h3>Progress Bar in Electron</h3>
  <button id="progress">
       Click to Launch BrowserWindow Progress Bar
  </button>
  <br><br>

• index.js: el botón de barra de progreso Click to Launch BrowserWindow aún no tiene ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente fragmento de código en el archivo index.js

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"
    });
});

El método de instancia win.setProgressBar(progress, options) del objeto BrowserWindow crea una barra de progreso en el ícono de la barra de tareas/dock de la aplicación y establece el valor de progreso en la barra de progreso. Este método de instancia es compatible con todas las plataformas de SO. en ventanas, el botón predeterminado de la barra de tareas que se crea para la aplicación se utilizará para mostrar la información de progreso. Como se mencionó anteriormente, el usuario no tiene que cambiar a la ventana de la aplicación para ver la información de progreso. Esta función se ve en muchas aplicaciones de escritorio modernas, como el navegador web Google Chrome. La API predeterminada del Explorador de archivos de Windows también usa esta misma implementación cuando realiza operaciones con archivos. En macOS, la barra de progreso se mostrará como parte del icono de la base. En Linux , esta función solo se admite en el entorno de escritorio de Unity . Necesitamos especificar el nombre de archivo * .desktop en el campo nombre de escritorio en el archivo package.json . Por defecto, asumirá{aplicación.nombre}.escritorio . Este método no tiene un tipo de devolución. Toma los siguientes parámetros. 

• progreso: Doble Este parámetro es responsable de establecer el valor de progreso en la barra de progreso. El rango de valores válido para este parámetro es [0, 1.0] . Por ejemplo, si queremos especificar 49% , llamaríamos a este método Instancia con el valor de progreso como 0.49 . Establecer este parámetro en un valor por debajo de 0 , como -1 , elimina la barra de progreso. Esto se puede usar para terminar una barra de progreso indefinida. Establecer este valor por encima de 1.0 , como 2 , cambiará el modo de la barra de progreso a indeterminado , que se trata en el siguiente parámetro.
• opciones: Objeto (opcional) Este objeto de opciones solo se admite en Windows . Toma los siguientes parámetros.
  • mode: String Especifica el modo de la barra de progreso. Puede contener los siguientes valores.
    • ninguno: no muestra la barra de progreso independientemente del valor de progreso establecido en el método de instancia.
    • normal: muestra una barra de progreso definida con el valor mínimo de 0 y el valor máximo de 1,0 para el parámetro de progreso . Consulte la salida a continuación.
    • indeterminado: muestra una barra de progreso indefinida. El valor establecido en el parámetro de progreso se ignora y la barra de progreso continúa mostrándose hasta que se finaliza manualmente, por ejemplo, configurando el valor del parámetro de progreso como -1 . Consulte la salida a continuación.
    • error: muestra una barra de progreso de error con el porcentaje de progreso igual al valor del parámetro de progreso donde ocurrió el error. La barra de progreso no continúa. Consulte la salida a continuación.
    • en pausa: muestra una barra de progreso en pausa con un porcentaje de progreso igual al valor del parámetro de progreso donde se detuvo la barra de progreso. La barra de progreso no continúa. Consulte la salida a continuación.

Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos métodos estáticos proporcionados por el objeto BrowserWindow . 

• BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas. En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente desde la array como se muestra en el código.
• BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que se centra en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual, devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia a ella directamente mediante este método, como se muestra en el código. 
   

En este punto, al iniciar la aplicación Electron, deberíamos poder ver una barra de progreso indefinida dentro del icono de la barra de tareas de la aplicación. Actualmente, hemos configurado el modo de la barra de progreso como indeterminado . 
Producción: 

Barra de progreso definida, modo: ‘error’  :

Barra de progreso definida, modo: ‘pausa’  :

Barra de progreso definida, modo: ‘normal’  :

Nota: Implementaremos una barra de progreso personalizada usando el paquete electron-progressbar npm que habíamos instalado anteriormente durante la configuración de la aplicación en un artículo separado. Consulte: Barras de progreso en ElectronJS | Juego – 2 . Este artículo será una continuación y continuaremos usando la misma base de código.