Usar elementos de Polymer

  • Por
Vamos a conocer Polymer por la práctica desempeñando una de las posibilidades que nos ofrece la librería, el uso de elementos, o componentes, que están disponibles en el catálogo de Polymer.

En este artículo vamos a realizar una primera práctica con Polymer al alcance de cualquier persona, incluso sin ningún conocimiento de programación. Se trata de usar los componentes que nos ofrece en su catálogo de elementos.

Pero antes de comenzar aclaremos una cosa. Y es que, básicamente, cuando usas Polymer puedes hacer dos cosas diferentes:

A) Por una parte existe la posibilidad de usar componentes que Polymer te ofrece, o aquellos creados por terceras personas. Para esto no necesitas ningún conocimiento sobre programación y casi nada sobre el propio Polymer. El catálogo de elementos de Polymer es muy grande y te aporta muchas utilidades para desarrollar cosas comunes, pero además existe una comunidad muy activa creando y publicando constantemente como software libre nuevos elementos que podrás también usar.

B) Como segunda alternativa, con Polymer podrás crear tus propios componentes para resolver necesidades específicas para tus propios proyectos. Para esta segunda opción sí necesitas conocer la librería y, obviamente, ayudará tener algunas nociones de programación.

En este artículo comenzaremos con la primera de las dos opciones.

Nota: A lo largo del manual de Polymer usaremos la palabra "componente" como sinónimo de "elemento". En resumen nos referimos siempre a lo que en la especificación de Web Components sería un Custom Element, que viene a ser una etiqueta personalizada que puedes crear para extender el HTML. Hay autores que incluso pueden usar familiarmente la expresión "un Polymer" para referirse a un Custom Element desarrollado con la ayuda de la librería Polymer.

Pasos para instalar Polymer

Comenzamos explicando los pasos para instalar Polymer en un nuevo proyecto de sitio web, proceso para el cual se recomienda usar Bower. Seguramente ya conozcas esta herramienta, pero si no la has usado nunca tienes un artículo bastante aclarador sobre Bower en DesarrolloWeb.com.

Como debes saber, Bower funciona desde el terminal. Una vez tienes Bower en tu ordenador te dirigirás a la carpeta de tu proyecto desde la línea de comandos. Instalas Polymer con el comando:

bower install polymer

Nota: Ya lo sabrás, pero si ya has creado tu bower.json te ayudará hacer un bower install --save polymer para que se guarde la dependencia en el bower.json.

    Dentro de la carpeta bower_components encontrarás ahora dos cosas:
  1. El propio Polymer, en la carpeta "polymer"
  2. El polyfill para Web Components en la carpeta "webcomponentsjs"

Polymer lo necesitas para poder usar cualquier elemento creado con esta librería. El polyfill lo necesitas para los navegadores que todavía no soportan el estándar de los Web Components. En resumen el polyfill es una capa de compatibilidad que permite que los navegadores que no tienen soporte nativo al estándar lo puedan entender por medio de una librería Javascript. Hablaremos más tarde de él.

Nota: Un detalle interesante es que este paso, de instalar Polymer, realmente no necesitaríamos hacerlo manualmente, pues al instalar mediante Bower cualquier elemento basado en Polymer se instalarán automáticamente sus dependencias, en este caso la propia librería Polymer. De todos modos, está bien que lo conozcas porque a veces quieres instalar Polymer independientemente de uno de sus elementos.

Instalar elementos de Polymer

Ahora que hemos instalado la librería Polymer estamos a medio camino de usar cualquiera de sus elementos. El primer paso será instalarlos en nuestro proyecto, para lo que usaremos también la herramienta Bower.

En la documentación del catálogo de elementos encontraremos sus explicaciones detalladas, junto con un demo y otros recursos para aprender a usarlos. Allí también está detallado el comando de Bower que instala los componentes.

Vamos a elegir un componente cualquiera e instalarlo. Por ejemplo usaremos el que nos permite tener una barra de desplazamiento para seleccionar un valor entre un mínimo y un máximo. Se conoce como "paper-slider" y su documentación está en la siguiente URL: https://elements.polymer-project.org/elements/paper-slider

En la parte de la izquierda encontramos el comando para descargar el componente en nuestro proyecto, que tendrá esta forma:

bower install --save PolymerElements/paper-slider

Nota: Fíjate que el commando Bower tiene la opción --save, así que para que no te de error debes tener creado tu bower.json en el proyecto. Lo creas cómodamente con bower init, como explicamos en el primero de los artículos que hemos publicado dedicados a Bower. Si no tienes creado el bower.json y no lo quieres crear, simplemente quita la opción --save.

Al ejecutar el comando anterior verás como en la carpeta bower_components se almacenan otra serie de carpetas, con el código del elemento que queremos instalar, el paper-slider, y sus dependencias. Ahora que tenemos todos esos componentes estamos en disposición de comenzar a usarlos.

Usar un componente

    Esta es la parte más fácil y consta de dos pasos:
  1. Importar el componente que deseamos usar, de modo que el navegador sepa dónde se encuentra su código fuente
  2. Usarlo como si fuera cualquier etiqueta de HTML común

Importar el componente lo consigues con la etiqueta LINK del HTML. Esta etiqueta te 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. Estos "import" forman parte de la especificación de los Web Components, aunque la etiqueta LINK en sí ya estaba con nosotros hace años. Puedes encontrar más información en el artículo de los Imports de Web Components.

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

Nota: Fíjate que esta etiqueta LINK tiene el rel="import", mientras que para traerse una hoja de estilos externa, el uso anterior que teníamos de esa etiqueta ese atributo tenía el valor "stylesheet". Fíjate también que la ruta al código del elemento, atributo href, esté correcta.

Ese import lo colocarás en el HEAD de tu página. Posteriormente, en el cuerpo del documento HTML podrás usar perfectamente la etiqueta nueva del elemento, como si fuera cualquier etiqueta común del HTML.

<paper-slider></paper-slider>

Es tan sencillo como esto. Realmente al alcance de cualquier persona.

Solo un detalle importante que debes tener en cuenta: para que estos ejemplos funcionen tienes que acceder a las páginas a través de un servidor web. El motivo es que los import de Web Components traen los archivos que estás importando por medio del protocolo HTTP. Si no los abres accediendo a un servidor web por HTTP no se podrá traer el código del elemento paper-slider.

Nota: Usar un web server es una tarea muy sencilla. Si tienes un programa como wamp, xampp, mamp o similares, ya cuentas con un servidor web. Si no, puedes usar el editor Brackets que el preview tiene incorporado uno (el icono del rayo arriba a la derecha). Otra opción es usar algún servidor de un package NodeJS como http-server o polyserve. Si no tienes nada de esto puedes subir los ejemplos, junto con la carpeta bower_components, a un servidor web aunque no es lo más fácil y no lo recomendamos a nivel de desarrollo por ser una operativa muy poco práctica. Estamos seguros que podrás superar este requisito. En el propio DesarrolloWeb.com tienes artículos para aprender a usar varios servidores web.

Polyfill para compatibilidad con navegadores que todavía no implementan el estándar

Este ejemplo, en el momento de escribir el presente artículo, sólo funcionaría con el navegador Chrome, así como con Opera. Sin embargo, de una manera sencilla podemos conseguir que funcione en todas partes, usando el "polyfill" de los Web Components. Dicho Polyfill, como dijimos, se instala al instalar Polymer, o por extensión al instalar cualquier elemento de catálogo de Polymer, por lo que lo único que necesitarás es incluirlo en la página.

La recomendación es colocar el script del Polyfill en el HEAD de la página. Obviamente, antes de hacer el import de cualquier componente que quieras usar.

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

Solo tienes que fijarte que la ruta al script esté correcta. Todo depende de donde hayas colocado los elementos de Bower y el HTML donde los estés usando.

El polyfill viene con varias alternativas. Las que tienen "min" quiere decir que el código está minimizado (ocupa menos espacio en bytes y por tanto es más recomendable para un sitio en producción). Las que tienen "lite" es que incluyen menos cosas, aunque en la mayoría de los casos son suficientes para hacer todo lo que necesites.

Ejemplo completo

El HTML del ejemplo sería el siguiente. Para asegurarte que funciona solo tendrás que haber instalado los archivos de Polymer y del custom element como hemos descrito en los anteriores pasos.

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

Este documento HTML es el que tienes que abrir a través de un servidor web para que funcione el ejemplo. Como tiene cargado el polyfill debería funcionar en todos los navegadores, salvo Explorer 9 y anteriores.

Vídeo donde mostramos el proceso de usar componentes Polymer

En el siguiente videotutorial, en 9 minutos, aprenderás a usar componentes de Polymer y en concreto el componente de los iconos, que nos ofrece la posibilidad de colocar iconos y personalizarlos, de entre los disponibles en la biblioteca de iconos Polymer.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Sergio

09/2/2016
Polymer tiene buena pinta
Me está interesando mucho esta tecnología de Polymer. Gracias por publicar estos artículos.

rOxhh

29/4/2016
Realmente bueno
Gracias por entregarnos esta info!!