Existe un rico conjunto de funcionalidades en las propiedades de los componentes, incorporadas de casa en Polymer 2, que nos servirán para satisfacer las más variadas necesidades en el desarrollo de custom elements y de aplicaciones basadas en Web Components. Algunas de ellas ya las hemos visto anteriormente en el Manual de Polymer 2. Por ejemplo, en el artículo anterior describimos con detalle cómo funciona la declaración "type" en las propieades, aunque en este artículo las explicaremos todas, para que tengas una visión global de las posibilidades.

Si vienes de Polymer 1.x, hay que decir que las propiedades de Polymer 2 tienen las mismas funcionalidades que ya conoces, por lo que el presente artículo te servirá más bien para refrescar los conocimientos y acceder a nuevos ejemplos de componentes realizados según las guías de Web Components V1 y Polymer 2.

Configuraciones posibles en propiedades de Polymer 2

Comenzamos con un listado de las funcionalidades configurables en las propiedades de los componentes.

• type: Sirve para indicar el tipo (Boolean, Number, String, Array, Object y la menos conocida Date) Sobre este asunto hemos hablado suficiente en el pasado artículo sobre los tipos y deserialización de atributos.
• value: Sirve para definir el valor predeterminado de una propiedad. Si se indica, se usará para inicializar esa propiedad, aunque a la hora de usar el componente mandará la posible inicialización que se realice en el atributo HTML del componente asociado con esa propiedad. El valor también se puede calcular por medio de una función, que se invocará si es necesario en la inicialización del componente. Se usará el valor de devolución de la función para inicializar la propiedad. Además, para propiedades de tipo Array y Object, si queremos que exista una copia del array o el objeto para cada elemento generado, tenemos que producir ese array u objeto en una función, devolviendo el valor a inicializar con el correspondiente return.
• reflectToAttribute: Sirve para que el valor de la propiedad actualice el valor de la propiedad en el elemento. Por defecto esto no ocurre, por lo que, si se cambia el valor de una propiedad, no se refleja en el HTML del componente host. Si queremos que se actualice el atributo en la etiqueta HTML se debe marcar con true reflectToAttribute.
• readOnly: Si lo configuramos como true, el valor de esa propiedad no se puede alterar desde fuera, vía binding.
• notify: esta configuración permite que el componente notifique a los padres mediante binding cualquier cambio de la propiedad. Es una configuración muy importante para que los elementos que crees soporten binding de dos direcciones. Por defecto está a false y en ese caso, aunque el componente modifique internamente una propiedad, su valor no viajará al padre por binding, independientemente que usemos las dobles llaves al declarar el bindeo en el template.
• computed: es otra de las más importantes configuraciones, que permite hacer propiedades que tiene valores que serán calculados por una función. Se utilizan muchísimo, ya que muchas veces los valores de propiedades son el resultado de realizar un cálculo. Para definir una propiedad computada usamos una función, que recibe los valores necesarios para realizar el cálculo, que deben ser otras propiedades del componente. Polymer ya automatiza el procedimiento para que, cuando cambian los parámetros de entrada en el cómputo, se invoque de nuevo la función, de modo que siempre las propiedades computadas tengan el valor actualizado.
• observer: También es extremadamente útil, ya que permite definir una función que se ejecutará cuando se produzcan cambios en el valor de una propiedad, facilitando enormemente la programación reactiva. Cada vez que una propiedad se altere el componente reacciona por los observers y realiza todas las operaciones que ese cambio deba producir.

De todas estas configuraciones de propiedades iremos realizando ejemplos a lo largo del manual. Muchas de ellas las veremos en repetidas ocasiones y las analizaremos de manera más detallada en futuros artículos.

Ejemplo de declaración de propiedades

Aunque hemos visto anteriormente otros componentes en los cuales hemos incorporado propiedades, vamos a ver un nuevo ejemplo de declaración de custom element Polymer 2 en el que tenemos un listado amplio de propiedades.

En este caso tenemos un supuesto componente que muestra un contacto. El nombre es "persona-contacto" y básicamente lo hemos hecho para tener varios tipos de propiedades con diversas inicializaciones. Es interesante fijarse en la inicialización de las propiedades de tipo "Array" y tipo "Objetc", en las que tenemos necesariamente que crear una función que hace el return del nuevo array de teléfonos de contacto o el objeto con los datos complejos de su dirección.

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

<dom-module id="persona-contacto">
  <template>
    <style>
      :host {
        display: block
      }
    </style>
    <h1>
      Contacto {{nombre}} {{apellidos}}
    </h1>
    <p>
      ... dejamos como ejercicio crear un template adecuado con el que mostrar de manera ordenada sus propiedades
    </p>
  </template>

  <script>
    class PersonaContacto extends Polymer.Element {
      static get is() {
        return 'persona-contacto';
      }

      static get properties() {
        return {
          nombre: {
            type: String,
            value: ''
          },
          apellidos: {
            type: String,
            value: ''
          },
          direccion: {
            type: Object,
            value: function() {
              return {
                via: '',
                numero: '',
                codigoPostal: '',
                ciudad: ''
              };
            } 
          },
          telefonos: {
            type: Array,
            value: function() {
              return [];
            }
          },
          FechaNacimiento: Date,
          email: {
            type: String,
            value: ''
          },
          identificadorGrupo: {
            type: Number,
            value: 0
          },
          activo: {
            type: Boolean,
            value: true
          }
        };
      }

      constructor() {
        super();
      }

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

Queda bastante por aprender de las propiedades, pero imagino que ya vamos teniendo las nociones básicas para entender cómo funcionan. En los futuros artículos haremos nuevos ejemplo en los que trabajaremos con otras configuraciones posibles para las propiedades.