Eventos en Polymer

Un evento nos permite ejecutar código cuando sucede algo, y Javascript tiene múltiples eventos para controlar ese ‘algo’, como son click, mousemove, keypress, keydown, etc.. y que seguramente has usado mas de una vez.

En todos los ejemplos que estamos desarrollando hasta ahora, la forma de crear los evento era de forma declarativa añadiendo el evento sobre el propio html.

Ahora vamos a crear eventos de forma imperativa, que básicamente es programar el evento usando Javascript.

Al definir los eventos de forma imperativa, podemos asignar cualquier tipo de evento no solo dentro del propio componente sino también al padre, que sería el propio componente.

Para hacer esa tarea vamos a definir los eventos usando Javascript nativo:

index.html

comp-evento1.html

Como indicaba anteriormente, el hecho de poder crear eventos usando Javascript nos permite poder crear también eventos fuera del propio componente.

Siempre que desarrollemos un componente y este use eventos fuera del componente deberemos eliminar ese evento cuando se elimine o desaparezca el componente que añadía ese evento.

De esta forma podríamos crear por ejemplo, un componente que capture las teclas pulsadas fuera de ese componente.

Para entender todo esto vamos a crear un vídeo con el comportamiento y el código fuente:

index.html

key-logger.html

Eventos personalizados

Para entender correctamente que son los eventos personalizados, deberíamos observar los eventos de javascript que ya conocemos, como mousemove, keypress, keydown, etc… 

En cualquiera de ellos cuando se lanza el evento se ejecuta una función asociada y ejecuta su código.

En polymer podemos usar todos los eventos de javascript nativo, pero puede ser que necesitemos algún evento que no este definido en javascript.

Por ejemplo, imaginemos una caja de texto, y la vamos a usar para realizar una llamada a un API REST, pero necesitamos que esa llamada solo se realice cuando pulsemos dos veces la tecla enter.

Como es de suponer en javascript no existe un evento ‘cuando pulses una tecla dos veces y que ademas se la tecla enter ejecuta este código‘. 

En el ejemplo anterior hemos creado un evento personalizado que se llama tecla, y que su función es capturar la tecla pulsada.

Cuando se ejecutan los eventos en javaScript, estas llamadas se hacen en forma de burbuja desde el elemento más interno hasta el más externo.

A este comportamiento se le denomina bubbling y es un comportamiento nativo de javascript, que solo se comporta así en los elementos que no tienen shadowDOM.

Cuando los componentes tienen shadowDOM los eventos suben de manera predeterminada y se quedan en el padre, no continúan propagándose.

Si queremos que los eventos de los componentes que tienen shadowDOM se comporten igual que en javascript nativo, deberemos añadir dos parámetros dentro del dispatchEvent. Los parámetros son bubbles y composed y debemos cambiar su valor a true.

En el siguiente vídeo se puede ver el comportamiento del bubbling sin los parámetros y con los parámetros:

index.html

comp-abuelo.html

comp-padre.html

comp-nieto.html

Con el ejemplo anterior hemos podido comprobar como funciona la propagación de un evento en polymer.

El patrón mediador

¿Que es el patrón mediador?. Es un patrón de diseño que nos permite una gestión más ágil dentro de una arquitectura de componentes.

¿Y como funciona?. La idea principal es tener un componente que centralice las comunicaciones del resto de los componentes, dejando todo el control sobre el componente mediador.

El patrón mediador nos indica una serie de pautas a seguir en el momento realizar la comunicación entre componentes:

• Cuando nos comunicamos de los padres a los hijos, lo hacemos siempre por binding a las propiedades.
• Cuando nos comunicamos de los hijos a los padres, los hacemos con un evento personalizado.

En el ejemplo anterior podemos comprobar como aplicamos este patrón, al realizar la llamada desde el hijo al padre usando un evento personalizado llamado mensaje, y para comunicarnos del padre al hijo lo hacemos bindeando la propiedad llamada who.

Eventos táctiles

Para finalizar el tema de eventos voy a explicar con algún ejemplo los eventos táctiles disponibles en polymer, ya que según las estadísticas desde 2017 la navegación móvil ha superado a la navegación de escritorio.

Estos son los siguientes evento:

• down: Cuando se presiona.
• up: Cuando se levanta.
• tap: Cuando presionamos y levantamos.
• track: Cuando arrastramos o movemos el ratón.

Para poder usar estos eventos necesitamos importar un fichero, ya que no esta incluido en el core de polymer.

A continuación un pequeño ejemplo:

index.html

comp-gestos.html