Selecciona imágenes

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

Resumen

Vamos a aprender como construir y manejar eventos en Electron. En Platzipics aprenderemos a dar clic sobre una imagen de la lista para verla en la pantalla
de edición.

Hebert lughi villafuerte ccacala

student•

like si estas haciendo todo esto con el bloc de notas … u.u

JTorres

student•

Loco ! que te vas a hacer daño XD

Alejandro Velásquez Molina

student•

este sujeto está loco :v

Luis Gutiérrez

student•

Una manera diferente de agregar el evento click

function addImagesEvents () {
  let thumbs = document.querySelectorAll('li.list-group-item')

  thumbs.forEach(function(element){
    element.addEventListener('click', () => {
      changeImage(element)
    })
  })
}```

Karl Heitmann

student•

¿Por qué no puedo usar una arrow function como segundo argumento del método .addEventListener ?

Juan Castro

teacher•

¡Hola!

El gran JJ te lo explica muy sencillito en este Twitter-artículo: https://twitter.com/jjyepez/status/1191150286091497473. :wink:

Camilo Alexander Velandia Velandia

student•

tal vez sea por que el this cambia

Damian Spizzirri

student•

A mi me daba error esta linea:

  document.querySelector('li.selected').classList.remove('selected')

Entonces modifique la funcion addImagesEvents de esta manera

function addImagesEvents(){
  const thumbs = document.querySelectorAll('li.list-group-item')

  for(let i=0, length1 = thumbs.length; i<length1; i++){
**      if(i === 0) {
        thumbs[i].classList.add('selected')
      }**
      thumbs[i].addEventListener('click', function () {
      changeImage(this)
    })
  }
}

Alejandro Robleto

student•

pues dire que funciona genial honestamente mi codigo se pego y no o hice funcionar pero copie tu forma y le di algunos toque propios pero al inico funciono genial, te felicito eres muy inteligente gracias por tu aporte ayuda a muchos como yo que estamos empezando.

Aaron Felipe Isaacs

student•

Lo realicé de esta manera

window.addEventListener('load', () => addImagesEvents())

const addImagesEvents = () => {
  const thumbs = document.querySelectorAll('li.list-group-item')
  thumbs.forEach(thumb => thumb.addEventListener('click', ({ currentTarget }) => changeImage(currentTarget)))
}

const changeImage = currentTarget => {
  document.querySelector('li.selected').classList.remove('selected')
  currentTarget.classList.add('selected')
  document.getElementById('image-displayed').src = currentTarget.querySelector('img').src
}

Luis Manuel Navarro Rangel

student•

Yo utilizo Atom, igual es bastante bueno como Sublime, es cuestion de gustos 😛

Alejandro Robleto

student•

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

function addImagesEvents (){ const thumbs = document.querySelectorAll('li.list-group-item')

for (let i = 0, length1 = thumbs.length; i < length1; i++) { thumbs[i].addEventListener('click', function (){ changeImage(this) }) } } function changeImage (node) { document.querySelector('li.selected').classList.remove('selected') node.classList.add('selected') document.getElementById('image-displayed').src = node.querySelector('img').src

}

me siento contento que al llegar hasta aqui todo me funcione

Roger Davila

student•

Que plug in utilizas en sublime para que autocomplete y reconozca la sintáxis??

platzerito18092018 platzerito18092018

teacher•

uso este https://packagecontrol.io/packages/SublimeCodeIntel , snippets con este: https://packagecontrol.io/packages/JavaScript Snippets

Gonzalo Benavente

student•

me da un error en el ‘’

thumbs[i].addEventListener(....)```
''
alguien sabe porque?

Diego Forero

Team Platzi•

Puedes compartir el error que te da para poder ayudarte, así es imposible hacerlo.

Efraín Girón Romero

student•

Puede ser por el dice, por alguna razón a mi me sale que this no esta definido, funciona cambiándolo por thumbs[i].

De esta manera:

thumbs[i].addEventListener('click', () => { changeImage(thumbs[i])})

Selecciona imágenes

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