Introducción a Polymer (3) : Desarrollo de una aplicación real

/ Jose Antonio Adame Fernandez

En este post vamos a empezar a desarrollar nuestra primera aplicación en Polymer. Nuestra aplicación nos permitirá visualizar en un mapa una lista de centros pertenecientes a EGI (Iniciativa Grid Europea – European Grid Initiative). La interfaz de la aplicación se dividirá en dos vistas principales, un mapa para poder ver la ubicación de los centros, y un listado con cada uno de ellos. Además se incluirá un buscador para poder buscar por el nombre del centro y un filtro por países.

La aplicación quedará de la siguiente manera:

aplicacion

Comencemos…

Para empezar a desarrollar el proyecto tenemos que crearnos el directorio de trabajo, para esto podemos seguir los pasos que se explicaban en el post anterior Introduccion a Polymer (2): Scaffolding de la aplicación. Una vez completado estos pasos, ya tendremos nuestro proyecto listo para empezar a desarrollarlo. Podemos probar que la aplicación base se lanza correctamente ejecutando el siguiente comando:

gulp serve

Este comando levantará un servidor en la máquina de desarrollo y se nos abrirá la aplicación en un navegador, en este caso es la aplicación base que trae la instalación de Polymer.

Lo primero que vamos a hacer es construir la estructura general de la aplicación. Como se ha comentado, la aplicación se divide en dos grandes vistas, que son el mapa y un listado de centros. Además, existirá una zona lateral donde se podrá realizar una búsqueda de centros.

Polymer nos facilita mucho la tarea a la hora de construir el diseño de nuestra aplicación, ya que existe una extensa librería de componentes específicos para cada una de las partes de la misma. Estos componentes los podemos encontrar en el catálogo de elementos oficial de Polymer.

Esta librería se puede dividir en los siguientes elementos:

  • Iron elements: Es una librería que incluye elementos útiles para el manejo del layout y utilidades del core, sin aplicar ningún estilo visual complejo.
  • Paper elements: Son componentes basados en material design de los iron elements.
  • Google Web Components: Widgets de servicios de Google como Google Maps, YouTube o Google Calendar, entre otros.
  • Gold elements:  Componentes para comercio electrónico
  • Neon elements: Componentes con animaciones web y efectos especiales.
  • Platinum elements: Componentes con funcionalidades complejas como las notificaciones push.
  • Molecules: Incluye otras librerías JavaScript.

A partir de estos componentes tenemos un buen punto de partida para empezar a  desarrollar nuestra aplicación.

Para desarrollar todo el proyecto vamos a utilizar el editor de código Brackets, pero también podréis utilizar vuestro editor de código favorito.

Empezamos creando la estructura básica de la misma, para ello vamos a modificar el fichero app/index.html, borramos todo lo que tiene e insertamos el siguiente código:

<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="polymer-app/polymer.html">
        <meta name="viewport" content="width=device-width, user-scalable=no">
    </head>
    <body class="fullbleed layout vertical">
        <polymer-demo></polymer-demo>
    </body>
</html>

Estamos creando una página de inicio para nuestra aplicación. En esta página importamos todo lo necesario para incluir Polymer y definimos el <body>. El <body> estará compuesto por un componente personalizado y creado por nosotros mismos llamado <polymer-demo>. Este componente contendrá y controlará la vista principal de nuestra aplicación.

Para ello vamos a crear dentro de nuestro directorio de trabajo una carpeta llamada polymer-app, y dentro de ella crearemos el archivo polymer.html. Este fichero contendrá la vista principal de nuestra aplicación, con el mapa, el listado y el buscador.

Si nos fijamos en la página index.html hemos incluido la siguiente referencia para que el componente este disponible:

<link rel="import" href="polymer-app/polymer.html">

En el fichero polymer-app/polymer.html vamos a crear la estructura de nuestra aplicación. Para construir nuestra aplicación vamos a utilizar elementos del catálogo de Polymer, que podremos reutilizar tantas veces como queramos dentro de nuestra aplicación. Los elementos que vamos a utilizar serán los siguientes:

Todos estos elementos son necesarios para construir nuestra interfaz. Podéis consultar toda su información en los enlaces anteriores.

