Un ejemplo de creación de componentes Polymer

Una de las opciones más interesantes de Polymer es extender el HTML con nuevos componentes que podremos usar en nuestros proyectos para solucionar las necesidades básicas que se nos planteen. Lógicamente, más allá de usar los elementos ya creados por terceros, como ya vimos en el artículo Usar los elementos de Polymer.

Estos componentes son muy sencillos de realizar y gracias a Polymer existen muchas facilidades adicionales que nos permitirán desarrollarlos más rápido. Al final, lo que tendremos es una nueva etiqueta HTML que podremos usar para realizar diferentes acciones en la web, desde las más elementales hasta las más complejas.

Partes de un componente

Un componente Polymer tiene dos partes fundamentales que tenemos que definir durante su creación:

  • Template. Es el HTML o DOM local que tendrá un componente. Contendrá todos los elementos que se verán en la página cuando usemos ese componente. Puede ser una sola etiqueta o un conjunto de ellas y habitualmente también contendrá un CSS para personalizar su aspecto. Esta parte es opcional, puesto que podría haber componentes que no tienen representación alguna dentro de la página.
  • Script. Es el script Javascript necesario para darle funcionalidad. Como mínimo en la parte del script tendremos lo que se llama el registro del componente.

Profundizamos en ambas partes a continuación.

Un componente básico

Ahora vamos a ver cuál sería el código mínimo necesario para la creación de un componente Polymer. Este listado encontrarás que tiene algunas cosas adicionales a las partes del componente señaladas en el anterior punto, pero en seguida las explicamos.

<!-- Importar polymer -->
<link rel="import" href="/blogbower_components/polymer/polymer.html">

<!-- Definir el componente -->
<dom-module id="mi-elemento">
 <template>
 <p>DOM local</p>
 </template>
 
 <script>
 Polymer({
 is: 'mi-elemento',
 });
 </script>
</dom-module>

Como ves, en el listado comenzamos con la etiqueta <import>. Esto es para traernos todas las dependencias del componente, es decir, todos los elementos personalizados en los que nos hemos basado para el desarrollo. En este caso, simplemente traemos la librería Polymer. Esa librería la tendrás que haber descargado, algo que realizas con Bower y ya comentados cuando hablamos de los elementos de Polymer.

Luego encuentras una etiqueta <dom-module>. Esta etiqueta engloba todo lo que es nuestro componente, las dos partes que habíamos mencionado anteriormente. El único detalle es que tenemos que colocar a <dom-module> un atributo id con el nombre del componente. Es importante que los nombres de los componentes tengan al menos un guión (), para distinguirlos de etiquetas HTML.

Luego tenemos el <template>, que es el HTML y CSS del componente. En el listado anterior hay únicamente un párrafo e incluso podría estar vacío el template, pero podríamos tener algo más complejo como esto:

<template>
 <style>
 div{
 color: red;
 }
 </style>
 <div>
 Este es el contenido del <b>componente</b>
 </div>
</template>

Por último tenemos el <script> para poder registrar el componente. Se hace con la función Polymer (¡Ojo con la P mayúscula!) e indicando como parámetro un objeto. Ese objeto incluirá muchas de las cosas que un componente necesita para funcionar, pero de momento lo único que le estamos mandando es el nombre del componente en una propiedad llamada is dentro del objeto pasado a la función Polymer.

Polymer({
 is: 'mi-elemento',
});

El código del componente lo pondrás en un archivo HTML independiente, al que generalmente nombrarás con el mismo nombre del componente. En este caso sería: mi-elemento.html.

Cómo usar este componente

Con esto, tenemos ya nuestro componente creado y solo nos queda usarlo. Para ello,  tendremos que crear una página de demo. Será un archivo HTML común, en el que agregaremos el import para poder traernos el código del componente.

<link rel="import" href="/blogmi-elemento.html">

Luego ya solo será usar el componente, mediante una etiqueta con su nombre.

<mi-elemento></mi-elemento>

El código HTML completo de la página de demo quedaría algo así:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>elemento demo</title>
 <link rel="import" href="/blogmi-elemento.html">
</head>
<body>
 <mi-elemento></mi-elemento>
</body>
</html>

Solo te quedaría abrir este archivo, pero recuerda una cosa muy importante: para poner en marcha una página que realiza imports (y que funcione bien) tienes que abrirla mediante un servidor web. Es decir, mediante http://. Puedes obtener un servidor web por cualquier mecanismo, como un paquete de Nodejs, las propias polymer-cli o un Apache en local o incluso subiendo los archivos a un servicio de hosting.

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 *