Empezando con Polymer 2. Parte 4

Publicada el por

Polymer CLI

Polymer CLI es la interfaz de línea de comandos (Command-Line Interface), y la usaremos para crear nuestros desarrollos en Polymer.

Para poder usar Polymer CLI necesitamos tener instalado en nuestro sistema el siguiente software:

  • NodeJS
  • GIT
  • Bower: npm i -g bower
  • Polymer CLI: npm i -g polymer-cli

Cuando tengamos todo el software instalado podemos ejecutar desde la consola los siguientes comandos de Polymer:

  • polymer init: Inicializar app
  • polymer analyze: Analizar y crear documentación
  • polymer install: Para instalar las dependencias del proyecto
  • polymer serve: Montar un servidor local para probar el componente
  • polymer build: Para construir el código para producción
  • polymer lint: Comprobar que el código es correcto
  • polymer test: Realizar el test de los componentes

Para entender Polymer vamos a crear una aplicación de ejemplo usando las plantillas que nos ofrece el CLI de polymer. 

Usaremos el comando polymer init y seleccionaremos Polymer 2 application. Esta acción creara un proyecto con la estructura básica para una aplicación de polymer.

Estructura de directorios

A continuación un ejemplo con la estructura básica:

  • /bower_components: Las dependencias necesarias
  • /bower_components/Polymer: Librería de polymer
  • /bower_components/webcomponentsjs: Polyfills
  • /src: Nuestros componentes
  • /test: Test de nuestros componentes

Estructura de un componente

En el siguiente ejemplo se muestra la estructura de un componente:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="componente-basico">

    <template>
        <style>
            :root {
                display: block;
            }
        </style>
        <h1>Componente [[prop]]</h1>
        <button on-click='modificar'>Modifica propiedad</button>
    </template>
    <script>
        class ComponenteBasico extends Polymer.Element {
            static get is() {
                return 'componente-basico';
            }
            static get properties() {
                return {
                    prop: {
                        type: String,
                        value: 'default'
                    }
                };
            }
            modificar() {
                this.prop = 'Método de componente';
            }
        }

        window.customElements.define(ComponenteBasico.is, ComponenteBasico);
    </script>
</dom-module>
  1. Al inicio del componente añadiremos las dependencias necesarias
  2. Definimos una etiqueta <dom module> que tendrá todo el contenido del componente
  3. Definimos una etiqueta <template>, aquí se añadirá todo el código HTML y CSS de nuestro componente
  4. Definimos una etiqueta <script>, para añadir el registro y funcionalidad del componente.

Manipulación del DOM

Tanto desde nuestro componente como fuera de el podemos modificar los elementos de polymer como si fueran elementos nativos. A continuación algunos ejemplos:

  • document.createElement(‘componente-basico’);
  • document.body.appendchild(componente);
  • document.getElementById(‘idComponente’);
  • document.setAttribute(‘prop’,’valor’);

Los ejemplo anteriores son bastante conocidos ya que son de javascript y seguramente los has usado mas de una vez.

Para poder modificar el shadow DOM tenemos la interfaz shadowRoot de la API del Shadow DOM.

Dentro del componente lo usaríamos en cualquier método de la siguiente forma:

  • this.shadowRoot.querySelector(‘p’)

Algo de código para comprender mejor polymer

A continuación muestro algo de código para ver los conceptos anteriores:

index.html: Página donde se cargan los componentes y visualizan los componentes

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

  <title>Curso01</title>
  <meta name="description" content="Curso01 description">

  <!-- See https://goo.gl/OOhYW5 -->
  <link rel="manifest" href="./manifest.json">

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

  <link rel="import" href="./src/Curso01-app/Curso01-app.html">
  <link rel="import" href="./src/sandbox/componente-basico.html">
</head>

<body>
  <curso01-app></curso01-app>
  <componente-basico></componente-basico>
  <script>
    let comp_basico = document.createElement('componente-basico');
    comp_basico.setAttribute('prop', 'Componente creado con JS');
    document.body.appendChild(comp_basico);
  </script>
</body>

</html>

Curso01-app.html: Componente de prueba y que ademas añado otro componente básico

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../sandbox/componente-basico.html">
<dom-module id="curso01-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>
    <componente-basico id='cbas'></componente-basico>
    <button on-click='mod'>desde otro componente</button>
    <button on-click='modMetodo'>Acceso método otro componente</button>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class Curso01App extends Polymer.Element {
      static get is() { return 'curso01-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'Curso01-app'
          }
        };
      }
      mod() {
        this.$.cbas.prop = 'propiedades desde un componente a otro';
      }
      modMetodo() {
        this.$.cbas.modificar()
      }
    }

    window.customElements.define(Curso01App.is, Curso01App);
  </script>
</dom-module>

componente-basico.html: Otro componente de prueba

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="componente-basico">

    <template>
        <style>
            :root {
                display: block;
            }
        </style>
        <h1>Componente [[prop]]</h1>
        <button on-click='modificar'>Modifica propiedad</button>
    </template>
    <script>
        class ComponenteBasico extends Polymer.Element {
            static get is() {
                return 'componente-basico';
            }
            static get properties() {
                return {
                    prop: {
                        type: String,
                        value: 'default'
                    }
                };
            }
            modificar() {
                this.prop = 'Método de componente';
            }
        }

        window.customElements.define(ComponenteBasico.is, ComponenteBasico);
    </script>
</dom-module>