Usar los elementos de Polymer

Tras ver los aspectos más teóricos de Polymer y realizar una primera aproximación práctica a esta librería, vemos ahora una de las posibilidades que nos ofrece: el uso de elementos o componentes disponibles en su catálogo.

Al usar la palabra “componente” la utilizamos como sinónimo de “elemento”, y nos referimos a lo que se considera una etiqueta personalizada que podemos crear para extender el HTML.

Antes de comenzar con la práctica es importante aclarar que podemos hacer dos cosas con Polymer: usar componentes creados por terceros o crear nuestros propios componentes que resuelvan necesidades específicas para los proyectos que estemos desarrollando.

En este artículo, queremos centrarnos en esta primera opción, para lo que no es necesario tener mayores conocimientos de programación. Lo bueno es que el catálogo de elementos del que disponemos está en constante crecimiento, gracias a la comunidad de usuarios de Polymer, y nos permitirá encontrar multitud de utilidades para trabajar con ellas.

Instalar Polymer

Para la instalación de la librería Polymer es recomendable utilizar Bower, el gestor de dependencias para proyectos web. Bower es una herramienta imprescindible para el desarrollo front-end realmente sencilla de manejar. Se basa en NodeJS que se ejecuta desde el terminal y que tiene un API de comandos útiles para realizar tareas de mantenimiento y administración de paquetes necesarios para construir un proyecto web.

Una vez tengamos Bower en nuestra consola, nos dirigimos a la carpeta del proyecto desde la línea de comandos e instalamos Polymer con el comando bower install polymer.

Dentro de la carpeta bower_components encontraremos por un lado el propio Polymer (en la carpeta polymer), y por otro el polyfill para Web Components, que estará en la carpeta webcomponentsjs. El polyfill nos aporta la compatibilidad con los navegadores antiguos, que todavía no soportan el estándar de los Web Components, al permitir que puedan entenderlo por medio de una librería Javascript.

Instalar y usar elementos

Tras instalar Polymer tendremos que instalar, usando también la herramienta Bower, los elementos en nuestro proyecto.

En la documentación del catálogo de elementos, accesible desde elements.polymer-project.org, encontraremos explicaciones detalladas, una demostración y otros recursos. También está aquí detallado el comando de Bower que instala los componentes.

En este ejemplo, vamos a instalar un componente que nos permite tener una barra de desplazamiento, conocida como paper-slider. Este componente lo encontraremos en la siguiente URL: elements.polymer-project.org/elements/paper-slider

A la izquierda, veremos el comando para descargar el componente, que tendrá esta forma: bower install –save PolymerElements/paper-slider.

Tras ejecutar el comando veremos que en la carpeta bower_components se almacenan una serie de carpetas en las que encontraremos el código del elemento que queremos instalar (el paper-slider) y sus dependencias.

Para usar el componente, primero tendremos que importarlo, de modo que el navegador sepa dónde se encuentra su código fuente, y después usarlo como si se tratase de cualquier etiqueta común de HTML.

Para importar el componente usaremos la etiqueta link:

<link rel="import" href="/blogbower_components/paper-slider/paper-slider.html">

Esta etiqueta, que colocaremos en el HEAD de nuestra página, nos permite acceder a un archivo .html que tiene el código del custom element, tanto su HTML como el Javascript y el CSS, por medio de un único fichero.

En el cuerpo del documento HTML podremos usar perfectamente la etiqueta <paper-slider></paper-slider>, como si fuera cualquier etiqueta común del HTML.

Usar Polyfill

Como anteriormente hemos comentado, podemos usar Polyfill para que nuestros elementos sean compatibles con navegadores que todavía no implementan el estándar de los Web Components. La recomendación es colocar el script del Polyfill en el HEAD de la página previamente al import del componente que quieras usar:

<script src="/blogbower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

El HTML del ejemplo completo sería:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Probando elemento de Polymer, paper-slider</title>
<script src="/blogbower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/blogbower_components/paper-slider/paper-slider.html">
</head>
<body>
<h1>Probando paper-slider</h1>
<paper-slider></paper-slider>
</body>
</html>

Para que estos ejemplos funcionen, deberemos acceder a las páginas a través de un servidor web. Si no los abres accediendo a un servidor web por HTTP, no se podrá traer el código del elemento paper-slider.

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 *