¿Cómo cambiar entre varias ventanas de la aplicación Electron JS?

Posted on by Rudeus Greyrat

Si tiene conocimientos previos sobre el desarrollo de aplicaciones web y está pensando en lanzarse a la creación de una aplicación de escritorio, se encuentra en el lugar correcto para comenzar.  

ElectronJS es un marco de código abierto que ayuda a desarrollar una aplicación de escritorio multiplataforma utilizando HTML, CSS y JavaScript simples. Incluso si desea desarrollar una aplicación usando Angular o React e intentar construir la versión de escritorio, Electron JS le brinda el mismo soporte. Electron utiliza un navegador Chromium sin interfaz gráfica de usuario que brinda acceso a las API de Node JS a través de las propias API de Electron.

En cualquier aplicación web, mientras hacemos clic en algunos enlaces, a veces se abre una nueva pestaña en el navegador con nuevo contenido. Además, creemos que observa el mismo comportamiento en el caso de la aplicación de escritorio. Cuando hacemos clic en algún botón en cualquier aplicación de escritorio, se abre una nueva ventana encima de la ventana anterior, y hasta que cerremos la ventana superior (o la nueva ventana), la ventana principal no funcionará. Electron proporciona esta funcionalidad de abrir múltiples ventanas en función de hacer clic en un botón o hacer clic en cualquier enlace. 

Para entenderlo, supongamos que desarrolla una aplicación y desea abrir la página Configuración en otra ventana. Y este tutorial demostrará cómo abrir la página de Configuración en una nueva ventana usando Electron JS. 

Suponemos que está familiarizado con la configuración básica de la aplicación Electron (si no es así, vaya a Crear aplicación electrónica básica ). Node y npm deben estar instalados en su sistema para ejecutar la aplicación Electron. 

Estructura del proyecto: Comencemos con la estructura básica del proyecto de la siguiente manera.

Estructura del proyecto

  • node_modules : contiene los paquetes JS del Node que se crearon mientras ejecutaba npm init -y
  • app.js : este es el archivo principal de Electron JS, donde especificamos las configuraciones de la ventana de nuestra aplicación
  • index.html : Este es el archivo HTML principal (Considérelo como la página principal de nuestra aplicación)
  • package-lock.json : este archivo ha sido generado automáticamente por npm mientras modificamos algo en node_modules o package.json
  • package.json : este archivo ha sido generado por npm y contiene las dependencias adicionales de nuestro proyecto (como un electrón) y algunas otras configuraciones
  • settings.html : este es el archivo HTML de configuración (que se mostrará en la ventana de configuración)

paquete.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Sandip",
  "license": "ISC",
  "dependencies": {
    "electron": "^12.0.2"
  }
}

Copie el archivo de script principal ( main.js ) de Create Basic Electron Application a nuestra app.js , que actúa como el proceso principal de nuestra aplicación.

 

Escriba un código HTML simple en index.html (como si fuera su primera ventana o ventana principal) de la siguiente manera 

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>First Window</title>
    </head>
    <body>
        <div>
            <h1 style="color: green;">
              Hello : This is first window
            </h1>
            <br />
  
            <button onclick="goToSettingsWindow()">
              Go to Settings Window
            </button>
        </div>
    </body>
</html>

Producción: 

Ventana inicial

 

 

app.js: tenemos la intención de abrir una nueva ventana de configuración mientras hace clic en el botón » Ir a la ventana de configuración «. Verifiquemos los cambios necesarios que se deben realizar en el archivo app.js.

app.js

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");
  
let mainWindow;
  
// Function to create independent window or main window
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    // Make sure to add webPreferences with
    // nodeIntegration and contextIsolation
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
    show: false,
  });
  
  // Main window loads index.html file
  mainWindow.loadFile("index.html");
  
  // To maximize the window
  mainWindow.maximize();
  mainWindow.show();
}
  
// Function to create child window of parent one
function createChildWindow() {
  childWindow = new BrowserWindow({
    width: 1000,
    height: 700,
    modal: true,
    show: false,
    parent: mainWindow, // Make sure to add parent window here
  
    // Make sure to add webPreferences with below configuration
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
  });
  
  // Child window loads settings.html file
  childWindow.loadFile("settings.html");
  
  childWindow.once("ready-to-show", () => {
    childWindow.show();
  });
}
  
ipcMain.on("openChildWindow", (event, arg) => {
  createChildWindow();
});
  
app.whenReady().then(() => {
  createWindow();
  
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});
  
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

 

  • Importar ipcMain desde el módulo de electrones
  • Agregue el método createChildWindow() como se indicó anteriormente, que básicamente incluye todos los ajustes y la configuración de la ventana secundaria (es decir, Ventana de configuración)
  • Si lo hace, childWindow.parent = mainWindow como se indicó anteriormente, hasta que se cierre la ventana secundaria, la ventana principal estará deshabilitada.
  • Si omite childWindow.parent , se abrirá una nueva ventana, pero no habrá ninguna conexión entre la ventana secundaria y la ventana principal.
  • Incluya ipcMain.on(‘openChildWindow’, (event, arg) => { createChildWindow(); } ); básicamente llame al método createChildWindow() mientras enviamos el evento » openChildWindow» al hacer clic en el botón a través de ipcRenderer.
  • Agregue la propiedad webPreferences con todos los valores clave como se mencionó anteriormente al objeto mainWindow , lo que nos permite usar el ipcRenderer remoto de Electron para trabajar con la ventana secundaria.

Agreguemos el siguiente script en index.html

Javascript

const ipc = window.require('electron').ipcRenderer;
  
// Function that will be called on click 
// event of "Go to settings window" button
function goToSettingsWindow(){
  
    // Make sure to do ipc.send('some String'), 
    // where 'some String' must be same with 
    // the first parameter of ipcMain.on() in app.js 
    ipc.send('openChildWindow');  
}

Aquí estamos usando ipcRenderer del módulo de electrones para enviar un evento ‘ openChildWindow ‘ e ipcMain (especificado en app.js ) está escuchando este evento y llama al método createChildWindow() .

Vamos a crear un archivo settings.html que se mostrará en la ventana secundaria al hacer clic en el botón (botón ‘ Ir a la ventana de configuración’ ) en la ventana principal.

settings.html

<!DOCTYPE html>
<html>
<head>
    <title>Settings</title>
</head>
<body>
    <div>
        <h1 style="color: green;">
          Hello : This is Settings window
        </h1>
        <button onclick="goToFirstWindow()">
          Go to Main Window
        </button>
    </div>
</body>
</html>

Salida: antes de agregar la funcionalidad » Ir a la ventana principal «, verifiquemos la salida de abrir la ventana de configuración

 

Agreguemos el siguiente script en settings.html para cerrar la ventana de configuración y volver a la ventana principal (si cierra la ventana haciendo clic en Cerrar ventana (el botón X en la esquina superior derecha), también es posible, pero a veces necesitamos realizar alguna otra acción antes de cerrar la ventana, como la actualización de la base de datos o la actualización de la configuración y para eso, debe cerrar la ventana al hacer clic en el botón)

Javascript

const remote = window.require("electron").remote;
  
function goToFirstWindow() {
  //code for some other action to be performed
  
  //Code to close the window after doing other actions
  remote.getCurrentWindow().close();
}

Aquí estamos accediendo al objeto remoto del módulo de electrones para obtener el objeto de ventana actual.

Salida: Revisemos nuestra aplicación final.

Publicación traducida automáticamente

Artículo escrito por samandal2021 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *