Polymer es una librería muy amplia. Está plagada de cosas que podemos aplicar para sacarle su potencial y una de las primeras con las que tendremos que trabajar son las propiedades. En este artículo comenzaremos a explicarlas con detalle.

Las propiedades de un componente Polymer son como sus datos, es decir, cualquier información que maneje el web component para trabajar la almacenaremos en forma de propiedad. Si conoces la programación orientada a objetos seguramente puedas hacerte una idea de lo que estamos hablando, porque el concepto es el mismo, pero si no es así tampoco te preocupes.

La característica fundamental de las propiedades en Web Components en general es que éstas forman parte de las propias etiquetas HTML. Allí las conocemos en forma de atributos, de modo que pueden viajar desde la declaración del HTML hacia el componente, para modificar su comportamiento. Aunque no tomes eso como la única verdad, puesto que muchas propiedades podrán usarse solamente en el interior del componente, como si fueran privadas.

Dentro del componente las propiedades podrán accederse tanto desde el DOM local (la template que usas para declarar el HTML del custom element) como desde el código Javascript. Todo esto lo veremos a continuación.

Declaración de propiedades

Las propiedades las podemos declarar al registrar el componente mediante el atributo "properties" del objeto que pasamos a la función Polymer(), usada para registrar un custom element.

Polymer({
  is: 'vista-fecha',

  properties: {
    mes: {
      type: String,
      value: 'enero'
    },
    dia: {
      type: Number,
      value: 1
    },
    ano: {
      type: Number,
      value: 2016
    }
  }
});

Allí colocaremos en notación de objeto toda la serie de propiedades que vamos a usar en un componente. Como índice colocamos el nombre de la propiedad y como valor sus características.

La declaración más sencilla de una propiedad se realiza únicamente indicando el tipo de datos que va a contener:

Polymer({
  is: 'vista-fecha',

  properties: {
    nombrePropiedad: String
  }
});

En este caso "nombrePropiedad" está indicando que será una cadena de caracteres. Sin embargo esto limita bastante las posibilidades de la declaración de propiedades de Polymer, ya que la librería nos permite indicar asuntos de lo más diverso como:

• Tipo
• Valor por defecto
• Si se puede modificar desde fuera
• Si se debe notificar a otros componentes cuando esta propiedad cambia
• Qué se debe hacer cuando la propiedad cambie de valor
• Etc.

Iremos viendo todos estos casos de configuración de propiedades en el futuro con detalle.

Asignación de valores a propiedades en el HTML

Como hemos dicho, en el propio HTML podemos definir el valor de las propiedades, lo que nos permite de manera declarativa inicializar o modificar un componente.

Es tan sencillo como usar los propios atributos del HTML, indicando el valor de la propiedad entre comillas:

<nombre-componente saludo="Buenas tardes"></nombre-componente>

En este caso la propiedad "saludo" definida para el Component "nombre-componente" valdrá "Buenas tardes".

Con esta mecánica de definición de propiedades, mediante atributos en el HTML, podemos usar bindings, para enviar valores de propiedad que provengan de variables u objetos que tengamos dentro de nuestra aplicación, incluso de propiedades de otros componentes. El tema del binding es muy poderoso y básico para la creación de aplicaciones en Polymer. No lo hemos visto todavía pero ahondaremos en ello en breve, pero si quieres ir adelantando algo puedes ver cómo funciona con este vídeo que hemos publicado en Youtube: Binging entre componentes Polymer.

Asignación de valores a propiedades desde Javascript

También podremos acceder a un elemento desde Javascript y cambiar el valor de sus propiedades. Gracias a esto. desde fuera del componente y de manera imperativa podemos modificar el estado o comportamiento de un custom element.

En el caso de un custom element realizado con Polymer la operativa se simplifica mucho, ya que las propiedades del elemento son propiedades del propio objeto del DOM. Se ve más fácil con código que explicándolo.

document.querySelector("vista-fecha").mes = "abril"

