Los “behaviors” implementan el mecanismo mediante el cual se puede compartir código entre componentes de Polymer. Su uso es muy sencillo, tanto la construcción como la incorporación en nuestros custom elements. Además resultan muy útiles en el desarrollo de aplicaciones o bibliotecas de componentes, por lo que es importante conocerlos y usarlos tanto cuanto sea necesario.

Posiblemente por su denominación en español, behavior significa comportamiento, ya nos de una idea de lo que esta herramienta nos permite, crear comportamientos asignarlos a componentes, con la particularidad de poder compartirlos entre varios custom elements. En este artículo del Manual de Polymer pretendemos explicar todos los detalles sobre las behaviors que debes saber para usarlos en tus proyectos.

Cómo construir un behavior

Comenzamos estudiando la implementación de un behavior en Polymer. Recuerda que su uso es simplemente compartir código, por lo que tendrás que pensar en cualquier pieza con código potencialmente utilizable a lo largo varios elementos. Por ejemplo, en una aplicación es habitual que tengamos que validar datos en algún momento, así que vamos a crear un behavior en el que creemos algunos métodos de validación.

Te mostramos el código de un behavior completo, ya que es bastante sencillo como para poder analizarlo en un bloque.

<script>
ValidadorBehavior = {
  esSlug: function(slug) {
    if(slug.length < 3){
      return false;
    }
    return /^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/.test(slug);
  },
  esName: function(name) {
    if(name.length <= 1 || name.length > 100)
      return false;
    return true;
  }
};
</script>

Como puedes comprobar, no es más que un script que dentro tiene un objeto. El objeto tiene su nombre, que es el nombre de la behavior que estamos creando. Observa que, por convención, se usa la primera letra en mayúscula en el nombre de nuestra behavior “ValidadorBehavior”. También es habitual la convención de apellidar "Behavior" al objeto. Nombres habituales por tanto podrían ser “ValidadorBehavior”, “EmisorFeedbackBehavior" o “LoQueSeaBehavior”.

Luego, dentro del código de nuestro objeto colocaremos tantos métodos como deseemos y esos métodos serán los que se compartan. En este código no lo estamos viendo todavía, pero también podrías componer otras declaraciones habituales en componentes de Polymer, como propiedades.

Cómo usar un behavior en un componente: declaración behaviors

En cada componente donde deseemos usar un behavior tenemos que declararlo en el array “behaviors”. Este array indica, separadas por comas, todos los nombres de las behaviors que quieras usar.

Veamos un componente que declara el uso de nuestro behavior anterior.

<dom-module id="formulario-registro">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>


    <!-- 
    	Aquí colocarías el template de este componente... 
    	que no viene al caso para este artículo...
    -->


  </template>
  <script>
  (function() {
    'use strict';


    Polymer({
      is: 'formulario-registro',


      behaviors: [ValidadorBehavior],


      properties: {
        name: String,
        slug: String
      },


      saveUser: function() {
      	if(this.esName(this.name) && this.esSlug(this.slug)) {
      		// comprobada la validez de los datos (con los métodos de la behavior)
      		// ahora podría guardar el usuario
      	}
      }


    });
  })();
  </script>
</dom-module>

Realmente el código del componente en general importa poco, para nuestro caso conviene fijarnos simplemente en el array behaviors, donde se colocan los nombres de los objetos que queremos usar como behaviors.

En este caso hemos usado solo un behavior, pero podrían ser varios, por ejemplo:

behaviors: [FirebaseBehavior, EmisorFeedbackBehavior, UserService],

A partir de que hayamos declarado nuestra behavior en el correspondiente array, sus miembros serán utilizables perfectamente dentro del componente, como cualquier otro miembro que hubiera sido declarado por los mecanismos habituales.

Como puedes observar en el código anterior, tenemos un método llamado "saveUser". Ese método hace uso de los métodos declarados en nuestra behavior. Como son métodos que usamos dentro del Javascript del componente, se acceden mediante la palabra "this", como cualquier otro método del componente.

Declarando propiedades en una behavior

Como podrás imaginar, las behaviors no solo nos permiten compartir métodos, también es posible usarlas para compartir propiedades. Para ello simplemente tendrías que declarar en la behavior el listado de propiedades con el objeto "properties", igual que haces con los componentes normales. Veamos este ejemplo:

<script>
UserService = {
  /**
   * Propiedades necesarias para la búsqueda de usuarios
   */
  properties: {
    emailBuscado: {
      type: String,
      value: ''
    },
    usersFound: {
      type: Array,
      value: function(){
        return [];
      }
    },
  },


  /**
   * Buscar un usuario por su email.
   */
  buscarUserEmail: function(){
    // código para buscar un usuario de la aplicación
    // puede ser asíncrono, motivo por el que no devuelvo un listado, sino modifico propiedades
    this.usersFound = ['miguel Angel Alvarez', 'DesarrolloWeb.com'];
  },
};
</script>

Las propiedades son accesibles desde la propia behavior, así como desde el código del componente. Su uso no difiere del que ya conoces de las propiedades declaradas habituales los componentes de Polymer.

Solo hay un detalle que quizás estás pensando y es el de compartir datos entre distintos componentes. Es habitual que en una aplicación haya datos que quieras compartir entre distintos miembros, pero las behaviors no te ayudarán en eso. Cada elemento de la aplicación que implemente el behavior tiene una copia independiente de las propiedades definidas en él. La propiedad se crea para cada componente, así, si cambias su valor en un componente, ese valor no se traspasará a otros componentes que implementen la misma behavior o a otras instancias del mismo componente. Supongo que se entiende ésto y tiene todo el sentido, porque si por ejemplo yo quiero implementar la behavior del UserService, para permitir búsquedas de usuarios en componentes, no me interesa que al buscar usuarios en un componente esa búsqueda se traspase para otros componentes que también permitan buscar usuarios.

Con todo esto estás preparado para usar Behaviors. Si en principio no se te ocurre cómo usarlos no te preocupes, las necesidades irán llegando. Solo recuerda que existen cuando tengas la tentación de copiar y pegar código de métodos o propiedades que quieras usar desde otros componentes.