Una de las cosas que querremos hacer en algún momento con Mootools es encadenar diversos efectos de manera que tengamos una pila de diversas acciones o cambios en la página, que se realicen uno detrás de otro y que uno no empiece hasta que ha terminado el anterior. Esto en Mootools se realiza con la clase Chain, que está englobada dentro de la librería Class.Extras.

En este capítulo del Manual de Mootols veremos cómo utilizar chain sobre clases nuevas que podemos crear nosotros y en un futuro artículo explicaremos cómo encadenar diversos efectos de manera secuencial con la clase FX de Mootools.

Por qué Chain

Si hemos probado alguna vez a lanzar dos efectos distintos con Mootools, aunque estén en líneas separadas, una detrás de otra, en realidad lo que veremos en la página es como si se ejecutasen a la vez. Esto es porque los efectos llevan un tiempo para reproducirse en la página, generalmente configurable. Al estar las dos líneas para la llamada a efectos seguidas, su ejecución se realiza casi en el mismo instante, pues en realidad una llamada a un efecto no espera la finalización de otros efectos pendientes.

Por ejemplo veamos este código:

efecto1 = new Fx.Tween('capa', {
   property: 'width',
   duration: 1000
});
efecto1.start(400);
efecto2 = new Fx.Tween('capa', {
   property: 'width',
   duration: 1000
});
efecto2.start(50);

Este script tiene dos efectos distintos (los dos para alterar la anchura de un elemento de la página con una transición), uno detrás de otro en el código, pero realmente si lo pusiéramos en marcha, veríamos como se ejecutan a la vez. Si queremos esperar a terminar un efecto para comenzar el otro, debemos utilizar las utilidades que nos da la clase Chain.

Podemos ver el script en marcha en una página aparte.

Así que, si queremos que se ejecuten efectos o cualesquiera acciones en secuencia, paso a paso y esperando que termine la anterior acción para comenzar la siguiente, tendremos que usar Chain.

Utilización de Chain en Mootools

Chain es una clase que de por si no hace nada, por lo que lo normal será usarla sobre otras clases, en las que implementaremos Chain para realizar una pila de acciones.

Así pues, lo más normal será definir clases que implementen la clase Chain y así, dentro de esas clases tendremos acceso a varios métodos que realmente pertenecen a Chain.

El más importante de los métodos es chain(), que permite hacer una cola de funciones a ejecutar. Luego tendremos, entre otros, el método callChain(), que hace la llamada a la primera función en la cola de chains.

Veamos esta clase:

var ClaseChain = new Class({
   //implemento Chain
   Implements: Chain,
   
   initialize: function(){
      this.chain(
         function(){ alert("hola"); this.callChain();},
         function(){ alert("Mis"); this.callChain();},
         function(){ alert("amigos!"); }
      );
   },
   
   ejecutaChain: function(){
      this.callChain();
   }
});

En ella se ha implementado Chain y en el constructor se ha utilizado el método chain() para hacer una cola de funciones a ejecutar. Luego tenemos un método llamado ejecutaChain() que lo he hace es llamar a la primera función que haya en la cola. Además, cada una de las funciones de la cola, menos la última, hacen uso de callChain() al final de su código para llamar a la función siguiente de la cola una vez hayan terminado.

Esta clase, y su cola de funciones con Chain, podríamos ponerla en marcha de la siguiente manera:

miClaseChain = new ClaseChain();
miClaseChain.ejecutaChain();

Con ello se ejecutarán todas las funciones de la cola, como podemos ver en este ejemplo en una página aparte.

En el siguiente artículo continuaremos explicando la clase Chain sobre efectos creados con Fx de Mootools.