Creando assets para una nueva ventana

Clase 29 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

Comentarios

Raphael Hinostroza

student•

Para los que son Windows, no se olviden de activar la integración de Node con la nueva interfaz que estamos creando en el Render.

David Daza

student•

Un momento, frontend.js está al mismo nivel de ipcRendererEvent.js y de images-ui.js, ¿por qué no se pueden importar los módulos entonces desde la carpeta actual?

Me refiero a que en la clase se importan así:

import { setIpc, openDirectory, saveFile, openPreferences } from './main-window/ipcRendererEvents'
import { addImagesEvent, searchImagesEvent, selectEvent } from './main-window/images-ui'

Pero podría importarse así:

import { setIpc, openDirectory, saveFile, openPreferences } from './ipcRendererEvents'
import { addImagesEvent, searchImagesEvent, selectEvent } from './images-ui'

De hecho, VS Code y el addon npm intellisense me sugiere importar los módulos como muestro en el segundo bloque de código. Sin embargo al hacerlo así no funciona…

Diego Forero

Team Platzi•

Creo que todo es porque el index.html que es donde se importa el archivo esta al mismo nivel de main-window lo que hace que la ruta de trabajo para todos los archivos sea ese folder y no dentro de main-window.

Leandro Román Londoño

student•

Intente muchas cosas para obtener la ventana actual con remote, pero no fue posible pero hay una forma mucho mas sencilla preferences-frontend.js

window.addEventListener('load', () => {
    cancelButton()
})

function cancelButton() {
    const cancelButton = document.getElementById('cancel-button')
    
    cancelButton.addEventListener('click', () => {
        window.close()
    })
}

Octavio Villavicencio Cruz

student•

carnal cala usando esto como aconsejaste en el modulo anterior

const {BrowserWindow, getGlobal, require} = window.require("@electron/remote");
  const remoteMain = require("@electron/remote/main");
  remoteMain.enable(preferencesWindow.webContents);

Pablo Andrés Prado Diaz

student•

En versiones superioeres a la 12 no se recomienda usar los objetos globales. Puedes dejar la ventana win de index.js sin modificar.

En ipcRenderEvent.js tu código será el siguiente:

// Ventana de configuraciones
function openPreferences() {
    console.log("openPreferences");
    const {BrowserWindow, getGlobal, require} = window.require("@electron/remote");
    //const remoteMain = require("@electron/remote/main");
    const preferencesWindow = new BrowserWindow({
      width: 400,
      height: 300,
      title: "Preferencias",
      center: true,
      modal: true,
      frame: false,
      show: false,
      webPreferences: {
        devTools: true
    }
    });
    // Abrir DevTools automáticamente
    preferencesWindow.webContents.openDevTools({ mode: 'detach' })

    // Hacemos que sea una ventana hija de la ventana principal
    // Ya no es necesario hacerlo
    //remoteMain.enable(preferencesWindow.webContents);

    preferencesWindow.once('ready-to-show', () => {
      preferencesWindow.show();
      preferencesWindow.focus();
    })

    preferencesWindow.loadURL(`file://${path.join(__dirname, '../prefs-window/preferences.html')}`);
}
```Y la función ligada a cerrar sera la siquiente:

Preference-frontend.js

```js
window.addEventListener('load', () => {
    console.log("Ventana preference")
    cancelButton()
})

function cancelButton() {
    const cancelButton = document.getElementById('cancel-button')
    
    cancelButton.addEventListener('click', () => {
        console.log("CANCELAR")
        window.close()
    })
}
```No requieres más configuraciones que sean necesarias. Si necesitas usar esta linea ya esta activa para windows y linux

```js
remoteMain.enable(preferencesWindow.webContents);

Eban Sayago Melián

student•

Por si trabajaron con React, como es mi caso, pueden ahorrarse todo este proceso usando rutas (y el react-router-dom de toda la vida). Simplemente creen la ventana de la siguiente forma (a tener en cuenta: Electron v22.0.0):

const settings = new BrowserWindow({
    width: 900,
    height: 670,
    show: false,
    autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
        preload: join(__dirname, '../preload/index.js'),
        sandbox: false,
        nodeIntegration: true,
    },
    title: 'Plato - Settings',
})

// La ruta que se va a cargar en la ventana, en este caso
// "/settings"
settings.loadURL(`file://${__dirname}/index.html#/settings`)

settings.on('ready-to-show', () => {
    // En caso de que prefieran la ventana maximizada
    // settings.maximize()
    settings.show()
})

Marco Elizalde

student•

Obetener win Global

Francisco Javier Rodriguez Gomez

student•

Respecto a la duda de @ddazal.

Como frontend.js esta referenciado directamente desde index.html, hay que arreglar las referencias hacia los otros .js como si él mismo estuviera en la misma ruta que index.html.

Francisco Javier Rodriguez Gomez

student•

Me surge la duda es como cuadrar las referencias a otros .js, si se enlaza el mismo .js de una carpeta helpers/ o tools/ por ejemplo, a distintos .html en distintas carpetas
¿Como solucionarlo?

Marco Elizalde

student•

Utilización de win como objeto global

window.addEventListener('load', () => {
    cancelButton()
})

function cancelButton() {
    const cancelButton = document.getElementById('cancel-button')
    
    cancelButton.addEventListener('click', () => {
        window.close()
    })
}

// Ventana de configuraciones
function openPreferences() {
    console.log("openPreferences");
    const {BrowserWindow, getGlobal, require} = window.require("@electron/remote");
    //const remoteMain = require("@electron/remote/main");
    const preferencesWindow = new BrowserWindow({
      width: 400,
      height: 300,
      title: "Preferencias",
      center: true,
      modal: true,
      frame: false,
      show: false,
      webPreferences: {
        devTools: true
    }
    });
    // Abrir DevTools automáticamente
    preferencesWindow.webContents.openDevTools({ mode: 'detach' })

    // Hacemos que sea una ventana hija de la ventana principal
    // Ya no es necesario hacerlo
    //remoteMain.enable(preferencesWindow.webContents);

    preferencesWindow.once('ready-to-show', () => {
      preferencesWindow.show();
      preferencesWindow.focus();
    })

    preferencesWindow.loadURL(`file://${path.join(__dirname, '../prefs-window/preferences.html')}`);
}
```Y la función ligada a cerrar sera la siquiente:

Preference-frontend.js

```js
window.addEventListener('load', () => {
    console.log("Ventana preference")
    cancelButton()
})

function cancelButton() {
    const cancelButton = document.getElementById('cancel-button')
    
    cancelButton.addEventListener('click', () => {
        console.log("CANCELAR")
        window.close()
    })
}
```No requieres más configuraciones que sean necesarias. Si necesitas usar esta linea ya esta activa para windows y linux

```js
remoteMain.enable(preferencesWindow.webContents);

const settings = new BrowserWindow({
    width: 900,
    height: 670,
    show: false,
    autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
        preload: join(__dirname, '../preload/index.js'),
        sandbox: false,
        nodeIntegration: true,
    },
    title: 'Plato - Settings',
})

// La ruta que se va a cargar en la ventana, en este caso
// "/settings"
settings.loadURL(`file://${__dirname}/index.html#/settings`)

settings.on('ready-to-show', () => {
    // En caso de que prefieran la ventana maximizada
    // settings.maximize()
    settings.show()
})

Creando assets para una nueva ventana

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

Múltiples ventanas y comunicación entre ellas