Creando assets para una nueva ventana

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

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

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

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros