POLYMER Parte I

Sin mas preámbulos vamos a hacer una página web utilizando alguno elementos de Polymer v. 1.0. Dejaré un link como referencia de ¿Que es Polymer?

Instalacion

Polymer Se puede Descargar en Zip o como se recomienda  se debe usar Bower (Si optan por Bower se requerirán conocimientos básicos de su uso; pueden leer este artículo: ¿Que es Bower?).

Ahora suponiendo que ya tenemos una carpeta llamada “ProyectoPolymer” donde estará nuestro proyecto web; entonces descomprimimos el zip y copiamos allí la carpeta “bower_components”, esta carpeta contiene las librerias básicas para hacer funcionar Polymer. Sin embargo como ya habíamos dicho no es recomendable descargar en zip Polymer pues conforme cresca nuestro proyecto necesitaremos descargar mas librerias y sus dependencias y despues puede complicarse.

Para descargar Polymer con Bower se hace lo siguiente en la línea de comandos:

C:\ProyectoPolymer> bower init

El comando debe ejecutarse en la raiz de nuestro proyecto. Después de ejecutar el comando se nos pedirá que ingresemos algunos datos sobre nuestro proyecto. Y automáticamente se creará un archivo llamado “bower.json”. Este archivo contendrá la información de todos los paquetes que bajamos. Una ventaja de usar Bower es que si el paquete que bajamos tiene dependencias estas se bajarán en automático.

C:\ProyectoPolymer> bower install --save Polymer/polymer#^1.2.0

El comando ejecutado arriba en la raiz de nuestro proyecto descarga las librerías básicas de Polymer; ahora debe aparecer la carpeta “bower-components” en nuestra carpeta del proyecto.

Cuando una nueva versión de Polymer está disponible, solo se ejecuta el comando bower update en el directorio del proyecto para actualizar nuestra copia.

También debemos descargar algunos elementos de Google Polymer y lo vamos a hacer usando Bower (Recuerden que en la línea de comandos esta debe estar en la carpeta raiz del proyecto):

C:\ProyectoPolymer> bower install --save PolymerElements/iron-elements
C:\ProyectoPolymer> bower install --save PolymerElements/paper-elements
C:\ProyectoPolymer> bower install --save GoogleWebComponents/google-web-components

Manos a la obra

Para continuar es necesario destacar que segun la página oficial de Polymer esta librería “está diseñada para hacer más fácil y más rápido para los desarrolladores la creación de componentes reutilizables para la web”. En otras palabras podemos crear un <button> personalizado y usarlo en otros proyectos; por otro lado Google ya tiene varios componentes web que podemos usar en nuestras aplicaciones web y en esta primera parte los usaremos.

Ahora bien creamos el archivo index.html en la raiz del proyecto:

<!DOCTYPE html>
 <html>
 <head>

  <title>Ejemplo de un Proyecto Polymer</title>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

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

  <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
   <link rel="import" href="/bower_components/iron-icon/iron-icon.html">
   <link rel="import" href="/bower_components/iron-icons/iron-icons.html">

  <link rel="import" href="/bower_components/paper-styles/paper-styles.html">
   <link rel="import" href="/bower_components/paper-header-panel/paper-header-panel.html">
   <link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
   <link rel="import" href="/bower_components/paper-material/paper-material.html">
   <link rel="import" href="/bower_components/paper-drawer-panel/paper-drawer-panel.html">
   <link rel="import" href="/bower_components/paper-item/paper-item.html">
   <link rel="import" href="/bower_components/paper-menu/paper-menu.html">
   <link rel="import" href="/bower_components/paper-button/paper-button.html">
   <link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
   <link rel="import" href="/bower_components/google-youtube/google-youtube.html">

</head>
 <body class="fullbleed layout vertical">

   <paper-drawer-panel>
    <paper-header-panel drawer>
      <paper-toolbar>
Contenido Principal

</paper-toolbar>


      <paper-menu>
        <paper-item>Opcion 1</paper-item>
        <paper-item>Opcion 2</paper-item>
        <paper-item>Opcion 3</paper-item>
        <paper-item>Opcion 4</paper-item>
      </paper-menu>
    </paper-header-panel

    <paper-header-panel main>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
Ejemplo de un proyecto Polymer (Header Panel 2)

 


      </paper-toolbar>
        <paper-material elevation="2">
          <br />
          <paper-button toggles raised secondary>
            <iron-icon icon="check"></iron-icon>ACEPTAR
          </paper-button>
          <br />
          <google-youtube video-id="MQiszdkOwuU" height="400px" width="100%" rel="0" start="5" autoplay="0">
          </google-youtube>
          <br />
        </paper-material>
    </paper-header-panel>
</paper-drawer-panel>

</body>
</html>

Desglosando el código

  1. Con la etiqueta meta le estamos diciendo al navegador que se adapte al ancho de la pantalla de cualquier dispositivo: <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  2. El script webcomponets-lite.js es un conjunto de polyfills que dan soporte a algunos navegadores para el uso de Web Components.
  3. Ahora con la etiqueta <link rel="import" href="...html"> importamos los web componentes.
  4. En el body de nuestra pagina ponemos las etiquetas de los web components. Por ejemplo <paper-drawer-panel> <paper-header-panel> <paper-toolbar> etc..

Se que no estoy explicando a detalle cada etiqueta de Polymer pero el punto es que desde ahora puden ver un poco mas real como funcionan los webcomponents aunque todavía tengan dudas.

Ejecutamos la página index.html debe de aparecer algo parecido a esto:

Captura_pagina_polymer

Si se dan cuenta no programamos nada de estilos pues los webcomponents ya vienen con todo el diseño y funcionalidad programada. En el siguiente artículo veremos el interior de un webcomponent que usamos y haremos un personalizado.

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s