Práctica de eventos personalizados en Polymer

La semana pasada, explicamos qué son los eventos personalizados y el motivo de su importancia en el desarrollo Polymer y frontend en general. Sin embargo, nos quedó pendiente hacer una práctica que nos ayudara a entender mejor su funcionamiento y la burbuja de eventos implementada en los elementos del DOM, que es lo que haremos a continuación.

En este ejercicio, vamos a construir un par de componentes Polymer. En el primero tendremos un sencillo sistema que activaría y desactivaría una alarma. Ante ese cambio en el estado de la alarma se emitirán eventos personalizados para avisar a otros elementos de la aplicación. Tendremos un segundo componente donde usaremos el primero, detectando los eventos producidos y haciendo cosas en consecuencia.

Aunque el esquema de elementos de nuestra aplicación es muy sencillo, podemos ver en la siguiente imagen un diagrama que nos ayudará a entender mejor la presente práctica.

esquema-elementos

 

Como se puede ver, tenemos dos componentes en la aplicación. El padre usa al hijo. El hijo es el que emite eventos personalizados para avisar al padre sobre cosas que suceden con él.

Componente alarma-on-off

Comenzaremos viendo el componente hijo, alarma-on-off, que es el que emite los eventos personalizados. En ese componente veremos un sencillo icono, implementado con iron-icon. El icono inicialmente simboliza una alarma que está desactivada y se puede pulsar, produciendo que la alarma se active.

Para producir ese efecto de activar o desactivar tenemos definido un evento tap sobre el iron-icon. Cuando se produce el tap se ejecuta el manejador de eventos, que tenemos en el método cambiarAlarma().

<iron-icon on-tap="cambiarAlarma" icon="[[iconoAlarma]]"></iron-icon>

Además, el iron-icon tiene el valor del icono que se va a usar unido a una propiedad del componente, llamada iconoAlarma. Esa propiedad contendrá el valor del icono que se tiene que mostrar en cada momento, con la alarma encendida o apagada. Inicialmente, estará apagada.

properties: {
iconoAlarma: {
type: String,
value: 'alarm-off'
}
},

El método manejador de evento cambiarAlarma() es el que mantiene el núcleo de funcionalidad del componente. Se ocupa de dos cosas:

  • Cambiará el icono a mostrar en cada momento
  • Disparará los eventos personalizados, para avisar a sus antecesores
cambiarAlarma: function() {
if(this.iconoAlarma == 'alarm-off') {
this.iconoAlarma = 'alarm';
this.fire('alarma-encendida')
} else {
this.iconoAlarma = 'alarm-off';
this.fire('alarma-apagada')
}
}

El código completo de este componente alarma-on-off se puede ver a continuación.

<link rel="import" href="/blog../../bower_components/polymer/polymer.html">
<link rel="import" href="/blog../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/blog../../bower_components/iron-icons/iron-icons.html">
<dom-module id="alarma-on-off">
<template>
<style>
:host {
display: block;
}
</style>
<iron-icon on-tap="cambiarAlarma" icon="[[iconoAlarma]]"></iron-icon>
</template>
<script>
Polymer({
is: 'alarma-on-off',
properties: {
iconoAlarma: {
type: String,
value: 'alarm-off'
}
},
cambiarAlarma: function() {
if(this.iconoAlarma == 'alarm-off') {
this.iconoAlarma = 'alarm';
this.fire('alarma-encendida')
} else {
this.iconoAlarma = 'alarm-off';
this.fire('alarma-apagada')
}
}
});
</script>
</dom-module>

Componente eventos-custom-app

Para continuar, veamos el evento que usa a nuestro componente de la alarma. Este es un sencillo componente, que no hace nada en especial, salvo escuchar los eventos personalizados definidos por el componente de la alarma.

Los eventos personalizados se escuchan igual que cualquier otro evento nativo de Javascript o propio de Polymer.

<alarma-on-off
on-alarma-encendida="procesarActivacionAlarma"
on-alarma-apagada="procesarDesactivacionAlarma"
></alarma-on-off>

Como observarás, disponemos de dos manejadores de eventos que se ejecutarán cuando se produzcan los custom-events.

  • El método procesarActivacionAlarma() hará de manejador de eventos cuando se produzca el evento “alarma-encendida”
  • El método procesarDesactivacionAlarma() hará de manejador de eventos cuando se produzca el evento personalizado “alarma-apagada”

El código de esos métodos ya nos importa poco, lo interesante es que se ejecutarán en el momento oportuno. No obstante, los podemos ver detallados en el código del componente completo, que se puede ver a continuación.

<link rel="import" href="/blog../../bower_components/polymer/polymer.html">
<link rel="import" href="/blogalarma-on-off.html">
<dom-module id="eventos-custom-app">
<template>
<style>
:host {
display: block;
}
</style>
<alarma-on-off
on-alarma-encendida="procesarActivacionAlarma"
on-alarma-apagada="procesarDesactivacionAlarma"
></alarma-on-off>
</template>
<script>
Polymer({
is: 'eventos-custom-app',
properties: {
prop1: {
type: String,
value: 'eventos-custom-app',
},
},
procesarActivacionAlarma: function() {
console.log('hacer alguna cosa con la alarma activada');
},
procesarDesactivacionAlarma: function() {
console.log('hacer alguna cosa con la alarma desactivada');
},
});
</script>
</dom-module>

Hemos visto cómo trabajar con componentes en una jerarquía sencilla. Los eventos personalizados se emiten en los hijos de esa jerarquía y suben, mediante la burbuja de eventos implementada por el navegador en el DOM, hacia los padres o cualquier otro antecesor. Eso nos permite detectar eventos personalizados en cualquier elemento del DOM y no solo en los padres, lo que resulta muy útil en el desarrollo de aplicaciones donde las jerarquías resulten más complejas que en la  sencilla práctica de este artículo.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *