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.
7 comentarios, 5 referencias
+
#