El mundo de los eventos en Polymer es bastante rico y además ha cambiado en algunas cosas en lo que respecta a su versión predecesora, por lo que tendremos que prestar bastante atención incluso si venimos de Polymer 1.x. La novedad principal es que en Polymer 2 se usa más el propio Javascript nativo para cosas en las que antes existían mecanismos proveídos por la propia librería (Recuerda: "UseThePlatform").

Sin embargo, en este artículo vamos a observar algunas cosas sencillas sobre eventos, que nos permitan tener las bases para ir realizando ejemplos, en lo sucesivo del Manual de Polymer 2, en los que podamos usar distintos tipos de eventos y asociar manejadores. En resumen, nos centraremos por ahora en la declaración de los eventos dentro del propio template y usaremos eventos básicos, puesto que los eventos de gestos requieren cargar mixins, de los que todavía no hemos hablado.

Además, para los que vienen de Polymer 1.x ofreceremos algunas de las claves principales que deben conocer para saber qué diferencias encontrarán en el tratamiento de eventos en la versión 2 de la librería.

Asociar un evento a un elemento en línea

A la hora de escribir un template podemos asociar una función manejadora de evento en cualquier elemento del shadow dom del componente. Para ello simplemente usaremos un atributo "on-", seguido del nombre del evento que queramos definir su manejador. Ese atributo tendrá como valor el nombre del método manejador del evento que se desea asociar.

Por ejemplo, encontraremos un código como este para definir un manejador de evento frente a un clic sobre un botón.

<button on-click="incrementaClic">Clic para contar</button>

Declaración de un manejador de evento

El manejador del evento en un componente de Polymer corresponde con un método de la propia clase del componente. El método lo podemos definir como cualquier otro método dentro de la clase ES6.

incrementaClic() {
  // código a ejecutar como manejador del evento
}

El manejador recibe el objeto evento, del que podemos obtener información diversa sobre el tipo de evento que se acaba de producir. Ese objeto evento será siempre el primer parámetro del manejador.

incrementaClic(e) {
  console.log('Objeto evento', e)
}

Ejemplo de tratamiento de eventos sencillos en un componente

Ahora vamos a ver el código de un componente sencillo para aprender a trabajar con lo básico de eventos. Este componente me informa de las veces que he hecho clic en un botón, por medio de un contador que se incrementa con cada clic. Además encontraremos otro botón que permite resetear el contador, volviendo su valor a cero.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="cuenta-clics">
  <template>
    <style>
      :host {
        display: block;
        padding: 5px;
        border: 1px solid orange;
        margin-bottom: 5px;
      }
      p {
        margin-top: 0;
        padding: 5px;
        background-color: darkorange;
        color: white;
      }
    </style>

    <p>
      Llevas [[contador]] clics
    </p>
    <button on-click="incrementaClic">Clic para contar</button>
    <button on-click="resetear">Resetear la cuenta</button>
  </template>

  <script>
    class CuentaClics extends Polymer.Element {
      static get is() {
        return 'cuenta-clics';
      }

      static get properties() {
        return {
          contador: {
            type: Number,
            value: 0
          }
        }
      }

      constructor() {
        super();
      }

      incrementaClic(e) {
        this.contador++;
        console.log('Objeto evento', e)
      }

      resetear() {
        this.contador = 0;
      }

    }

    window.customElements.define(CuentaClics.is, CuentaClics);
  </script>
</dom-module>

Notas adicionales sobre eventos

De momento vamos a quedarnos con lo aprendido hasta este momento, pero para que no te sientas perdido si vienes de Polymer 1.x quiero ofrecer algunas otras claves:

Usar addEventListener de Javascript

En Polymer se recomienda usar el propio Javascript para crear tus eventos. Por ejemplo, si quieres crear un evento que afecte a todo el host (el componente completo, la etiqueta que engloba todo el Shadow DOM que podamos tener dentro del elemento personalizado) podrías crearlo directamente con this.addEventListener().

En este código vemos cómo definir el evento sobre el host, asociando el manejador en el método callback ready.

ready() {
  super.ready();
  this.addEventListener('click', () => {
    console.log('yeahhh este evento se asocia al componente completo');
  })
}

Eventos de gestos

Los eventos de gestos ahora no están incluidos "de casa", por eso no te funcionará el evento on-tap en un componente básico. Hay un mixin llamado Polymer.GestureEventListeners que da soporte a los eventos de gestos y que tendremos que heredar en el componente donde los queramos usar.

Como decía, no me quiero meter todavía en este tema, pero es bueno que se sepa ya. Encuentras más información de momento en la documentación.

Eliminado this.fire()

Otra cosa que echarás en falta si vienes de Polymer 1 es que se ha eliminado el método fire que existía en todos los elementos de Polymer, útil para lanzar eventos personalizados. Ahora usas el método nativo de Javascript dispatchEvent. Más adelante pondremos ejemplos.

Conclusión

Como ves, lo básico de eventos es muy sencillo, ya que podemos definir los eventos de manera declarativa y los métodos manejadores son también muy rápidos de implementar. En ellos tenemos acceso a todas las propiedades y recursos del componente para poder reaccionar de la manera que haga falta.

Sin embargo, nos hemos quedado solamente en lo fundamental y además hay diferentes usos necesarios de aprender en Polymer 2, sobre los que tendremos que volver en el futuro en varios artículos y ejemplos. Nuestro objetivo ahora era simplemente dar unos conocimientos fundamentales para poder apoyarnos en ellos en futuros ejercicios y artículos. Os pedimos un poco de paciencia porque todo se verá a su debido tiempo.