Contenido

Aprendiendo a usar MooTools (I)

4 Dic

+ 12

El otro día Dani, de Icebeat nos hizo un tutorial de ajax con MooTools, con el que nos mostraba lo fácil que es usar MooTools y lo potente que puede llegar a ser. Viendo este potencial he decido ponerme en mi tiempo libre a probar y aprender a utilizarla, y como tengo muy mala cabeza iré haciendo una serie de tutoriales de lo que vaya aprendiendo a hacer con ella.

Introducción

Mootools, es una librería desarrollada en Javascript con la que la tarea de programar la parte funcional de una aplicación web se convierte en una tarea más fácil, potente y cómoda. Para ello MT (MooTools) nos ofrece una serie de objetos con los que podremos trabajar más cómodamente. Además de esta serie de objetos, disponemos de facilidades para crear nuestro propios objetos y sobrecargarlos con las funcionalidades que MT nos ofrece.

¿Qué es una clase?

En programación orientada a objetos se refiere a entidades que combinan propiedades y comportamiento.

Un animal tiene propiedades (peso, estatura, color, numero de ojos, número de patas,…)

Un animal tiene un comportamiento (dormir, comer, cazar, …)

por lo tanto, un animal puede ser una clase.

¿Qué es un objeto?

Llamamos objeto a la definición de unas propiedades y comportamiento de una concreta.

Dentro de la clase Animal, tenemos un Perro.

Un perro recibe todas las propiedades y comportamientos generales de un animal y además alguna extra que lo distingue como único.

De este modo, hemos visto que podemos generar infinitos objeto partiendo de una clase inicial. Al igual que hay millones de animales. Una vez visto esto, podemos empezar a movernos por MT.

Creación de una clase

La creación de una clase es similar a lo que Dios hizo cuando decidió crear los animales,(¿estoy comparando a los programadores con Dios?), decidió que características y comportamiento tendrían los animales que él iba a crear. Primero empezó con las características, – que si altura, peso, nombre, color de ojos,…- luego con el comportamiento, – comerá para fortalecerse, dormirá para recuperar energía,…- y entoces se sentó frente al ordenador y comenzó a picar código.

var Animal = new Class({
    patas: 4,
    initialize: function(){
	   alert("Buaaa!! Buaaa!!"); //Llanto de bebé
    },
    comer: function() {
	alert("Comemos");
 	altura++; //Crece
	peso++; //Engorda
    }
});

No será un gran animal, pero nos servirá para entender como crear clases. Con este ligero ejemplo hemos creado un Animal de 4 patas que al nacer lloró y cada vez que come aumenta su altura y su peso.

Ahora nos queda definir objetos de esta clase para poder diferenciarlo del resto de los objetos de la misma clase.

var Koala = new Animal('noinit');

De esta forma estamos creando el objeto Koala con las propiedades de la clase Animal, usamos el atributo noinit para indicar que no debe inicializarse este objeto. Aunque tambien podríamos haberle indicado algún parametro como por ejemplo el nombre, la raza,….

Extendiendo clases 

Una vez creada la clase Animal vemos que es demasiado genérica y que engloba a demasiados tipos de animales, mamiferos, oviparos, verterados, invertebrados,… entonces debemos concretar más, para eso creamos subclases que se extienden desde otra clase aún mayor. Como en este caso Animal es una clase bastante grande bajaremos hacia abajo para concretar más aún el tipo de animal que queremos crear. 

var Animal = new Class({
    initialize: function(message){
        alert(message);
    }, 
    comer: function(comida) {
	alert("Ñam Ñam");
    }
});
 

var Mamifero = Animal.extend({
    initialize: function(message){
        this.parent(message);
    },
    amamantar: funcion(numero_de_hijos){
	...
    }
});

Como podemos ver un Mamifero se extiende desde la clase Animal, esta clase poseerá las propiedades de la clase madre y además algunas propias. En este caso, todos los animales comen, de una forma o de otra, pero solo los mamiferos amamantan a sus crías, así que este comportamiento será exclusivo de esta subclase de animales.

