Selecciona imágenes

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

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.

Comentarios

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 , snippets con este:

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])})

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

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

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)
    })
  }
}

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
}

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