Estilo dinámico en ElectronJS

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.

Para hacer que las aplicaciones de escritorio sean más atractivas y atractivas para los usuarios, a los desarrolladores, además del CSS predefinido, también les gustaría proporcionar una función en la que el usuario pueda controlar la apariencia de la aplicación y cambiar el estilo de la aplicación dinámicamente durante la ejecución. . Por ejemplo, cambiar el tema de la aplicación, agregar animaciones a los elementos sobre la marcha, etc. Electron proporciona una forma en la que podemos agregar con éxito un estilo dinámico al contenido de la página utilizando los métodos y eventos de Instancia de la ventana de navegación integrada . objeto y la propiedad webContents . Este tutorial demostrará cómo agregar un estilo dinámico al contenido de la página en 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: Comenzaremos construyendo la aplicación electrónica básica siguiendo los pasos dados.

• Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,

  npm init

  Para generar el archivo package.json . Instale Electron usando npm si no está instalado.

  npm install electron --save

  Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Una vez que Electron se haya instalado correctamente, abra el archivo package.json y realice los cambios necesarios con la clave de secuencias de comandos .
  paquete.json:

  {
    "name": "electron-dynamic",
    "version": "1.0.0",
    "description": "Dynamic Styling in Electron",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    },
    "keywords": [
      "electron"
    ],
    "author": "Radhesh Khanna",
    "license": "ISC",
    "dependencies": {
      "electron": "^8.3.0"
    }
  }
  

• Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

  principal.js:

  const { app, BrowserWindow } = require('electron')    function createWindow() {      // Create the browser window.   const win = new BrowserWindow({     width: 800,     height: 600,     webPreferences: {       nodeIntegration: true     }   })      // Load the index.html of the app.   win.loadFile('src/index.html')      // Open the DevTools.   win.webContents.openDevTools() }    // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. // This method is equivalent to 'app.on('ready', function())' app.whenReady().then(createWindow)    // Quit when all windows are closed. app.on('window-all-closed',() => {   // On macOS it is common for applications and their menu bar   // to stay active until the user quits explicitly with Cmd + Q   if (process.platform !== 'darwin') {     app.quit()   } })    app.on('activate',() => {     // On macOS it's common to re-create a window in the      // app when the dock icon is clicked and there are no      // other windows open.   if (BrowserWindow.getAllWindows().length === 0) {     createWindow()   } })    // In this file, you can include the rest of your  // app's specific main process code. You can also  // put them in separate files and require them here.

• Paso 3: Cree el archivo index.html , el archivo index.js y el archivo index.css dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente. Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

  índice.html:

  <!DOCTYPE html> <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>Hello World!</title>     <!-- https://electronjs.org/docs/tutorial                            /security#csp-meta-tag -->     <meta http-equiv="Content-Security-Policy"            content="script-src 'self' 'unsafe-inline';" />     <link rel="stylesheet" type="text/css" href="index.css">   </head>   <body>     <h1>Hello World!</h1>     We are using node     <script>         document.write(process.versions.node)     </script>, Chrome     <script>         document.write(process.versions.chrome)     </script>, and Electron     <script>         document.write(process.versions.electron)     </script>.        <!-- Adding Individual Renderer Process JS File -->     <script src="index.js"></script>   </body> </html>

• Salida: en este punto, nuestra aplicación electrónica básica está configurada. Para iniciar la aplicación Electron, ejecute el comando:

  npm start

  

Diseño dinámico en Electron: la instancia de BrowserWindow y la propiedad webContents son parte del proceso principal . Para importar y usar BrowserWindowen el proceso Renderer , usaremos el módulo remoto Electron . El método de instancia webContents.insertCSS(css, options) inyecta CSS dinámicamente en el contenido de la página actual de BrowserWindow y devuelve una clave única para la hoja de estilo insertada. Este método devuelve una promesa y se resuelve en una string que representa la clave única para el CSS insertado en la ventana del navegador .contenidos de la página. La misma clave única se puede usar más adelante para eliminar el CSS del contenido de la página mediante el método webContents.removeInsertedCSS() . Toma los siguientes parámetros.

• CSS: String Este valor no debe estar vacío. La string css consiste en el CSS que desea aplicar al contenido de la página BrowserWindow . La string css sigue las mismas reglas que la de CSS3 excepto que se declara en una string.
• opciones: Objeto (Opcional) Toma los siguientes parámetros,
  • CSSOrigin: string (opcional) Los valores pueden ser usuario o autor . Establecer el valor como usuario permite al desarrollador evitar que los sitios web externos anulen el CSS establecido por el desarrollador. El valor predeterminado es autor .

El método de instancia webContents.removeInsertedCSS(key) elimina el CSS insertado del contenido de la página actual en función de la clave única que representa la hoja de estilo que devolvió el método webContents.insertCSS() . Devuelve una promesa nula y se resuelve cuando la eliminación del CSS fue exitosa.

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

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

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

<h3>Dynamic Styling in Electron</h3>
    <button id="style">Change Theme of Page</button>
    <button id="clear">Revert to Original</button>

Nota: En este punto, el archivo index.css está vacío.
index.js : agregue el siguiente fragmento en ese archivo.

const electron = require('electron');
// Importing BrowserWindow from Main Process
const BrowserWindow = electron.remote.BrowserWindow;
  
var style = document.getElementById('style');
let win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
var cssKey = undefined;
  
var css = "body { background-color: #000000; color: white; }"
  
style.addEventListener('click', () => {
    win.webContents.insertCSS(css, {
        cssOrigin: 'author'
    }).then(result => {
        console.log('CSS Added Successfully')
        console.log('Unique Key Returned ', result)
        cssKey = result;
    }).catch(error => {
        console.log(error);
    });
});
  
var clear = document.getElementById('clear');
clear.addEventListener('click', () => {
    if (cssKey) {
        win.webContents.removeInsertedCSS(cssKey)
            .then(console.log('CSS Removed Successfully')).catch(error => {
                console.log(error);
            });
    }
});

Producción:

Nota: si hemos especificado una hoja de estilo externa, como el archivo index.css , o si usamos estilos en línea dentro del documento HTML, el método de instancia webContents.insertCSS() agregará CSS además de los estilos ya existentes. No podrá sobrescribir ni cambiar el CSS definido en la hoja de estilo externa o el estilo en línea, si lo hay, para el contenido actual de la ventana del navegador .

index.css: agregue el siguiente fragmento en ese archivo.

html, body {
    background-color: lightgray;
}

La propiedad de color de fondo se define en el archivo index.css y también la configuramos dinámicamente en el archivo index.js en el método webContents.insertCSS() con un valor diferente. Por lo tanto, según el comportamiento, no debería haber cambios en el color de fondo de la página BrowserWindow . Si ejecutamos el código anterior además de este fragmento de código, deberíamos ver el siguiente resultado:

Producción: