Los eventos de gestos, conocidos generalmente con su término en inglés "gesture events" son un medio normalizado de capturar tanto los eventos de ratón como los eventos de dispositivos táctiles. En Polymer existen 4 tipos de eventos de gestos: tap, down, up y track.

Estos eventos se usan igual que cualquiera de los otros que existen en Polymer que analizamos en el artículo de introducción a los eventos. El detalle más importante es su recomendación de uso frente a eventos específicos para touch o mouse events, en el caso que hayan eventos de gestos que pueden equivaler a eventos de ratón.

Por ejemplo, podrías usar "click" como evento para reconocer un clic sobre un elemento de la página, pero en su lugar se recomienda usar "tap", ya que es un tipo de evento normalizado. Eso quiere decir que se dispara tanto cuando se pulsa el botón del ratón como cuando se toca en la pantalla de un dispositivo táctil y nosotros recibimos ambos por mediante el mismo tipo de evento. Esta recomendación nos ahorrará posibles problemas cuando ejecutas la aplicación en distintas plataformas.

Tipos de eventos de gestos

En el siguiente listado encontrarás los gesture events disponibles en Polymer. En ella te indicamos los tipos de eventos y los datos adicionales que te proporcionan, como la posición donde se hizo tap, etc. Todos esos datos adicionales los accedes mediante el objeto evento y su propiedad "detail".

Evento down:

Se activa cuando se pone el dedo sobre la pantalla o cuando se pulsa el botón. Obtenemos los siguientes datos adicionales:

• event.detail.x: coordenada X donde se pulsó.
• event.detail.y: coordenada Y donde se pulsó
• event.detail.sourceEvent: el evento original que causó este evento normalizado

Evento up:

Se activa cuando se levanta el dedo sobre la pantalla o cuando se suelta el botón del ratón. Obtenemos los siguientes datos adicionales:

• event.detail.x: coordenada X donde se levantó.
• event.detail.y: coordenada Y donde se levantó
• event.detail.sourceEvent: El evento original que causó este evento normalizado

Evento Tap:

Se activa cuando produce un evento down y luego un up. Es equivalente a un clic o un toque con el dedo sobre la pantallas táctiles.

• event.detail.x: coordenada X donde se levantó.
• event.detail.y: coordenada Y donde se levantó
• event.detail.sourceEvent: El evento original que causó este evento normalizado

Evento track:

Se activa cuando mueves el ratón o el dedo por la pantalla cuando el botón está pulsado, o bien tengas el dedo en la pantalla. Lo que se sería una operación de arrastrar. Es decir, al producirse el evento down y antes de hacer up, si se mueve el dedo o el ratón, se van lanzando eventos track.

• event.detail.state: una cadena que indica el estado del evento, puede ser "start", "track" y "end".
• event.detail.x: La posición del ratón, o dedo, coordenada X
• event.detail.y: La posición del ratón, o dedo, coordenada Y
• event.detail.dx: Diferencia de píxeles en la horizontal desde el primer evento track que se detectó
• event.detail.dy: Diferencia de píxeles en la vertical desde el primer evento track que se detectó
• event.detail.ddx: Es la diferencia de píxeles desde el último evento track que se había detectado en la secuencia de eventos track, en la horizontal
• event.detail.ddy: : Es la diferencia de píxeles desde el último evento track que se había detectado en la secuencia de eventos track, en la vertical
• event.detail.hover(): este método te devuelve el elemento del DOM sobre el que se está trackeando el arrastre.

Ejemplo de eventos gesture

En esta ocasión tenemos un ejemplo que no sirve para nada en concreto, pero que nos permite experimentar con los distintos eventos de gestos. Simplemente encontrarás una división en la que vamos a asociar los cuatro manejadores posibles: up, down, tap y track. Los manejadores lanzarán mensaje a la consola informando de la propiedad event.detail, en la que podremos observar aquellas informaciones extra que nos devuelven estos tipos de eventos de gestos.

Vemos el código de nuestro componente a continuación.

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

<dom-module id="up-down">
  <template>
    <style>
      div {
        font-family: sans-serif;
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: orange;
        color: #fff;
      }
    </style>
    <div id="updown">Click para eventos "gesture"</div>
  </template>
  <script>
  Polymer({
    is: 'up-down',
    listeners: {
      'updown.up': 'arriba',
      'updown.down': 'abajo',
      'updown.tap': 'toque',
      'updown.track': 'arrastra',
    },
    arriba: function(evento){
      console.log('Up:', evento.detail);
    },
    abajo: function(evento){
      console.log('Down:', evento.detail);
    },
    toque: function(evento){
      console.log('Tap:', evento.detail);
    },
    arrastra: function(evento){
      console.log('Track:', evento.detail);
      //console.log(evento.detail.hover()); devolvería el DIV de los eventos
    }
  });
  </script>
</dom-module>

Puedes apreciar que hemos colocado las declaraciones de todos los eventos en la propiedad "listeners". Luego encuentras los distintos métodos asociados como manejadores.

A estas alturas debe resultarte suficientemente sencillo como para necesitar más explicaciones. Recuerda consultar el Manual de Polymer para resolver dudas puntuales, ya que en el pasado hemos tratado todos los conocimientos necesarios para poder enteder este ejemplo perfectamente. Con esto terminamos la sección dedicada a los eventos, aunque lógicamente los usaremos constantemente en todos los ejemplos del manual.