> Manuales > Manual de Polymer

Descripción y ejemplo práctico sobre los eventos de gestos, o gesture events, en componentes de Polymer. Tap, down, up, track.

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".

Nota: como debes saber, porque ha sido nombrado en anteriores artículos, el objeto evento lo recibes como parámetro en cualquier función declarada como manejadora de eventos. Enseguida pondremos un ejemplo.

Evento down:

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

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:

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.

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.

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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual