Muchas personas no conocen Mootools y, como generalmente ven más sitios o ejemplos hechos en jQuery creen que “es mejor”, pero a mi juicio Mootools es mucho mejor que jQuery. De hecho, NUNCA he visto algo que se pueda hacer en jQuery y que no se pueda hacer en Mootools (por favor si alguien sabe de algo que lo publique acá), y en teoría no tendría porqué jQuery ser mejor que Mootools en ese sentido si ambos están basados únicamente en lo que permite hacer javascript.

El gran plus de jQuery: su documentación

Me he encontrado que cuando quiero buscar algo relacionado a jQuery me es bastante fácil encontrar una solución o ejemplos, a diferencia de Mootools, que su documentación es bastante pobre (sólo lo justo y necesario). Además de eso, mootools tiene unos ejemplos online muy antiguos (de la versión 1.1) y para las últimas versiones ofrecen descargar los ejemplos o revisar su funcionalidad en una interfaz llamada jsFiddle, en la cual también se encuentran ejemplos de las demás librerías como YUI o prototype.

Por su parte jQuery ofrece cosas mucho más simples como jQueryUI o su listado de plugins, los cuales ofrecen ejemplos bastante claros, concretos y simples. Quizás por eso es tan popular jQuery, porque es mucho más fácil encontrar una librería que se ajuste a las necesidades de algún proyecto, la cual puedes implementar incluso con poco conocimiento. De todas formas Mootools no se queda atrás y ofrece Mootools Forge (que en la práctica es un repositorio de plugins) y existen sitios como JOURMOLY que tiene muchos ejemplos realmente útilies y que le “salvan el pellejo”.

El gran plus de Mootools: su funcionalidad

Vamos directo con un ejemplo: cuando tengo un link y quiero que al hacer click haga submit a un formulario simplemente pongo lo siguiente en mootools:

$('id_del_formulario').submit();

En jQuery esto no funciona. Es algo complejo de explicarselo a humanos (yo no soy programador de profesión asique tampoco me gusta explicar las cosas como programador), pero en resumidas cuentas, mootools permite seleccionar un objeto con $ y eso al final es lo mismo que decir document.getElementById. En jQuery, al usar el $ el objeto se convierte en un objeto de jQuery y si quiero hacer un submit tengo que usar una función interna que trae jQuery para dichos efectos. Al ser un objeto de jQuery aparentemente no puede interactuar con todas las funciones básicas de javascript, y eso a la larga es confuso.

NOTA: puede ser que en las últimas versiones de jQuery esto ya no suceda. Me tocó hace tiempo hacer algo como esto y últimamente no me ha tocado desarrollar en jQuery, asique si estoy mal avísenme.

Lo importante es que Mootools es más flexible en ese sentido. Es bastante fácil de implementar y tiene métodos muy simples. Como es obvio, también, hay cosas que son más simples en jQuery, asique creo que en ese sentido es mejor que cada uno decida.

Mi opinión personal

Por mi parte recomiendo Mootools. Personalmente no me gusta jQuery (es como escoger entre WordPress o Joomla, entre los cuales prefiero WordPress), y encuentro que es un poco más engorroso de entender y programar.

Personalmente uso un archivo que pesa 213k pero que contiene TODO Mootools (ya que hay un Mootools “básico” y un “core” que tiene más funcionalidades) y con eso puedo hacer todo lo que quiera en cualquier sitio. Como los .js se cargan una sola vez y luego se toman del caché el impacto que esto produce es imperceptible y además de esa manera no se llama a n archivos (como sucede en jQuery, donde se carga la base y luego se van cargando librerías para efectos, desplegables, carruseles, etc.), sino que se carga sólo 1, lo cual optimiza bastante la carga de la página.

Con esto inicio el debate por si alguien se quiere sumar…

Acá les dejo una forma automática de hacerlo, en javascript, por supuesto:

var inputs=$$('#formulario_de_contacto .text','#formulario_de_contacto textarea');
for(i=0;i<inputs.length;i++){
	inputs[i].txtOriginal=inputs[i].value;
	inputs[i].onfocus=function(){
		if(this.value==this.txtOriginal){ this.value=""; }
	}
	inputs[i].onblur=function(){
		if(this.value==""){ this.value=this.txtOriginal; }
	}
}

No hay mucho que explicar de este código: primero selecciona todos los textarea y elementos con la clase “text” (que es la que yo uso para diferenciar los inputs type=”text” de los otros inputs) y luego a cada uno de esos elementos les lee el value original y lo guarda en una variable txtOriginal, para luego decirle que cuando se ponga el cursor sobre ellos revise si tienen el mismo texto que el original o si está vacío para hacer la acción correspondiente.

El código anterior utiliza mootools para optimizar la búsqueda de los inputs de texto y los textarea dentro del código. Si no saben como se utiliza mootools, vean este tutorial.

Lo bueno es que con esta librería es posible comenzar a hacer cosas con una simple línea o función, y luego podemos ir detallando y complejizando más nuestra animación. Ahora veremos como.

Otro de los beneficios que ofrece Mootools es la posibilidad de hacer animaciones de una manera muy simple. Este es un ejemplo (suponiendo que tenemos un DIV id=”div_animable”:

$('div_animable').slide('out');

Este tipo de función se puede aplicar a cualquier objeto. Por ejemplo, si tenemos un botón, podríamos decirle que al hacerle click, se esconda un DIV específico:

<input type="button" value="Esconder DIV" onclick="$('div_animable').slide('out');" />

Los efectos más simples que ofrece Mootools son slide() y fade(). Ambos funcionan de la misma manera y son muy fáciles de implementar. La siguiente es la lista de opciones que se puede utilizar (el ejemplo está hecho con slide, pero se puede reemplazar por fade y funciona exactamente igual):

$('div_animable').slide('in');
$('div_animable').slide('out');
$('div_animable').slide('show');
$('div_animable').slide('hide');
$('div_animable').slide('toggle');

Al utilizar este tipo de efectos, se genera una animación con sus propiedades por defecto. Para modificar el comportamiento de cada una de ellas, es necesario primero definir la siguiente línea:

var miEfecto = new Fx.Slide('div_animable', {
duration: 500,
transition: Fx.Transitions.Back.easeOut
});
miEfecto.slideOut();

En este caso, primero se define un nuevo efecto y se almacena en una variable (miEfecto). Para definir este nuevo efecto, es necesario definir el tipo de efecto (Fx.Slide); al efecto definido se le deben pasar dos parámetros (separados por coma): el DIV que será animado a través de este efecto, y las propiedades que tendrá esta animación (también separadas por coma y encerradas entre llaves {propiedad1, propiedad2, etc}).

La línea siguiente ejecuta la función slideOut() a partir del efecto que generamos anteriormente. Esta puede ser ejecutada en la línea siguiente o seguida de Fx.Slide(), separada por un punto (ver siguiente ejemplo).

Las propiedades, que van dentro de los corchetes son opcionales, es decir que se pueden omitir. Una versión más simple de esto, sería algo así (sin definir propiedades):

var miEfecto = new Fx.Slide('div_animable').slideOut();

Es un poco más engorroso hacerlo de esta manera, pero a veces es necesario que podamos modificar los ajustes por defecto.

Ahora: ¿cómo hacer una secuencia de animaciones?. ¡Fácil!…claro…fácil si alguien te lo explica. Lo que se debe hacer es utilizar la función chain().

La función chain() se aplica seguida de algún efecto, y dentro de ella se debe definir el nombre de una función que queramos ejecutar, o escribir function(){ } y escribir dentro de las llaves lo que queramos que pase.

var miEfecto = new Fx.Slide('div_animable', {
duration: 500,
transition: Fx.Transitions.Back.easeOut
}).slideOut().chain(function(){
    alert("hola");
});

En caso de querer hacer varios efectos del mismo tipo, se pueden simplemente poner uno detrás de otro, después de haber definido Fx.Slide.

var miEfecto = new Fx.Slide('div_animable').slideOut().slideIn().slideOut();

La función chain() no puede ser aplicada directamente sobre fade() o slide(), es decir, que no puedes hacer esto:

$('div_animable').fade('out').chain(function(){
 alert("hola");
 });

Está enfocado a ir aprendiendo funcionalidades específicas, que nos permitan comenzar a aprovechar esta excelente librería desde el primer momento.

En este caso, hablare acerca de como seleccionar objetos según su ID, o clase, para poder aplicar acciones específicas sobre ellos.

Porsupuesto, que lo primero que deberían hacer es bajar la librería Mootools; crear una página para trabajar con ella y llamar al archivo dentro de la etiqueta HEAD para que esté disponible para usarse. Una vez hecho esto, veamos de que nos ofrece Mootools.

Seleccionar un objeto específico

Uno de los primeros beneficios que encontré al utilizar Mootools, es la facilidad y simpleza que ofrece para seleccionar objetos de una página.

Generalmente, para poder seleccionar un objeto específico se debe definir su atributo ID, y luego utilizar la siguiente función para seleccionarlo:

var miObjeto = document.getElementById('ID_DEL_OBJETO');

Uno de los problemas de esto es que hay que preocuparse de escribir correctamente la línea, respetando las mayúsculas, lo cual aveces genera errores.

La alternativa Mootools es mucho más simple:

var miObjeto = $('ID_DEL_OBJETO');

De esta manera, en la variable miObjeto quedará almacenado el objeto que seleccionamos, igual como si lo hubiésemos escogido con la función document.getElementById().

Luego de seleccionar el objeto, podemos comprobar que fue seleccionado correctamente utilizando la función alert():

alert(miObjeto);

Si seleccionamos un DIV, por ejemplo, el alert mostrará lo siguiente:

[Object HTMLDivElement]

Esto nos indica que el elemento que seleccionamos es un DIV.

Una vez seleccionado, podemos realizar muchas de las tareas que haríamos generalmente:

miObjeto.innerHTML="Este es el nuevo contenido para este div"

miObjeto.style.display="none";

Seleccionar múltiples objetos

Mootools también ofrece una alternativa a la supuesta función document.getElementsByClassName(), que se utilizaría para seleccionar todos los objetos de la página que posean una clase específica.

El problema de esta función es que no existe de forma nativa en todos los navegadores. Existen algunas alternativas pero en la librería Mootools, esta función viene de forma nativa, por lo tanto, la podremos utilizar en cualquier momento.

Al utilizar javascript sin librerías, para escoger todos los links que estan en un DIV específico, es necesario la siguiente función:

var misObjetos = document.getElementById("ID_DEL_DIV").getElementsByTagName("A");

Con esta función, en la variable misObjetos, se almacenará un array con todos los links que existan dentro del DIV especificado.

La alternativa, utilizando Mootools, sería la siguiente:

var misObjetos = $$('#ID_DEL_DIV a');

Como verán, se utiliza $$ para seleccionar múltiples objetos, y dentro del paréntesis se definen los objetos a seleccionar, igual como se haría en CSS. Esto es mucho más flexible, pues si quiero seleccionar solamente los links que tengan la clase “especial“, por ejemplo, debería hacerlo de la siguiente manera:

var misObjetos = $$('#ID_DEL_DIV a.especial');

Incluso permite escoger todos los objetos de una página que tengan una clase específica, independiente del tipo de objeto que sea, y que no se encuentren necesariamente en un DIV definido:

var misObjetos = $$('.especial');

Con la línea anterior, estaríamos guardando en la variable misObjetos, todos los objetos de la página que tengan aplicada la clase “especial“.

Con estos objetos seleccionados, es posible hacer cualquier cosa con ellos, utilizando un FOR. En el siguiente ejemplo, cambiaremos la clase de todos estos objetos a “nueva_clase“:

for(i=0;i<misObjetos.length;i++){
    misObjetos[i].className="nueva_clase";
}

Una vez ejecutado el FOR anterior, todos los objetos de la página que tenían aplicada la clase “especial“, ahora tendrán solamente la clase “nueva_clase“.

Incluso, es posible definir acciones a cada uno de estos objetos, que ocurran en eventos especiales, como “onmouseover” y “onmouseout“:

for(i=0;i<misObjetos.length;i++){
    misObjetos[i].onmouseover=function(){
        this.className="especial over";
    }
    misObjetos[i].onmouseover=function(){
        this.className="especial";
    }
}

Con el FOR anterior, definimos que, para cada objeto, al pasar el mouse sobre él, su atributo class cambie a “especial hover” (es decir, que tendrá aplicadas ambas clases). Al sacar el mouse de él, su clase volverá a ser “especial” solamente. La idea es definir por CSS que los elementos con la clase “hover” tengan algún atributo específico (negrita, cambio de color, etc).

El ejemplo anterior sería una manera práctica para hacer un menú con rollovers. Sin embargo esto es un poco absurdo en este ejemplo, pues todos los elementos son links, y los links por defecto tienen la subclase “a:hover“, que se puede definir por CSS. Sin embargo, esto se puede aplicar a todos los elementos de la página, como por ejemplo, a los DIVS, para hacer que cambien de color al pasar el mouse sobre ellos, pues los objetos que no son links, no poseen la subclase “:hover” por defecto en todos los navegadores (como siempre, léase Internet Explorer).

Cambiar las clases

Como vimos anteriormente, para cambiar la clase de un objeto, utilizamos la propiedad javascript obj.className=”xxxxx”. Si se fijan, en ese caso estamos reemplazando toda la información de clases que tenga el objeto y lo estamos reemplazando por una nueva. Por lo tanto, si un objeto requiere de dos clases para funcionar (por ejemplo, claseA y claseB), y nosotros necesitamos agregar la clase “over”, tendríamos que definir su propiedad className como “claseA claseB over”. Y luego, si queremos eliminar la clase over, tendríamos que volver a definir la propiedad className como “claseA claseB”.

Bueno, Mootools nos ofrece algo mucho más simple. Las funciones addClass() y removeClass(). Si un objeto ya tiene aplicada la clase claseA y claseB, y le decimos obj.addClass(“over”), automáticamente se va a añadir la clase a la lista. El objeto puede tener 20 clases aplicadas, y nosotros solo tenemos que decir que agregue o quite una clase específica. No será necesario escribir la lista completa de clases. Veámoslo con un ejemplo:

for(i=0;i<misObjetos.length;i++){
    misObjetos[i].onmouseover=function(){
    this.addClass(“over");
    }
    misObjetos[i].onmouseover=function(){
        this.removeClass("over");
    }
}

Lo bueno de esto, es que podemos seleccionar una lista de objetos que tengan aplicada una clase específica y podemos agregarle la clase que deseemos a cualquiera de ellos (“over “ en el caso de este ejemplo), sin tener que preocuparnos de que otras clases posee, o de que tipo de objeto. Para eso, bastaría solo con definir antes del for lo siguiente:

var misObjetos=$$(‘.destacable’);

Acabamos de decir que la variable misObjetos (que sería la que contiene la lista de objetos que queremos modificar dentro del FOR) esté compuesta por todos aquellos objetos que posean la clase “destacable”. En este caso, esta clase no necesariamente va a definir algún estilo de CSS para el objeto. Solamente la estamos utilizando para “marcar” todos aquellos objetos que serán modificados por el FOR. Independiente de las clases que tenga cada uno o el tipo de objetos que sea, se le aplicará la clase “over”, y con esto, podremos definir por CSS que cualquier objeto que tenga la clase “over” aplicada, posea alguna característica específica.