jueves, enero 11, 2007

Mootools Introducción/Tutorial - moo.js

El artículo original en inglés se encuentra acá, y esta es una traducción libre, de aficionado, con los fines de practicar ingles y aprender mootools...


Lo que sigue es un tutorial instructivo de la librería mootools. La mayoría del código de los ejemplos de código te permitirán ejecutarlos haciendo click en el link "ejecuta este código" que está abajo del ejemplo. Haciendo click ahí te mostrará el código y el resultado en el plugin Firebug debugging de Firefox. Vas a necesitar tener instalado ese plugin ver algún resultado de la mayoría de los ejemplos de código.
Nota: Este ejemplo parece que solo funciona en Firefox por el momento; Lo voy a arreglar pronto.

Creación de clases

Acá esta la página de documentación de moo.js
Mootools contiene un sistema de creación de Clases y herencias robusto. Crear una nueva clase es, de hecho, muy fácil.
Clases vs funciones
Las clases te permiten:
-reutilizar y modificar código sin romper cosas que dependan de él.
-Crear un objeto autómata/independiente/dinámico (statefull) que pueda guardar información en su propio alcance.
-Crear aplicaciones más robustas a través del desarrollo de clases pequeñas, reutilizables y extendibles.
Las funciones autónomas te permiten:
-Crear colecciones de ejecuciones que deban ocurrir juntas
-Crear atajos a otras funciones que tengan una sintaxis larga
-Ejecutar algo, de hecho.
Las funciones son usadas moderadamente con mootools porque las clases son mucho mas poderosas. Si empiezas con una clase y tratas de mantener las cosas genéricas, y piensas en lo que escribes para que sea reutilizable, te vas a encontrar luego extendiendo algo que ya habías escrito y ahorrando un montón de tiempo y creando una solución mas robusta para tus problemas. Otros podrán utilizarla también.
El mismo Mootools es un gran ejemplo de como usar clases te permite crear aplicaciones complejas con menos código. El fundamento o base de mootools es el objeto clase. Casi toda otra parte de javascript en la librería extiende este objeto para crear funcionalidades mas complejas.
Una clase simple
Acá hay un una clase simple usando la sintaxis de mootools:
Javascript:
var Animal= new class ({
initialize: function(options){
this.options=options;
}
});
Animal ahora es una clase base sin funcionalidad concreta. Podemos extenderla, algo que vamos a hacer en la próxima sección. La sección "inicial" va a ser ejecutada cuando un nuevo objeto animal es instanciado, y los argumentos pasados al constructor van a ser guardados como ".options" del nuevo objeto, como esto:
Javascript:
var Gato = new animal({color: "negro"});
Arriba tenemos una instancia de la clase Animal y establecimos el color de este Animal a "negro"
Javascript:
alert(Gato.options.color); //-> Muestra "Negro"
Esto por si mismo no es muy interesante, pero cuando empezás a crear clases que heredas una de la otra, o a implementar funcionalidades en la clase base, vas a ver la potencia que tiene.
La cosa que es ilustrada acá es lo autómata/independiente/dinámico del objeto - la parte "this.options". Ahora este objeto puede recordar su estado sin tener que declarar un grupo de variables globales en la parte superior de tu documento solo para guardar información.

Agregar funciones a una clase

Las clases pueden contener funciones dentro de ellas de la misma manera que pueden contener variables (como "this.options"). Ejemplo:
Javascript:
var Animal = new Class({
initialize: function(options){
this.options = options; //Guarda tus opciones
//si las opciones especifican que Animal
//esta dormido cuando lo crean, llama dormir()
if(this.options.dormirAlInicio) this.dormir();
//sino está despierto
else this.depertar();
},
dormir: function() {
this.estaDormido= true;
},
despertar: function(){
this.estaDormido = false;
}
});
Ahora podemos instanciar nuestro animal y mandarlo a dormir o a despertarlo cuando queramos.
Javascript:
var Gato = new Animal({
color: "Negro",
dormidoAlInicio: true
});
//el gatito esta dormido, vamos a despertarlo
Gato.despertar();
alert(Gato.estaDormido);
//-> alerts "falso"

Extender las clases

Las clases pueden ser extendidas para crear funcionalidades mas complejas. En los ejemplos anteriores hemos creado un objeto (Animal) y una instancia de ese objeto (Gato), pero extendiendo la clase base podemos crear funcionalidades mas complejas mientras reutilizamos nuestro código. Ejemplo:
JavaScript:
var Animal = new Class({
initialize: function(options){
this.options = options;
this.estaVivo= true;
}
});
var Mamifero = Animal.extend({
initialize: function(options){
//esto ejecuta la función initialize() en la clase animal
//Vamos a pasar las opciones a la función initialize del padre
this.parent(options);
this.esSangreCaliente = true;
this.tienePelaje = true;
this.produceLeche = true;
},
dormir: function() {
this.estaDormido = true;
},
despertar: function(){
this.estaDormido= false;
}
});
var Raton = Mamifero.extend();
var Gato = Mamifero.extend({
initialize: function(options) {
//llama initialize de Mamifero
//traspasa todas las opciones a
//las clases Mamifero y animal
this.parent(options)
this.tieneGarras = true;
this.tieneCola = true;
this.esCarnivoro = true;
},
casaRaton: function(Raton){
Raton.estaVivo = false;
return Raton;
}
});
Bien, ahora tenemos una clase Animal, una clase Mamifero (que extiende de Animal) y las clases Gato y Raton (que extienden de Mamifero). El código anterior crea las clases pero no ejecuta nada realmente. Entonces, pongamos este código en uso:
JavaScript:
var Kitty = new Gato({
color: "Negro"
});
var Mickey = new Raton({
color: "Negro",
Pantalones: true,
zapatos: true
});
Kitty.casaRaton(Mickey);
alert(Mickey.estaVivo);
//->falso
Separando las cosas en clases de esta manera, en cualquier momento del futuro podemos implementar nuevos tipos de Animales, Mamiferos o tambien diferentes tipos de gatos y ratones. Significa tambien que si encontramos un error, por ejemplo, en la clase Mamifero, arreglarlo en ese lugar implica que no vamos a tener que arreglarlo en todas la instancias de Mamifero.

Implementar Clases

Extender clases te permite tomar una clase base (como Animal mas arriba) y crear una nueva clase con esa como plantilla (como en nuestra clase Mamifero arriba). Esto no altera la clase animal de ninguna manera.
Esto no es siempre lo que buscamos, sin embargo. A veces queres alterar la clase padre en un contexto dado. Digamos, por ejemplo, que estas usando la clase Animal de arriba, pero querés agregarle una función para tu ambiente. Extender la clase Animal para crear algo como AnimalExtended no te sirve por que vas a usar tambien Gato, Raton y Mamifero y no querés reescribirlas.
Aca es donde Class.implement resulta útil. El método implement te permite agregar funcionalidad a la clase, alterando la clase misma. No podes usar la funcion "this.parent()" como si puedes con la extensión, por que no estás creando un hijo - estas modificando la clase. Adicionalmente, si usas el mismo nombre separado como uno que ya exista, lo vas a sobreescribir. Ejemplo:
JavaScript:
//esta es la misma clase Animal de antes
var Animal = new Class({
initialize: function(options){
this.options = options;
this.estaVivo= true;
}
});
//Vamos a cambiarla para agregarle algunas funcionalidades adicionales
Animal.implement({
comer: function() {
if(typeof this.energia == "indefinido") this.energia = 0;
this.energia++;
}
});

Ahora Animal tiene una función llamada comer() que incrementa su valor de energía.
Vamos a decir que luego queremos agregar la habilidad de pasas un valor inicial en options y queremos implementarlo en la clase tambien. Usando implement, si queremos alterar la función comer, vamos a tener que escribirlo todo de nuevo:
JavaScript:
//let's let you pass in a starting value
Animal.implement({
comer: function() {
if(typeof this.energia == "indefinido") {
if(typeof this.options.iniciarEnergia != "indefinido") this.energia = this.options.iniciarEnergia ;
else this.energia = 0;
this.energia++;
}
});
Implement es usado en Mootools mayormente para extender clases que están en el grupo "Nativo" - específicamente String, Array, Function y Element prototype. Esto significa que si tiene este código:
JavaScript:
String.implement({
alert: function() {
alert(this);
}
});
Cualquier string va a heredar esa función:
JavaScript:
"hey howdy!".alert();
De esta manera, Mootools te da un montón de atajos para cosas que a menudo haces a cosas como Strings, Arrays, etc.
Hay otra manera de usar implement que es bastante útil. Podes crear una clase y luego implementarla en otra, tal cual:
JavaScript:
//Estas son las misma clases Mamifero y Gato de arriba
var Gato = Mamifero.extend({
initialize: function() {
this.parent() //llama initialize de Mamifero
this.tieneGarras = true;
this.tieneCola = true;
this.isCarnivoro = true;
},
function: casaRaton(Raton){
raton.estaVivo = false;
return raton;
}
});
var Carnivoro= new Class({
esCarnivoro = true,
energia = 0,
comer: function() {
this.energy++;
}
});
Gato.implement(Carnivoro);
Ahora todos los Gatos que crees, van a tene la funcionalidad definida en Carnivoro. Esto te permite crear porciones de código mas pequeñas que puedan ser agregados donde se necesiten.

Extender Objetos

Tal como en las clases, los objetos pueden ser extendidos. Esto permite combinar dos objetos juntos en la misma manera que los objetos Clase. Para se especifico, las propiedades de un objeto puede ser copiada en otro, tal como Class.implement() Ejemplo:
JavaScript:
var Ciudad= {
tieneEdificios: true,
tieneTrafico: true
};
var SanFrancisco = Object.extend(Ciudad, {
tieneNiebla: true,
numeroDeEdificios: 1000,
Terremoto: function() {
this.numeroDeEdificios= this.numeroDeEdificios/2;
}
});
SanFrancisco.terremoto(); //espero que tengas seguro!!!
Esto es muy similar a las clases pero no tenés la función initialize() que es ejecutada cuando creas algo y hay otras diferencias en las que no quiero profundizar.
Un gran ejemplo de cómo y porqué extender un objeto puede encontrarse en este articulo sobre this.options - valores por defecto establecidas que pueden ser sobreescritos en tus clases.

Object.Native

Object.Native() solamente toma un objeto y hace que su función .extend() haga lo mismo que la función .implement(). Realmente es usado para crear clases prototipo extensibles como String, Array, etc. Ejecutando Object.Native(String) estableces tu ambiente para que te permita extender la funcionalidad básica de Strings. No necesitas usarlo realmente, pero es útil si querés forzar alguna extensión de una clase para modificar tambien la clase base.

Etiquetas:

0 Decí algo:

Publicar un comentario

Decí algo:

Crear un vínculo

<< Casa?