Uma das coisas que vamos quer fazer em algum momento com Mootools será encadear diversos efeitos de maneira que tenhamos uma pilha de diversas ações ou mudanças na página, que sejam realizados um atrás do outro e que um não comece até que não tenha terminado o anterior. Isto em Mootools se faz com a classe Chain, que está englobada dentro da biblioteca Class.Extras.

Neste capítulo do Manual de Mootols veremos como utilizar chain sobre classes novas que nós podemos criar e em um futuro artigo explicaremos como encadear diversos efeitos de maneira sequencial com a classe FX de Mootools.

Por que Chain

Se você alguma vez testou lançar dois efeitos distintos com Mootools, ainda que estejam em linhas separadas, uma detrás da outra, na realidade o que veremos na página é como se fossem executados ao mesmo tempo. Isto acontece porque os efeitos levam um tempo para serem reproduzidos na página, geralmente configurável. Por estarem as duas linhas para a chamada de efeitos seguidas, sua execução se realiza quase no mesmo instante, pois na realidade uma chamada de um efeito não espera a finalização de outros efeitos pendentes.

Por exemplo, vejamos este código:

efeito1 = new Fx.Tween('camada', {
   property: 'width',
   duration: 1000
});
efeito1.start(400);
efeito2 = new Fx.Tween('camada', {
   property: 'width',
   duration: 1000
});
efeito2.start(50);

Este script tem dois efeitos diferentes (os dois para alterar a largura de um elemento da página com uma transição), um atrás do outro com código,mas realmente se o puséssemos em funcionamento, veríamos como são executados simultaneamente. Se quisermos esperar que termine um efeito para começar o outro, devemos utilizar as utilidades que nos dá a classe Chain.

Podemos ver o script em funcionamento em uma página à parte.

De modo que, se quisermos que sejam executados efeitos ou quaisquer ações em sequência , passo a passo e esperando que termine a ação anterior para começar a seguinte, teremos que usar Chain.

Utilização de Chain em Mootools

Chain é uma classe que por si só não faz nada, de modo que o normal será usála sobre outras classes, nas que implementaremos Chain para realizar una pilha de ações.

Assim, o mais normal será definir classes que implementem a classe Chain e assim, dentro dessas clasess teremos acesso a vários métodos que realmente pertencem a Chain.

O mais importante dos métodos é chain(), que permite fazer uma fila de funções a serem executadas. Depois teremos, entre outros, o método callChain(), que faz a chamada à primeira função na fila de chains.

Vejamos esta classe:

var ClasseChain = new Class({
   //implemento Chain
   Implements: Chain,
   
   initialize: function(){
      this.chain(
         function(){ alert("ola"); this.callChain();},
         function(){ alert("Meus"); this.callChain();},
         function(){ alert("amigos!"); }
      );
   },
   
   executaChain: function(){
      this.callChain();
   }
});

Nela foi implementado Chain e no construtor foi utilizado o método chain() para fazer uma fila de funções a serem executadas. A seguir temos um método chamado executaChain() que o que faz é chamar a primeira função que haja na fila. Além do mais, cada uma das funções da fila, menos a última, utilizam callChain() ao final de seu código para chamar a função seguinte da fila uma vez que tenham terminado.

Poderíamos colocar esta classe, e sua fila de funções com Chain, em funcionamento da seguinte maneira:

minhaClasseChain = new ClasseChain();
minhaClasseChain.executaChain();

Com isso se executarão todas as funções da fila, como podemos ver neste exemplo em uma página à parte.

No próximo artigo continuaremos explicando a classe Chain sobre efeitos criados com Fx de Mootools.