Y aún podemos concretar más, ya que entre los mamiferos hay tambien animales muy distintos entre sí.

var Gato = Felino.extend({
    initialize: function(message){
        this.parent(message);
    }
});

Antes de llegar directamente a Gato, habremos pasado por Felino que se trata de una subclase de mamifero. Un gato posee todas las propiedades y métodos (comportamiento) de un Animal Mamifero Felino, y además algunas particularidades que lo diferencian de una pantera.

De esta forma podré crear a mi gato Angora llamado Mikan de la siguiente forma.

var Mikan = new Gato();

Implementando

Mi gato es como es, una bola de pelos que se pasea por casa como si fuera el dueño. Pero una pequeña mutación puede hacer que aparezca una nueva funcionalidad que antes no tenía, y que afecte a todos los objetos de una misma clase. Para simular esto usaremos la posibilidad de modificación de clases que MT nos ofrece.


Gato.implement({
    volar: function() {
	this.margin_bottom++;
    }
});

Desde este momento, mi gato puede volar!! Mejor no lo pruebo 😀

Clases Nativas

Ahora volviendo a la programación y dejando a mi pobre gato en paz, ya tiene suficiente conmigo xDD, podemos aplicar todo esto a un lenguaje de programación, en este caso a Javascript que ya posée una serié de objetos y clases que podremos modificar y alterar para conseguir adaptarlo a nuestras necesidades.

String.extend({
    alert: function(){
        alert(this);
    }
});

'hello'.alert();

De esta forma hemos añadido la funcionalidad de alert al objeto String, pudiendo llamarlo desde cualquier parte del código despues de su modificación. Esto en sí no es más que una implementación bonita y más compleja del método prototype de Javascript.

Elementos

En la estructura de nuestra página web tenemos definidos una serie de elementos a modo de tags que conforman el diseño básico de la aplicación, estos elementos pueden ser diferenciados por un id único, una clase o cualquier otro atributo. A diferencia de jQuery, MooTools no aporta la robustez del xPath para buscar entre sus elementos, aunque creo que es algo que acabarán poniendo por lo útil que és.

Para poder dar con un elemento concreto usaremos la funcion $(), una función muy conocida en el lenguaje y que nos devolverá la referencia al objeto que estamos buscando, siempre y cuando este exista en la página.

$('myElement').addClass('className');

Podemos usarlo de dos formas, usando directamente el retorno como referencia y concatenándole la propiedad o método, o por lo contrario, la forma más correcta.

var el = $('myElement');

el.addClass('posting');
el.removeClass('posting');

De esta forma únicamente realizamos la busqueda del elemento una sola vez, lo tratamos lo que queramos sin tener que volver a solicitar la referencia del elemento.

Concatenando

MT, permite la cocatenación de funcionalidades a un elemento, de modo que podemos realizar varias tareas consecutivas con una única busqueda.

$('myElement').addClass('posting').setStyle('position', 'absolute');

 Cuando digo consecutivas, me refiero a que una vez encontrado el elemento myElement, se le añadirá la clase posting y posteriormente se le asignará el atributo position a absolute.

Además como hemos visto antes, podemos añadirle funcionalidades extra al clase Element de MT, aportando funcionalidades y atributos que podemos necesitar en nuestras aplicaciones.

Element.extend({
    hazloRojo: function(){
        this.style.color = 'red';
    },

    hazloAzul: function(){
        this.style.color = 'blue';
    }
});

De esta forma ampliamos los métodos de la case Element y le damos la funcionalidad de volver rojo o azul el texto de un elemento.

$('myElement').makeRed();

Efectos

