comparte el articulo 

Instancias de clases y manejo de objetos con MooTools

Actualizado el 07/05/2012 < > 0 Comentarios

Resumen: En este artículo explicamos la manera de crear instancias de clases en MooTools con el fin de tener un mejor manejo de estado en las acciones.

Una de las principales razones por las que escoge usar un framework es la facilidad en su manejo, ya que podemos realizar cientos de tareas comunes con tan solo unas cuantas líneas de código.

Al utilizar frameworks de JavaScript, como jQuery o Mootols, es común recurrir a métodos encapsulados y atajos que nos permitan realizar alguna clase de acción de manera sencilla, sin tener que instanciar cada objeto o clase que necesitemos, y sin necesidad modificar alguna línea en el código base de la librería para llevar acabo una función.

MooTools no es la excepción a esta característica, por lo que existen muchas clases que cuentan con atajos sencillos y fáciles de recordar para el usuario, entre ellos encontramos “.load()”, “.morph()”, “.tween()”, entre otros, que al llamarlos cumplen con su función específica.

Sin embargo existe la posibilidad de que tu como diseñador o desarrollador web necesites realizar alguna alteración más específica en las propiedades de la clase, para ello se puede optar por crear instancias de las clases mediante objetos y obtener más control.

Instanciar una clase con Mootools

Con el propósito de ejemplificar, en este artículo utilizaremos la función “tweet” de MooTools, ya que es bastante sencilla y de uso muy común. Esta función se encarga de agregar efectos de animación al estilo CSS de los elementos a los que se les aplica.

Generalmente esta función es llamada al concatenar su atajo al selector del elemento que recibirá la acción, “$(elemento).tweet()”. Por defecto puede recibir tres parámetros, el primero de ellos para especificar la propiedad CSS que se verá afectada, el segundo indica el valor inicial y el tercero el valor que tendrá la propiedad al final de la transición.

// modifica la altura de 'miElemento' de 20px a 200px:
$('miElemento').tween('height', [20, 200]);

Esto es de gran ayuda si queremos realizar simplemente la transición, pero si queremos lograr más control sobre las propiedades, tenemos que hacer uso de la clase que define esta función. Esta clase lleva por nombre “Fx.Tweet” y la manera de instanciarla es la siguiente:

var tweenLaWebera = new Fx.Tween('miElemento');

Ahora la variable “tweenLaWebera” es un objeto que ha obtenido la funcionalidad de la clase Tween, por lo que ahora podemos hacer llamadas a las funciones “set” y “start”. Para llamar una de ellas basta con hacer esto:

var tweenLaWebera.start('height', 200);

Esta es uno de los principios básicos de MooTools, la creación de instancias de clase busca manejar su estado llamando métodos y estableciendo las propiedades de los objetos.

Tomemos el primer ejemplo que hicimos con el atajo “tweet”, ahora vamos a representarlo utilizando una instancia de la clase:

var tweenLaWebera = new Fx.Tween('miElemento',{
  transition: 'bounce:out',
  duration: 1000
});

$('miElemento').addEvents({
  focus: function(){
    tweenLaWebera.start('height', 200);
  },
  blur: function(){
    tweenLaWebera.start('height', 20)
  }
});

Como se puede apreciar ahora el efecto es controlado por nosotros, y definimos en que momento se mandará llamar.

Lo que hicimos en el código fue básicamente crear el objeto, indicarle el tipo de transición que realizaremos y la duración de ésta, después mandamos llamar a la función “start” de dicho objeto cuando el elemento recibe dos diferentes eventos, cuando se encuentra enfocado el elemento aumentará su altura a 200 y cuando quitemos el enfoque de él su altura regresará a ser de 20.

Opciones de una clase

Como pudimos apreciar en el último ejemplo, la clase “Fx.Tween” obtiene dos argumentos en su constructor, el primero de ellos es el elemento al cual vamos a aplicar el efecto, mientras que el segundo es un objeto definido con varias propiedades u opciones.

Este segundo parámetro es el que se encarga de decirle a la clase como comportarse y para definirlo basta con establecer una variable en JavaScript compuesta por valores de tipo “propiedad:valor” o simplemente poner esos valores dentro de la misma creación del objeto.

//Alternativa 1
var opciones = {
  property: 'height',
  duration: 750,
  transition: 'bounce:out'
};

var tweenLaWebera = new Fx.Tween('miElemento', opciones);

//Alternativa 2
var tweenLaWebera = new Fx.Tween('miElemento',{
  property: 'height',
  duration: 750,
  transition: 'bounce:out'
});

Incluso podemos utilizar distintas opciones para cambiar el comportamiento de cada paso del proceso, en el ejemplo anterior manejamos una transición de tipo “bounce:out”, suponiendo que quisiéramos modificar este la segunda parte de este efecto, es decir cuando el elemento se vuelve a encoger, podemos realizar algo como esto:

var tweenLaWebera = new Fx.Tween('miElemento',{
  transition: 'bounce:out',
  link: 'cancel',
  duration: 1000
});

var crece = function(){
  tweenLaWebera.options.transition = 'bounce:out';
  tweenLaWebera.start('height', 200);
};

var encoge = function(){
  tweenLaWebera.options.transition = 'quad:in:out';
  tweenLaWebera.start('height', 20);
};

$('miElemento').addEvents({
  focus: crece,
  blur: encoge
});

De esta manera al momento de crecer el elemento utilizará la transición “bounce:out” mientras que al encogerse de nuevo utilizará “quad:in:out”, esto logrará una animación personalizada.

Eventos en Mootools

En algunas ocasiones puede que deseemos realizar un proceso al momento de que el efecto empieza o finaliza, MooTools cuenta con eventos personalizados para lograr este propósito.

La clase Fx.Tween hereda todo sus eventos de Fx por lo que podemos utilizar las acciones “start” y “complete” para disparar nuestros procesos.

Por ejemplo, si quisiéramos cambiar el color del texto contenido en un textarea al momento de enfocarnos en él, pero sólo si la transición ha terminado, entonces tendríamos llamar a la opción “onComplete” dentro de la instancia.

Esto nos da como resultado un código como el siguiente:

var tweenLaWebera = new Fx.Tween('miElemento',{
  transition: 'bounce:out',
  duration: 1000,
  link: 'chain',
  onComplete: function(){
    tweenLaWebera.element.toggleClass('focused');
  }
});

var crece = function(){
  tweenLaWebera.options.transition = 'bounce:out';
  tweenLaWebera.start('height', 200);
};

var encoge = function(){
  tweenLaWebera.options.transition = 'quad:in:out';
  tweenLaWebera.start('height', 20);
};

$('miElemento').addEvents({
  focus: crece,
  blur: encoge
});

Como ya mencionamos, en esta ocasión únicamente estamos utilizando la clase “Tweet” para ejemplificar, si requieres utilizar otra clase puedes recurrir a la documentación de MooTools para saber que opciones puedes pasar como parámetro de la instancia.

Publicado el 08/05/2012, última actualización 07/05/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras