Gestión de eventos personalizados en Polymer


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Retomamos los artículos sobre Polymer, la librería para agilizar el desarrollo con Web Components, para explicar, desde un punto de vista teórico, qué son los  eventos personalizados y para qué podemos usarlos.  En general, estos eventos son una de las herramientas más habituales en los lenguajes modernos de programación, ya que son fundamentales en el trabajo con interfaces de usuario.

Básicamente, un evento es un suceso que ocurre y para el que podemos definir cualquier tipo de comportamiento por medio de una función manejadora de eventos. En palabras llanas, permiten ejecutar código cuando ocurren cosas y en Javascript, por ejemplo, existen multitud de eventos relacionados con las cosas que suceden en el navegador.

En el caso que nos ocupa vamos a abordar los eventos personalizados dentro de componentes, que es algo fundamental para poder realizar custom elements con Polymer capaces de relacionarse con el medio exterior.

Qué es un evento personalizado

Para explicar bien un evento personalizado, conviene observar primero eventos que ya conocemos, por ejemplo onclick. Este evento responde a los clics sobre los elementos de la página y nos permite asociar funciones que se ejecutan cuando se produce un clic en un botón, enlace, etc.

En el caso de los componentes de Polymer, podemos usar los mismos eventos que ya conocemos con Javascript, pero lo cierto es que los eventos de Javascript nativos no abarcan todas las cosas que pueden ocurrir en un custom element. Básicamente, los componentes de Polymer extienden las funcionalidades que el navegador ya ofrece mediante HTML, por lo cual también se encontrarán en la necesidad de extender los eventos que el navegador emite originalmente.

Por ejemplo, imagina un mapa de Google que tiene marcas situadas en un mapa. Podría crearse un evento que se dispare cuando esa marca se arrastra a otra posición en el mapa. Ese evento no existe en Javascript, pero nosotros podríamos usarlo para implementar comportamientos sobre mapas y nos vendría muy bien para ciertas cosas. Pues bien, ese evento existe en realidad, es un evento personalizado que emite el componente <google-map-marker>, como se puede ver en la documentación: https://elements.polymer-project.org/elements/google-map?active=google-map-marker

Cómo crear un evento personalizado

En Polymer podemos crear todo tipo de eventos personalizados, los que necesitemos para avisar al exterior de las cosas que pasen en nuestro componente. Crear un evento personalizado es tan sencillo como dispararlo, para lo que existe el método fire(), que es uno de los denominados métodos de instancia, por lo que se invoca a partir de la palabra this. A fire() le indicamos el nombre del evento personalizado que queremos disparar.

this.fire('mi-evento-personalizado')

Adicionalmente, el método fire() se le puede enviar un dato asociado, que viajará junto con el evento y el componente que lo reciba será capaz de usarlo para lo que necesitase. Eso lo veremos más adelante.

Recibir un evento personalizado

La recepción del evento personalizado se realiza del mismo modo que se reciben los eventos que el propio Javascript emite, o incluso el propio Polymer. La primera opción sería declarar el manejador de evento en el HTML del componente que lo emite, o cualquiera que lo reciba por medio de la burbuja de eventos.

<mi-custom-element on-mi-evento-personalizado="miManejador">

Como se debe de saber, también se puede definir el manejador por medio del objeto listener.

listeners: {
  'mi-evento-personalizado': 'miManejador'
}

En un próximo artículo veremos un ejemplo completo de componente que emite eventos personalizados y explicaremos cómo pueden escalarse estos eventos, mediante la burbuja de eventos, para recibirlos en otros puntos de la aplicación, junto con los datos asociados.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
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 *