CriarWeb.com > Manuais > Manual de Mootools

Com o que vimos até este momento no Manual de Mootools deveríamos ter aprendido a desenvolver nossos próprios scripts simples para fazer diversos efeitos dinâmicos, ademais de utilizar a programação orientada a objetos para reutilizar o código dos componentes Mootools em outras páginas web ou em outras aplicações. Pelo menos explicamos no manual para que qualquer pessoa, com algum conhecimento de nível médio sobre Javascript, possa saber o suficiente deste framework para se desenvolver por si só e perder o medo dos habitualmente críticos programas que se geram com Mootools.

Por isso, esperamos até este ponto que as explicações tenham servido, por um lado, para clarear a programação com Mootools e por outro, para ver que não é tão complicado e está ao alcance de nossas habilidades. Entretanto, devo esclarecer que ainda nos falta bastante para poder dominar o framework Javascript, ou pelo menos ter repassado suas principais funcionalidades.

Para poder explicar tudo de uma maneira simples para que nossos conhecimentos sejam suficientes como para poder fazer exemplos interessantes, deixamos uma série de temas no caminho que também são, sem lugar a dúvidas, essenciais para poder trabalhar com Mootools. É o caso do presente artigo, no qual vamos explicar as funcionalidades avançadas dos Arrays em Mootools.

Mootools dispõe de uma série de bibliotecas, denominadas Native, que oferecem funcionalidades a distintos tipos e estruturas de dados, como os arrays, funções, números, cadeias, classes hash, etc. Estes módulos Native estendem as características básicas de Javascript sobre estes elementos e são ótimos para economizar código em nossos scripts e facilitar a programação.

Portanto, se já estamos familiarizados com os Arrays de Javascript comprovaremos que Mootools nos oferece bastantes ajudas para poder trabalhar com estas estruturas de dados. Se não estivermos familiarizados tudo bem, porque aprenderemos aqui a trabalhar com eles com as facilidades próprias de Mootools.

Primeiro, vamos ver como podemos definir um array e seus conteúdos de uma maneira cômoda, que é própria de Javascript (não faz falta Mootools para isto):

frutas = ["laranja", "banana", "uva"];

Ou um array de duas dimensões, se poderia definir assim:

opcoesPrincipais = [
   ["Portal","http://www.guiarte.com/"],
   ["Guias de Guiarte.com", "http://www.guiarte.com/guias/"],
   ["Outras secoes", "http://www.guiarte.com/secciones/"],
   ["Servicos", "http://www.guiarte.com/servicios/"],
   ["Comunidade", "http://www.guiarte.com/usuarios/"]
];

Agora vamos aprender algumas funções de Array que se utilizam bastante em Mootools. Porém antes devemos saber que os arrays em Javascript se utilizam como se fossem classes, com o qual, têm seus próprios métodos e propriedades. Mootools o que faz é definir uma série de métodos adicionais para os Arrays, uns mais úteis que outros.

Método de array each

O método each permite iterar com todos os elementos de um array, para fazer qualquer coisa que necessitemos com cada um dos itens do array. Este é um método bastante importante, porque nos permite realizar coisas com os elementos do array com muito pouco código. Por exemplo: <p>
frutas = ["laranja", "banana", "uva", "manga", "melancia"];
frutas.each(function (valor, indice){
   alert("No índice do array " + indice + " há o valor " + valor);
});

Como vemos, o array tem um método each que recebe como parâmetro uma função que vai se executar com cada um dos elementos do array. Esta função recebe como parâmetro duas variáveis, uma o valor do elemento atual do array com o que se está iterando e por outra parte, o índice do array. Por isso, dentro da função realmente não temos acesso ao array propriamente dito e sim ao valor e ao índice unicamente do elemento que estamos iterando.

Este código pode ser visto em uma página à parte.

Pois bem, each, recebe uma segunda variável, chamada "bind", que é opcional. Se desejarmos, por meio dessa variável podemos enviar um objeto que poderá se utilizar dentro da função de each com a referência "this". Esta variável this se utiliza em ambientes de programação orientada a objetos, para se referir ao objeto que está recebendo um método. Nós já explicamos um pouco para que servia o bind no artigo Utilização de bind() nos eventos Mootools , a filosofia é a mesma, porém ainda assim vamos mostrar um exemplo no qual seria interessante utilizar o bind nos each de array.

var Somatorio = new Class({
   initialize: function(arrayNumeros){
      this.suma = 0;
      arrayNumeros.each(function(valor){   this.suma += valor;}, this);
   }
});

numeros = [20, 2, 3, 5, 10, 5];
meuSomatorio = new Somatorio(numeros);
alert (meuSomatorio.soma);

Neste código criamos uma classe somatório, que recebe um array no construtor e soma os valores desse array, salvando o resultado em uma propriedade "soma". Como podemos ver, no construtor se utiliza each para percorrer os valores do array. O método each recebe dois parâmetros, um é a função que tem que se executar para cada valor e outro o mencionado bind, que neste caso seria this, para que dentro da função do each se possa acessar a este mesmo objeto que se está construindo.

Sendo assim, dentro da função do each, quando fazemos esta instrução:

this.soma += valor;

Mootools sabe que há em this, porque se passou como parâmetro ao próprio each ao ser invocado.

Outra coisa que podemos ver aqui é que a função enviada como parâmetro ao each recebe só o parâmetro "valor", já que o parâmetro índice não o necessito, porque não penso fazer nada com os índices.

Podemos ver este segundo exemplo em funcionamento.

Sem dúvida, o método mais interessante dos arrays é each, porém existem outros muitos métodos muito úteis para trabalho com arrays. Vamos ver alguns exemplos.

Método include de Array

Este método, que se invoca sobre um Array, recebe um valor e o inclui dentro do array, se é que não estava antes. Ou seja, primeiro comprova se esse valor existe dentro do array e se não existe logo cria um novo campo no array e coloca esse valor nele.

Por exemplo, podemos ver este código, para ilustrar seu funcionamento:

capitais = ["Madri", "Paris", "Lisboa"];

capitais.include("Brasilia");
//agora o array tem os elementos Madri", "Paris", "Lisboa", "Brasilia"

capitais.include("Madrid")
//Madri já estava, logo não inclui nada

capitais.each(function (valor){
   alert(valor);
});

Podemos ver este exemplo em uma página à parte

Método indexOf de Arrays Mootools

Este método serve para saber o índice que ocupa um determinado elemento em um array, se é que existe. O método devolve o índice onde se encontre o valor que receba por parâmetro e -1 em caso que esse elemento não exista.

["Mercurio", "Terra", "Venus"].indexOf("Venus")
//isto devolve 2

["Mercurio", "Terra", "Venus"].indexOf("Marte")
//neste caso indexOf devolve -1

Método extend de Array

Este método serve para adicionar todos os elementos de um array a outro array, sem olhar seus conteúdos e sem comparar se estavam ou não antes esses conteúdos no array onde se adicionarão.

Podemos ver extend em funcionamento no seguinte código:

capitais = ["Madri", "Paris", "Lisboa"];
novasCapitais = ["Buenos Aires", "Madri"];

capitais.extend(novasCapitais);
//agora o conteúdo do array é "Madri", "Paris", "Lisboa", "Buenos Aires", "Madri"

capitais.each(function (valor){
   alert(valor);
});

Como se pode ver o array que recebe o método extend se atualiza com os valores contidos no array que se recebeu por parâmetro em extend.

Pode-se ver este exemplo em funcionamento.

Conclusão sobre Native Array em Mootools

O certo é que estas são só algumas das utilidades adicionadas por Mootools aos Arrays, pois têm outra série de métodos interessantes para fazer coisas como obter o último valor de um array, obter um valor aleatório, limpar um array, filtrá-lo, esvaziá-lo, etc.

Na documentação de Mootools podemos encontrar mais detalhes sobre os métodos existentes para Array e exemplos de uso. Nós, talvez mais adiante ampliemos estas informações ou então, as deixaremos para o momento que as utilizemos em exemplos.