polymer: 3. registro ++

Más cosas que se pueden hacer durante el registro de un componente

Vincent Van Gogh

archivado en: JavaScript / 8 Enero, 2016 / taller:

En la entrada anterior de esta serie dedicada a polymer vimos los métodos callback que podemos utilizar cuando registramos un custom element, los cuales se derivan de su ciclo de vida (lifecycle), y las tres maneras principales de insertarlo en el dom: con un tag, con createElement y con una instancia a partir de una función constructora.

En esta seguiremos viendo cosas relacionadas con el registro de un componente: cómo se extiende un tag nativo de html, cómo definir atributos de partida y una introducción a los behaviors.

Extender tags

Al igual que sucede con los web components nativos, en Polymer podemos crear uno a partir de otro que existe de forma natural en HTML. Este tipo de custom elements se denominan «type extension custom elements» y son más fáciles de hacer que un botijo:

  1. En el momento de registrar el custom element definimos su prototipo en la propiedad extends
  2. Y luego ya se puede usar en el tag natural de ese elemento indicando en el atributo is de qué tipo es.

Por ejemplo, así podríamos extender los <button> para que fueran verdes:

index.html

<button is="boton-verde">Botonako</button>

boton-verde.html

<dom-module id="boton-verde">

<script>

Polymer({

is: "boton-verde",

extends: 'button',

created: function() {

this.style.background = "#090";

this.style.color = "#fff";

this.style.fontWeight = "bold";

}

});

</script>

</dom-module>

De momento, con polymer solo podemos extender elementos nativos de html, como un <select> o un <input>. Es decir, no se pueden derivar de un custom elements.

hostAttributes

Otra cosa chula que podemos hacer cuando registramos un componente es definir sus atributos por defecto, que en polymeresco se denominan hostAttributes. Por ejemplo, así le podríamos añadir un id al botón anterior:

...

hostAttributes: {

"id": "boton-formidable"

},

...

Los atributos siempre se serializan, se convierten, en cadenas (strings) cuando el componente es insertado en el dom, pero con matices según el tipo de dato de partida. A saber:

  • Los strings son strings sin más.
  • Los number se convierten en strings.
  • Los booleans determinarán que el atributo aparezca (true) o no (false) en el componente final.
  • Los jasonakos y los arrays se estringfican con un JSON.stringify interno.

Así, por ejemplo, si definiéramos estos atributos en nuestro botón:

hostAttributes: {

"id": "boton-formidable",

"tabIndex": 2,

"disabled": true,

"noAparece": false,

"stringficado": {

"foo": "bar"

}

}

El resultado final, el código que se inserta en el dom, sería este:

<button is="boton-verde" id="boton-formidable" tabindex="2" disabled stringficado="{&quot;foo&quot;:&quot;bar&quot;}">Botonako</button>

Ojo: Las clases no se pueden definir entre los hostAttributes.

Behaviors

Como decía antes, con extends solo podemos extender los elementos nativos de HTML, pero polymer también permite extender los componentes mediante una cosa que llaman «behaviors», comportamientos. En esencia, un behavior es una especie de prototipo del que derivar componentes, en el cual podemos definir los eventos del lifecycle, los atributos por defecto y otras cosas que veremos más adelante (properties, observers y listeners).

Para que se entienda pondré un ejemplo muy sencillo con una célebre locución latina que traducida vendría a decir algo así como «errar es de humanos, pero perseverar en el error es diabólico».

El componente podría ser parecido a este:

<dom-module id="componente-a">

<template>

<style>

:host {

color: #900

}

</style>

</template>

<script>

Polymer({

is: "componente-a",

ready: function() {

this.innerHTML = "<p>errare humanum est, sed perseverare diabolicum</p>";

}

})

</script>

</dom-module>

Ahora imaginemos que tenemos que hacer otro componente exactamente igual salvo que el texto es de color verde en lugar de rojo.

<dom-module id="componente-b">

<template>

<style>

:host {

color: #900

}

</style>

</template>

<script>

Polymer({

is: "componente-b",

ready: function() {

this.innerHTML = "<p>errare humanum est, sed perseverare diabolicum</p>";

}

})

</script>

</dom-module>

No hace falta ser un experto en polymer para darse cuenta de que algo así sería bastante absurdo, un derroche de código que además luego hay que mantener en dos sitios distintos y demás males que se derivan de no seguir una de las máximas más sabias de la programación: don't repeat yourself (dry).

Pero por suerte contamos con los behaviors. La jugada es esta:

1. En un archivo que podemos llamar demo-behavior.html sacamos el código común, que en este ejemplo tan sencillo se reduce al método create.

demo-behavior.html

<script>

DemoBehavior = {

ready: function() {

this.innerHTML = "<p>errare humanum est, sed perseverare diabolicum</p>";

}

}

</script>

2. Y luego en los componentes importamos el behavior y lo incluimos cuando los registramos.

<link rel="import" href="demo-behavior.html">

<dom-module id="componente-a">

<template>

<style>

:host {

color: #900

}

</style>

</template>

<script>

Polymer({

is: "componente-a",

behaviors:[DemoBehavior]

})

</script>

</dom-module>

Bueno, este ejemplo es tan sencillo que podría hacernos pensar que los behaviors son irrelevantes, pero como veremos con componentes más complejos, son tremendos.

|| Tags: ,

valoración de los lectores sobre polymer: 3. registro ++

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*