Una de las maravillas de MT son los efectos, que al estar formados como metodos del propio objeto facilitan su utilización y sobretodo su comprensión. Una de las bazas para triunfar en informática es hacer las cosas fáciles de comprender, al ser cómodo de usar la gente lo usa, y los chicos de Mad4milk lo saben bastante bien. Simplemente extendiendo la clase Element disponen de los efectos de una forma bastante lógica, veamos un ejemplo.

var myEffect = $('myElement').effect('height', {duration: 1000, transition: fx.linear});

Asignamos a la variable myEffect el resultado de la aplicación de un efecto con la altura del elemento myElement, que dura 1000 milisegundos y la transición es lineal. De esta forma tán clara y fácil de comprender aplicamos un efecto a cualquier objeto que deseemos. Ahora solo nos queda ejecutarlo.

myEffect.custom(10, 100);

De esta forma lanzaríamos el efecto sobre nuestro elemento, los parametros indicarán la posición inicial (10) del efecto y la final (100). O tambien podemos concatenerlo como lo hemos visto antes.

var myEffect = $('myElement').effect('height', {duration: 1000, transition: fx.linear}).custom(10, 100);

Aunque de esta forma no es tan fácil de comprender.

Los efectos no son más que una adaptación de Moo.fx a esta librería,  de modo disponemos del objeto Fx y sus dos métodos para aplicar uno o varios efectos a la vez. Para diferenciar han optado por Style para aplicar un único efecto a un elemento y su plural, Styles para la aplicación de varios efectos.

var myFx = new Fx.Style('myElement', 'opacity').custom(0,1); //display a transition from transparent to opaque.
                    var myEffects = new fx.Styles('myElement', {duration: 1000, transition: fx.linear});
myEffects.custom({
   'height': [10, 100],
   'width': [900, 300]
});

MooTools es mucho más y espero ir viendolo poco a poco, ya ire escribiendo posts sobre el tema.

  • juer q completito hijo! a ver si lo cojo con tiempo y me pongo a leerlo con detenimiento porque es esto estaba yo mu verde 😛

    un saludooo

  • Genial! Y yo que andaba liado con MooTools, esto es de gran ayuda, se va para mi del.icio.us.

    Gracias!

  • Si tuvieras que elegir una librería javascript para desarrollo principalmente de aplicaciones. validacion de formularios, ocultar y mostrar algunos divs , ordenar tablas, presentar algunos htmls via ajax, cambiar estilos en función de respuetas del server, utilizar autocompletado, etc.
    Cual elegirías?
    He pensado en jquery por las opciones vistas en http://www.eyecon.ro/interface/ y me gusta la documentación pero recurro a tus conocimientos para saber si mootools es más adecuado para esta tarea.

    saludos

  • ¿A mi juicio? jQuery me enamoró cuando vi que podía utilizar xpath para realizar las busquedas de elementos, aunque por ello tenga que perder algo de velocidad de ejecución.

    Aún es un poco pronto para compararlo con MooTools, pero lo poco que he visto me ha gustado mucho.

    Todas las librerías más pronto o más tarde hacen las mismas funciones y al final debemos elegir el que nos sea más cómoda de usar día a día. Y en algunos casos quizas nos sea interesante plantearnos si necesitamos una librería o por lo contrario necesitamos únicamente una o dos funcionalidades, de esta forma quizas sea mejor implementarlas que usar una librería de la que usaremos un 10% o menos…

    Por decir una, hoy por hoy MooTools, en cuanto a cántidad de efectos y funcionalidad.

  • cuando dices «La creación de una clase es similar a lo que Dios hizo cuando decidió crear los animales,(¿estoy comparando a los programadores con Dios?)…» haces es referencia a que DIOS mismo es un programador y nosotros (los programadores) lo imitamos como mortales que somos 🙂

  • tengo un problema con internet explorer, al desabilitar los controles el texto se convierte en un orroroso color del sistema operativo para objetos 3d, ¿crees que mooTools o alguna otra librería me pueda ayuda a cambiar esto? ya que con Css no se puede.

    Por cierto es muy entretenido e interesante tu articulo.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.