Como puedes apreciar, accedemos a un custom element mediante el DOM, usando cualquiera de los métodos existentes para ello con Javascript. En ese código usamos document.querySelector() pero podría haberse usado perfectamente document.getElementById(), por ejemplo.

Sobre nuestro elemento "vista-fecha" accedemos luego a la propiedad "mes", que será una de las propiedades del componente Polymer. Asignando cualquier valor se altera el valor de esa propiedad dentro del componente.

Volcar valores de propiedades en un template

Otra de las cosas más habituales que querrás hacer con propiedades es mostrar sus valores como contenido de un componente. Esto lo haces al definir el DOM local de un componente, dentro de la etiqueta TEMPLATE principal del Polymer.

Para ello usamos una notación que seguramente conozcamos de populares sistemas de templating, las dobles llaves. Dentro de dos llaves, de inicio y cierre, colocamos el nombre de la propiedad que se desee volcar como contenido de un componente.

<template>
<div>
      <span class="mes">{{mes}}</span>
      <span class="dia">{{dia}}</span>
      <span class="ano">{{ano}}</span>
    </div>
</template>

Ejemplo de custom element con propiedades

Para acabar vamos a ver un ejemplo completo de custom element en el que usamos los conceptos de propiedades Polymer que hemos conocido en este artículo. Es un componente sencillo donde se hacen pocas cosas, pero de momento es suficiente para ilustrar lo que hemos aprendido.

Se trata de un componente que contiene una vista de una fecha, en un pequeño recuadro de calendario con el valor de un día concreto. No tiene ningún comportamiento dinámico y su único cometido es mostrarnos la fecha con un formato determinado.

El componente lo podemos ver en el siguiente código.

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


<dom-module id="vista-fecha">
  <template>
    <style>
      :host {
        display: block;
      }
      div{
        background-color: beige;
        padding: 5px;
        width: 100px;
        text-align: center;
      }
      span{
        display: block;
        padding: 2px;
      }
      .mes{
        font-size: 1em;
        background-color: brown;
        color: white;
      }
      .dia{
        font-size: 2.2em;
      }
      .mes{
        font-size: 0.9em;
      }
    </style>
    <div>
      <span class="mes">{{mes}}</span>
      <span class="dia">{{dia}}</span>
      <span class="ano">{{ano}}</span>
    </div>
  </template>
  <script>
  (function() {
    Polymer({
      is: 'vista-fecha',

      properties: {
        mes: {
          type: String,
          value: 'enero'
        },
        dia: {
          type: Number,
          value: 1
        },
        ano: {
          type: Number,
          value: 2016
        }
      }
    });
  })();
  </script>
</dom-module>

Todas sus propiedades son de tipo cadena y number. Hablaremos de los tipos más adelante. Además les hemos asignado valores por defecto para que, si no se indican, se tomen aquellos que se han declarado en el objeto "properties".

Ahora puedes ver el código del demo que usaría este componente.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Probando vista-fecha</title>
  <link rel="import" href="vista-fecha.html">
</head>
<body>
  <h1>Probando vista fecha</h1>
  <vista-fecha></vista-fecha>
  <br>
  <vista-fecha mes="febrero" dia="2" ano="2016"></vista-fecha>

  <script>
    document.querySelector("vista-fecha").mes = "abril"
  </script>
</body>
</html>

Tenemos dos recuadros de fecha, uno con un elemento en el que no se indica ningún valor en los atributos "mes", "dia", "ano" y otro en el que se han asignado esos valores de manera declarativa en el HTML.

Además hay un pequeño script para ver cómo de manera imperativa se puede cambiar una propiedad de un elemento, mediante el propio DOM de la página.

Esperamos que esta primera introducción a las propiedades de componentes Polymer te haya servido para aclarar bastantes conceptos básicos. Seguiremos tratando este tema en las próximas entregas. Para complementar esta información puedes asistir a este vídeo, en el que mostramos el proceso de creación de este componente web: