Options es una de las clases que proporciona el framework Javascript Mootools y que debemos conocer para desarrollar componentes fácilmente personalizables y reutilizables. Pertenece al paquete Class Extras, que ofrece varias utilidades interesantes para las clases de programación orientada a objetos.

La clase Options nos facilitará mucho la vida a la hora de hacer sistemas personalizables y configurables por el programador. Nos ahorrará además muchas líneas de código cuando queramos crear objetos que se puedan personalizar por una serie de parámetros y nos permitirá definir unas opciones por defecto, que tengan validez cuando el programador no especifique todos los valores de configuración de los objetos que se instancien.

La importancia de conocer la clase Options y utilizarla cuando creemos componentes Mootools, se percibe sobre todo cuando la incorporamos al conjunto de recursos utilizados en nuestro día a día como desarrolladores Javascript. Observaremos al poco tiempo que resulta muy cómoda de usar y que nos da unas posibilidades enormes de reutilización de los componentes, personalización de sus funciones, así como la posibilidad de extender fácilmente las clases con nuevas funcionalidades, sin que ello implique reformar el código fuente de nuestras páginas en varios sitios para utilizar las nuevas versiones de las clases. En cualquier caso, en este artículo del Manual de Mootools de DesarrolloWeb.com esperamos que puedas apreciar todas las ventajas de uso de esta clase.

Podría venir bien un ejemplo para que las personas puedan entender cómo la clase Options nos permite organizar la inicialización de los objetos. Pensemos que hemos desarrollado un componente para crear un popup DHTML. Este popup mostraría un texto en una capa emergente y se podría configurar indicando su altura y la anchura. Por ejemplo el código para construir un popup como este podría ser:

var miPopup (enlace, texto, anchura, altura);

Todos esos datos podría necesitarlos el constructor. El enlace (del primer parámetro "enlace") sería el identificador del enlace o elemento que, cuando se hace clic sobre él, provoca que se abra la ventana emergente. El resto de datos texto, anchura y altura se deben indicar para configurar el popup.

Bueno, pues pensemos que dentro de unos días queremos configurar otras cosas como el color de fondo del popup, si tiene o no un botón para cerrar, si queremos que dentro del popup se muestre una página distinta por medio de un iframe, si se quiere poner un titular en la ventana del popup, etc. Ahora el constructor para crear la ventana podría tener esta forma:

var miPopup (enlace, texto, anchura, altura, fondo, cerrar, URLIframe, titular);

Esto nos podría obligar a cambiar todos los constructores que abren popups con la versión anterior de la clase, para incorporar todos los nuevos parámetros, o crear distintas versiones del popup, una sencilla y otra compleja. O bien hacer una única clase que tendría un buen pedazo de código sólo para hacer la comprobación de si existe o no ese parámetro en el constructor y dar un valor por defecto para cada uno de los datos que no se hayan indicado. Todo esto es un trabajo que puede llegar a ser pesado y además innecesario.

Sería mucho mejor hacer algo como esto:

var miPopup (enlace, opciones)

El constructor del popup sería siempre el mismo, con dos parámetros, el enlace que provoca la apertura de la capa emergente y unas cuantas opciones, que podrían incluso omitirse y simplemente tomar los valores por defecto. Lo mejor es que implementar esas opciones por medio de la clase Options es un paso casi inmediato que nos ahorrará además gran cantidad de código Javascript.

Uso de la clase Options

A lo largo de este manual de Mootools ya hemos visto multitud de ejemplos que utilizan el mecanismo provisto por la clase Options, como la clase Fx y sus derivadas. Si recordamos, al crear un efecto con Mootools, debíamos indicar en el constructor del efecto una serie de datos opcionales, como la duración del efecto, los frames por segundo, etc.

miEfecto = new Fx.Tween("micapa", {
property: 'color',
duration: 'slow',
fps: 20
});

Podemos ver que el constructor de Fx.Tween recibe como parámetros el elemento sobre el que se está creando el efecto y diversas otras opciones indicadas entre llaves. Esas opciones se indican con notación de objetos, indicando el nombre de opción y su valor. Realmente la clase Fx.Tween tiene varias opciones adicionales que se pueden configurar, pero nosotros sólo estamos indicando unas cuantas. Internamente lo que hace Fx.Tween es implementar la clase Options y los datos que recibe los procesa por medio de un método definido en la clase Options. Nosotros podemos hacer lo mismo en nuestras propias clases con muy poco esfuerzo.

Desarrollo con la clase Options de Mootools

Ahora que ya hemos debido de comprender para qué nos sirve la clase Options y las ventajas que nos ofrece a la hora de hacer componentes para nuestras webs, pongamos las manos en la masa y comencemos a explicar su funcionamiento.

Cuando programamos cualquier clase, donde pretendamos aprovechar las posibilidades de configuración y personalización de los objetos, tenemos que implementar la clase Options. Para indicar esto tenemos que utilizar la palabra Implements y el nombre de la clase que deseamos implementar, en este caso "Options" (con mayúscula inicial).

El código de una clase que implementa Options podría ser como este:

var MiClaseOpciones = new Class({
   Implements: Options,
   
   //código de nuestra clase...
});

Luego, dentro de la clase que estamos programando, tenemos que indicar las opciones por defecto de la clase por medio de la propiedad "options" (con la inicial en minúscula en este caso). Estas opciones por defecto serán indicadas en formato de objeto, con pares llave, valor, pudiendo definir como valores incluso funciones. Podemos indicar las opciones por defecto justo debajo de la línea del Implements: Options.

var MiClaseOpciones = new Class({
   Implements: Options,
   
   options: {
      'opcion1': 'valor de cadena',
      'otraOpcionNumerica': 45,
      'otraOpcionFuncion': function(){
         //código de la función
      }
   },
   
   //resto del código de nuestra clase...
});

Como se puede ver, se indican tantas opciones como se desee, del tipo que necesitemos, y los valores que deben tomar por defecto.

En el constructor de esta clase de ejemplo que implementa Options recibiremos como parámetros tantos datos como sean necesarios y además una variable con las opciones de personalización que se quieran indicar para cada uno de los objetos a instanciar. Y además, muy importante, colocaremos una llamada al método setOptions() del propio objeto que se está creando, al cual le pasaremos las opciones de configuración de ese objeto recibidas como parámetro.

initialize: function(capa,opciones){
   this.setOptions(opciones);
   //resto del código del constructor
}

El método setOptions() recibe las opciones que se enviaron al constructor y se encarga de comprobar qué valores se han indicado y, si no existe alguno, marcar el valor por defecto indicado en la clase.

A este constructor podríamos llamarle con un código como este:

var miObjetoClaseMiClase = new MiClaseOpciones("capa", {
   'opcion1': 'valor xxxxxx',
   'otraOpcionFuncion': function(){
      //código de la función
   }
});

Como vemos, las opciones que enviamos para procesar con la clase Options, que estamos pasándole al constructor en el segundo parámetro, tienen varios valores en una notación de objeto. De las tres opciones de configuración de la clase miObjetoClaseMiClase, sólo se están indicando dos de ellas, luego la a omitida se le asignará el valor por defecto configurado en la propiedad options clase.

En cualquier lugar del código de la clase podremos acceder a las opciones de configuración del objeto, ya se hayan indicado al hacer el objeto o se hayan tomado por defecto. Para ello disponemos de la propiedad options, que utilizamos de esta manera:

this.options.otraOpcionNumerica

Ejemplo completo de uso de Options

Para acabar veamos un ejemplo del uso de Options para inicializar atributos en un objeto. Es un ejemplo sencillo en el que tenemos un efecto que se puede personalizar. El efecto hace un cambio en una capa por medio de la clase Fx.Morph. Nosotros tendremos una clase que tiene definidos unos valores por defecto para el efecto y que se pueden personalizar por medio de Options.

El código de la clase sería el siguiente:

var CapaEfectos = new Class({
   ///implemento Options
   Implements: Options,
   
   //defino las options por defecto
   options: {
      fondoTransformar: '#000',
      anchuraTransformar: 100,
      textoTransformar: '#fff'
   },

   //constructor que recibe las options para cada objeto que se cree.
   initialize: function(capa,opciones){
      this.capa = $(capa);
      this.setOptions(opciones);
      var myFx = new Fx.Morph(this.capa, {duration: 'long'});
      myFx.start({
         'width': [this.capa.getStyle('width'), this.options.anchuraTransformar],
         'background-color': [this.capa.getStyle('background-color'), this.options.fondoTransformar],
         'color': [this.capa.getStyle('color'), this.options.textoTransformar]
      });
   }
});

Ahora, si lo deseamos, podemos añadir el código para usar esa clase y genera efectos de varios tipos, donde definimos unas u otras opciones.

window.addEvent("domready", function(){
   $("sinopciones").addEvent("click", function(){
      var efectosSinOpciones = new CapaEfectos("micapa");
   });
   $("conopciones").addEvent("click", function(){
      var efectosSinOpciones = new CapaEfectos("micapa", {
         fondoTransformar: '#0000ff',
         anchuraTransformar: 500
      });
   });
   $("otrasopciones").addEvent("click", function(){
      var efectosSinOpciones = new CapaEfectos("micapa", {
         fondoTransformar: '#0f0',
         anchuraTransformar: 350,
         textoTransformar: '#009'
      });
   });
});

Como se puede ver, se instancian varios objetos de la clase CapaEfectos, indicando en su constructor opciones diferentes.

Podemos ver el enlace al ejemplo en funcionamiento.

Conclusión sobre Options en Mootools

Por experiencia propia puedo afirmar que la clase Options de Mootools es muy útil para producir código más personalizable y que se pueda reutilizar con mayor facilidad. Es recomendable conocer esta clase desde el principio, porque ayuda a crear código más limpio y con mayor potencial. Una vez la conoces te ayuda a pensar más "en grande" y hacer componentes que te serán útiles en un mayor número de ocasiones y durante más tiempo.

Otro ejemplo que queremos recomendar para aprender a trabajar con las Options de Mootools se puede encontrar en el artículo Campo input con explicacion dinámica. Así como otros artículos en el taller de Mootools.