Para poder utilizar los elementos del catálogo dentro de nuestra aplicación tenemos que instalarlos, para ello vamos a utilizar Bower tal y como se indica en cada página del elemento del catálogo. Por ejemplo, para instalar el Drawer Panel tendremos que ejecutar el siguiente comando desde una consola y dentro de nuestro directorio de trabajo.

bower install --save PolymerElements/paper-drawer-panel

Lo que hace este comando es añadir al archivo de dependencias bower.json la libreria que contiene al elemento y además nos descarga el elemento y lo mete dentro de la carpeta bower_components. Una vez hecho esto ya tenemos el elemento disponible para ser utilizado. Hay que hacer esta operación para el resto de los elementos.

Una vez instalados todos los elementos vamos a escribir el código necesario en nuestro componente propio, para ello editamos el fichero polymer-app/polymer.html e introducimos el siguiente código:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.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-tabs/paper-tab.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<dom-module id="polymer-demo">
    <style>
    </style>
    <template>
        <paper-drawer-panel>
            <paper-header-panel drawer>
                <paper-toolbar></paper-toolbar>
                <div>

                </div>
            </paper-header-panel>
            <paper-header-panel main>
                <paper-toolbar class="medium-tall">
                    <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                    <span class="title">Listado de centros Grid</span>
                     <paper-tabs id="tabs" class="bottom self-end" selected="{{selected}}">
                        <paper-tab>Mapa</paper-tab>
                        <paper-tab>Listado</paper-tab>
                    </paper-tabs>
                </paper-toolbar>
                <div>
                    <iron-pages selected="{{selected}}">
                        <div>
                            <h1> Mapa </h1>
                        </div>
                        <div>
                        <h1> Listado </h1>
                        </div>
                    </iron-pages>
               </div>
            </paper-header-panel>
        </paper-drawer-panel>
    </template>
</dom-module>
<script>
    //llamamos al objeto que  inicializa el componente.
    Polymer({
        is:"polymer-demo",
        ready: function(){

        },
        properties: {

        },
    });
</script>

Veamos por partes en que consiste. Primero se hacen las referencias a los  componentes que antes hemos instalado y descargado para poder utilizarlos. Las referencias son a los componentes instalados en la carpeta bower_components.

Con la etiqueta <dom-module id=»polymer-demo»> definimos nuestro propio componente y le damos el nombre que va a tener para que pueda ser utilizado en el resto de la aplicación. En el archivo index.html lo referenciamos de la siguiente manera:

<body class="fullbleed layout vertical">
    <polymer-demo></polymer-demo>
</body>

Luego tenemos una sección para los estilos <style>, por si quisiéramos aplicar nuestros propios estilos con CSS, seguida de la sección <template> que es donde vamos a «pintar» nuestra interfaz.

Como hemos dicho nuestra interfaz se compone de una barra de navegación y un menú lateral. Antes de nada tenemos que crear el <paper-drawer-panel> sobre el que incluiremos el resto de los componentes.

Incluimos el menú lateral con <paper-header-panel drawer> y un toolbar en esa sección con <paper-toolbar></paper-toolbar>. Seguidamente añadimos una barra de navegación principal que contendrá las pestañas y un botón para desplegar. Para ello utilizamos el componente paper-tab, y metemos dos pestañas, una para el listado y otra para el mapa, como se puede ver en el siguiente código extraído del código anterior del componente que estamos implementando:

<paper-tabs id="tabs" class="bottom self-end" selected="{{selected}}">
 <paper-tab>Mapa</paper-tab>
 <paper-tab>Listado</paper-tab>
</paper-tabs>

La variable selected nos permite controlar que pestaña tenemos activa en cada momento.

Si ejecutamos nuestra aplicación veremos que tenemos la bloque de la interfaz de nuestra aplicación ya construido y podemos navegar entre pestañas.

 

Captura de pantalla de 2016-02-09 11:19:33En el siguiente artículo, veremos como cargar el listado de centros, mostrarlos en el mapa y aplicar un filtro de búsqueda para así tener completada nuestra primera aplicación en Polymer

¡Seguid atentos al blog!