Múltiples ventanas y comunicación entre ellas

Clase 28 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Contenido del curso

Introducción a Electron

Comenzando con Electron

Comenzando con nuestro aplicativo

Agregando interacción a nuestra aplicación

Interactuando con el sistema operativo

Generando un ejecutable para nuestra aplicación

Creando paquetes para distribuir nuestro aplicativo

Bonus

Desafios

Tomar examen

Resumen

En el vídeo anterior hicimos un refactor del código con el fin de tener mas organizado el proyecto, el código esté mejor separado y no tengamos archivos tan grandes. En éste vídeo vamos a aprender a comunicar múltiples ventanas. en nuestra aplicación, vamos a utilizar una nueva función para crear una nueva ventana de preferencias, y vamos a aprender a usar remote que es un modulo de Electron que nos permite desde el proceso de renderizado llamar partes del API del proceso principal.

Comentarios

Byron Mesias Cueva Cabrera

student•

En la versión 10 de electron para utilizar el módulo remote, requiere que se habilite una configuración en la window principal:

mainWindow = new BrowserWindow({
    webPreferences: {
      // Habilitando remote module
      enableRemoteModule: true,
    },
  });

Leandro Román Londoño

student•

Version 20.0.2 de electron

npm i @electron/remote

proceso principal

require('@electron/remote/main').initialize()
require("@electron/remote/main").enable(win.webContents)

proceso de renderizado

const { BrowserWindow } = require('@electron/remote')

Octavio Villavicencio Cruz

student•

function openPreferences() {
  console.log("openPreferences");
  const {BrowserWindow} = window.require("@electron/remote");
  const preferencesWindow = new BrowserWindow({
    width: 400,
    height: 300,
    title: "Preferencias",
    center: true,
    modal: true,
    frame: false,
    show: false,
  });
  preferencesWindow.show();
  
}

Múltiples ventanas y comunicación entre ellas

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal