Executar funções em determinada ordem, como filas de requisições, através de uma classe. Resumindo, é isso o que faz a classe Chain, da Mootools, e nesse post veremos como funciona e também como implementar essa funcionalidade em suas próprias classes.

Seqüenciando Funções

Para criar uma seqüência de funções, basta instanciar a classe Chain. Após isso, já podemos adicionar funções à seqüência para podermos chamá-la quando necessário.

Adicionamos funções à uma seqüência através do método Chain.chain, passando como parâmetro a função a ser adicionada à seqüência.

var myChain = new Chain();
myChain.chain(function() {
	alert("Primeira Função");
});
myChain.chain(function() {
	alert("Segunda Função");
});

O método Chain.callChain é quem chama a próxima função da seqüência. Quando o método é executado, a função é executada e então removida da seqüência.

myChain.callChain(); // "Primeira Função"
myChain.callChain(); // "Segunda Função"

Caso necessário, podemos limpar todas as funções de nossa seqüência através do método Chain.clearChain.

Implementando em Classes

Obviamente, Chain é muito mais útil quando usado dentro de uma função. Classes não deixam de ser uma função, e possuem muito mais poder. É nelas onde a utilização de Chain acontece na própria Mootools.

Após a implementação de Chain em alguma classe, podemos utilizar seus métodos.

var myClass = new Class({
	"initialize": function() {},
	"execute": function() {
		this.callChain();
		if(this.chains.length > 0) this.execute();
	}
});
myClass.implement(new Chain);
var myChain = new myClass();
myChain.chain(function() {
	alert("Primeira Função");
});
myChain.chain(function() {
	alert("Segunda Função");
});
myChain.execute();

Como no exemplo acima, também podemos utilizar a variável Chain.chains, que é o array que contém todas as funções na seqüência. Não é necessário se preocupar muito com ele, já que a classe faz todo o necessário. O utilizei acima somente para não criar um loop infinito.

Essa classe também já é implementada na utilização de efeitos, para encadear vários efeitos subseqüentes. Também muito útil para se criar uma fila de requisições Ajax, ou algo do gênero. Vou ficando por aqui, até!

Posts Relacionados

• Mootools – Eventos
• Mootools – Classes
• Mootools – Options
• Ajax com a Mootools
• Funções em Diferentes Escopos

O que faz?

A classe Options define as opções passadas pelo usuário para alguma classe. Essa definição é feita sobrescrevendo os valores padrão (caso esses sejam definidos pelo usuário) e os mantendo quando nenhuma opção correspondente é passada.

Lógico, nada muito espetacular. Isso poderia ser feito através da função $merge, da própria Mootools. Mas há mais que isso. Além de definir opções, a classe Options também vasculha-as em busca de opções que comecem com “on”, e automaticamente adicionam-as como um evento, caso a classe Events esteja implementada. É mais que apenas um $merge disfarçado…

Implementando

Mais uma vez, antes de podermos utilizar essa classe extra, devemos implementá-la em nossa classe. Novamente, utilizamos o método Class.implement.

Caso você queira utilizar o suporte a eventos, também implemente a classe Events, na mesma declaração.

myClass.implement(new Options, new Events);

Definindo Opções

Antes de tudo, é necessário definir as opções que serão utilizadas por padrão. Essas opções padrão devem estar em this.options, sendo this a nossa classe.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0
	},
	"initialize": function() {}
});

Para fazer a “escolha” das opções, basta utilizar o método Options.setOptions, levando como parâmetro as opções que devem sobrescrever as opções padrão. Após a chamada ao método, todas as opções estarão disponíveis em this.options. Se o usuário definir opções que não estão definidas como padrão, elas também serão adicionadas.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0
	},
	"initialize": function(options) {
		this.setOptions(options);
	}
});
var mySlideShow = new SlideShow({
	"slides": [$("slide-1"), $("slide-2")],
	"wrap": true
});
mySlideShow.options["startSlide"]; // 0
mySlideShow.options["wrap"]; // true, também foi adicionada

Definindo Eventos

Não há diferença quanto a adicionar opções comuns ou eventos, os dois são adicionados da mesma maneira.

var mySlideShow = new SlideShow({
	"slides": [$("slide-1"), $("slide-2")],
	"wrap": true,
	"onStart": function() {}
});

No caso de eventos, não é necessário definir uma opção padrão, já que os eventos são chamados apenas se estiverem definidos, não causando erros. Caso você considere necessário, pode-se usar Class.empty como padrão. Class.empty é apenas uma função vazia, apenas para não precisarmos nos preocupar em definir algo a ser executado.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0,
		"onStart": Class.empty
	},
	"initialize": function(options) {
		this.setOptions(options);
		this.fireEvent("onStart", this.options.startSlide, 10);
	}
});

Assim como as outras classes, a própria biblioteca faz grande uso de Options. É o espírito da reutilização, tanto na própria biblioteca quanto para os desenvolvedores. Até a próxima!

Posts Relacionados

• Mootools – Eventos
• Mootools – Classes
• Mootools – Chain
• Ajax com a Mootools
• Mootools – Menu Sanfona

A classe Events permite que você defina eventos para suas próprias classes. Esses eventos podem ser chamados a qualquer momento, e também podem ser criados quantos eventos forem necessários.

Um evento pode receber qualquer nome, mas considera-se uma boa prática criar eventos que comecem com “on”, como “onClick”, “onStart”, “onEnd”… O “on” é requerido apenas se você desejar utilizar eventos juntamente com a classe Options (pretendo escrever sobre ela também).

Implementando

Para podermos utilizar a classe Events, primeiro é necessário implementá-la na classe em que se deseja utilizá-la. Isso é feito através do método Class.implement. Veja:

var SlideShow = new Class({
	"initialize": function() {}
});
SlideShow.implement(new Events);

Chamando Eventos

Após a implementação, ainda temos que fazer as chamadas aos eventos. Para isso, utilizamos o método Events.fireEvent, que agora pode ser chamado do escopo da classe, ou seja, this.fireEvent. Esse método recebe os seguintes parâmetros:

• type: O tipo do evento (“onClick”, “onDrag” ou qualquer outro)
• args: Argumentos a serem passados à função. Pode ser apenas um argumento ou um array contendo vários.
• delay: Tempo, em milissegundos, que o evento deve esperar para ser disparado.

var SlideShow = new Class({
	"initialize": function() {
		this.fireEvent("onStart", null, 10);
	},
	"nextSlide": function() {
		this.currentSlide += 1;
		this.fireEvent("onChangeSlide", this.currentSlide, 10);
	}
});

Definindo Eventos

Para definir funções a serem executadas em determinado evento, utilizamos o método Events.addEvent. O método recebe como parâmetros o tipo do evento e a função que deve ser executada.

var mySlideShow = new SlideShow();
mySlideShow.addEvent("onStart", showSplashScreen);

Note que os eventos podem ser adicionados tanto na definição da classe quanto em uma de suas instâncias, como fizemos acima.

Eventos podem ter muita utilidade, e a própria biblioteca também faz bastante uso deles, como acontece nas classes Ajax e Fx. Basta ter criatividade. Até a próxima!

Posts Relacionados

• Mootools – Options
• Mootools – Chain
• Mootools – Classes
• Ajax com a Mootools
• Scroller Made in Mootools

Por que Classes?

Classes têm algumas vantagens sobre funções independentes. Podemos modificar e reusar suas funcionalidades sem precisar modificar o código original, criar objetos que armazenam informações dentro de seu próprio escopo e também utilizar métodos relacionados ao objeto. Além disso, com classes é possível utilizar menos código em mais situações.

Um bom exemplo da implementação de classes é a própria Mootools. Boa parte do que há na biblioteca é baseado em classes, estendendo-as, modificando-as e herdando-as. Funções não são muito utilizadas pela Mootools, pois o poder da utilização das classes é muito maior.

Definindo Classes

Para definir classes com a Mootools, utilizamos o construtor Class. O construtor leva como parâmetros os métodos e atributos da classe, através de uma literal de objeto.

var Vehicle = new Class({
	"initialize": function(features) {
		// Salvando as características no escopo do objeto
		this.features = features;
		this.position = 0;
	},
	"goForward": function(distance) {
		this.position += distance;
	},
	"goBackward": function(distance) {
		this.position -= distance;
	}
});

Na classe acima, definimos três métodos: initialize, goForward e goBackward. O método initialize deve estar presente em cada definição de classe, por ser o método que é chamado quando a classe é instanciada.

Após termos criado nossa classe, podemos instanciá-la sempre que necessário.

var myVehicle = new Vehicle({"color": "red"});
// Utilizando os métodos do objeto
myVehicle.goForward(100);
// Acessando propriedades
myVehicle.position; // 100

Estendendo Classes

Como em outras linguagens orientadas a objeto, as classes podem ser estendidas para criar funcionalidades mais específicas. No caso da classe Vehicle, podemos estendê-la para criar tipos de veículos específicos, como carros e motos. Para isso, usamos o método Class.extend, levando como parâmetro os novos métodos e propriedades que a classe deve conter.

var Car = Vehicle.extend({
	// O novo método de inicialização
	"initialize": function(features) {
		// Inicializamos a classe pai dentro da classe atual
		this.parent(features);
		this.wheels = 4;
		this.gear = 0;
	},
	"gearUp": function() {
		if(this.gear < this.features.gears) this.gear++;
	},
	"gearDown": function() {
		if(this.gear > -1) this.gear--;
	}
});
var Motorcycle = Vehicle.extend({
	"initialize": function(features) {
		this.parent(features);
		this.wheels = 2;
		this.gear = 0;
	},
	"gearUp": function() {
		if(this.gear < this.features.gears) this.gear++;
	},
	"gearDown": function() {
		if(this.gear > 0) this.gear--;
	}
});

Através do código acima, criamos duas novas classes baseadas em Vehicle, Car e Motorcycle, cada uma com suas características específicas, mas herdando os métodos da classe pai.

Assim como podemos criar tipos específicos de veículos, também podemos criar tipos específicos de carros e motos, bastando estender essas duas classes. Não há limite para extensões.

Além de estender outras classes, também é possível estender a própria classe, implementando novos métodos. Note que não é necessário recriar o método Class.initialize, já que não o modificamos, apesar de ser possível se necessário.

var Car = Car.extend({
	"horn": function() {
		this.soundHorn = true;
	}
});

Implementando Novos Métodos

Ao estender classes, o método Class.extend cria uma nova cópia da classe, não alterando-a de maneira alguma. Isso é facilmente percebido, já que, em nosso exemplo, myVehicle.gearUp não funciona, pois a classe não foi modificada quando criamos as outras extensões.

Para modificar a classe sem criar uma cópia sua e sem precisar modificar código algum, a Mootools usa o método Class.implement, recebendo como parâmetros os métodos e propriedades a serem implementados.

Modificando o último exemplo, poderíamos trocar Car.extend para Car.implement, eliminando a cópia desnecessária que criamos.

Car.implement({
	"horn": function() {
		this.soundHorn = true;
	}
});

Vale lembrar que utilizando Class.implement não temos acesso ao método this.parent, já que não estamos criando uma outra classe, somente implementando propriedades. Nesse caso, não há classe pai.

O uso de classes permite muito mais do que reutilização de código. Poupa-se tempo tanto no desenvolvimento quanto no uso do código e esse uso torna-se muito mais intuitivo, já que aproxima a programação de objetos reais. Por essas e outras que sou adepto dessa maravilhosa biblioteca. Até a próxima!

Posts Relacionados

• Mootools – Eventos
• Mootools – Chain
• Mootools – Options
• Ajax com a Mootools
• JavaScript Orientado a Objetos – Parte 3