Puedes ver el demo del tutorial aqui o descarga el código fuentes desde aqui.

Éste screencast es el primero de muchos mas, la idea es que de aquí en adelante todos los tutoriales sean en video, creo que es mas sencillo verlo que leerlo, cualquier duda o comentario con respecto al tutorial pueden hacerlo en los comentarios.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

En este artículo quiero mostrar como hacer mensajes, tablas y ventanas, con esto pretendo dar una introducción a esta fantástica librería y así mostrar la facilidad en el desarrollo de software.

Primeramente es necesario mencionar que Ext Js originalmente surgió como una extensión de la librería de Yahoo, con esto me refiero a que Ext Js nos da funcionalidad de más alto nivel, el manejo del DOM, AJAX y funcionalidades básicas son hechas por la librería YUI, pues Ext Js se enfoca en componentes o widgets.

Al ser diseñada desde un principio como una extensión montada sobre YUI, ahora es posible utilizarlas con otras librerías como JQuery o Prototype. Solo es necesario utilizar el “adapter” adecuado, y Ext JS utilizará la librería que uno necesite o conozca mejor para realizar las operaciones de bajo nivel, como manejo de eventos, consultas al DOM, manejo del CSS y todo lo que es posible hacer con tu librería favorita.

Una vez que tenemos una idea general de lo que se trata Ext Js, el siguiente paso es descargar la última versión liberada, para poder continuar con esta introducción.

Una vez descargado, es necesario importar al documento tu librería favorita, el adapter correspondiente y el archivo “Ext-all.js”, estas son las posibles combinaciones que puede hacer, y el orden en que deben estar:

Utilizando Ext en modo Stand-alone, al decir stand alone significa que Ext Js utilizará su propia librería, que se llama Ext base, la cual contiene todo lo necesario para manejo de Dom, Ajax, animaciones, etc.
——————————————————————-
ext-base.js
ext-all.js (o los componentes que necesites)

Utilizando Yahoo! UI (.12+)
——————————————————————-
yui-utilities.js
ext-yui-adapter.js
ext-all.js (o los componentes que necesites)

Utilizando jQuery (1.1+), jQuery es una de las librerías mas populares dentro de los desarrolladores, es por eso que Ext js ha creado un adapter para que podamos utilizar esta librería, los archivos a importar son los siguientes:
——————————————————————-
jquery.js
ext-jquery-adapter.js
ext-all.js (o los componentes que necesites)

Utilizando Prototype (1.5+) / Scriptaculous (1.7+), prototype fué uno de los primeros frameworks javascript, es muy popular y me atreveria a decir que la mas utilizada entre desarrolladores.
——————————————————————-
prototype.js
scriptaculous.js?load=effects (o cualquier cosa que necesites cargar de scriptaculous)
ext-prototype-adapter.js
ext-all.js (o los componentes que necesites)

En este tutorial se explica en modo “stand-alone”, esto por que mi librería favorita no esta soportada por Ext Js (Mootools, que por cierto, hay un adapter de terceros para la versión Ext 1.1), por lo tanto se incluye al documento “adapter/ext/ext-base.js” y “ext-all.js”, para esto crea un carpeta en tu disco duro (donde quieras), copia los archivos anteriores a esta nueva carpeta, y además copia la carpeta “resources”, pues en esta se encuentran las imágenes y hojas de estilo necesarias para los componentes, además es necesario importar “ext-all.css”, crear el archivo HTML donde se trabajará, una buena practica es separar el HTML del javascript, entonces creamos el archivo “introduccion.js” donde se escribirá todo el javascript de este tutorial, los imports deben quedar así:

En el archive introduccion.js colocar el siguiente código:


Ext.onReady(function() {
alert("Felicidades! Has configurado Ext correctamente!");
});


Este mensaje tiene que aparecer si todo esta configurado correctamente, además de que se ejecutara cuando el DOM este listo para ser utilizado.

Mensajes
Lo primero que mostraré es la forma de mandar mensajes al usuario, como alertas, confirmaciones, errores, etc. Lo que se hará ahora es cambiar el archivo introducción.js por lo siguiente:


Ext.onReady(function() {

});


Al hacer esto, se esta mandando un alert al usuario, pero con la interfaz de Ext, como puedes ver es algo muy sencillo y se ve muy bien, ahora voy a mostrar un método con más opciones de configuración para mandar mensajes y tener control sobre los botones que ha presionado el usuario.


Ext.onReady(function() {

function procesarResultado (btn){
if(btn=='yes'){
Ext.Msg.alert('Resultado','SI estas emocionado!! Excelente!!');
}else{
Ext.Msg.alert('Resultado','NO estas emocionado!! pues nimodos!!');
}
}
});


Lo más importante a resaltar es notar la diferencia entre la forma de mostrar el mensaje, en el primer ejemplo es el método alert, recibiendo dos parámetros, siendo que en el segundo ejemplo el método show recibe un solo parámetro, el cual es un objeto con propiedades de configuración.

Otro punto importante es que la propiedad fn permite referenciar la función que manejará los eventos del usuario, cuando de clic en algún botón, la función que se ha especificado aquí será disparada, te recomiendo comiences a jugar un poco cambiando algunas opciones, puede encontrar las opciones permitidas en el API de Ext Js.

Grids o Tablas
La tabla o grid, es el componente más popular de este framework, ya que es muy sencillo hacer tablas con capacidades realmente buenas.

Primeramente se necesita la información que va a ser desplegada, contenida en un array por cada renglón que se quiere desplegar, en proyectos reales esta información puede venir de una base de datos o de un webservice, para este ejemplo “hardcode”.


var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];


El siguiente paso es crear un lector que pueda interpretar esta información, para poder procesarla en la tabla, existen varios tipos de lectores, para este caso se utiliza el de ArrayReader, pues la información anterior es un array, es muy común utilizar el lector de XML cuando usamos Ajax.


var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);


Como se puede notar, se le ha asignado un nombre a cada columna, al igual que el tipo de dato que esta contiene, en el caso de la fecha se ha creado un formato de despliegue, es importante especificar el tipo de dato, pues al momento de ordenar la tabla, es de vital importancia.

El último paso es crear la tabla, donde se le pasará la información, contenida en el arreglo, y el lector de esta.


var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: 'Compañia', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Precio', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Cambio', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Cambio', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Último cambio', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'grid',
title: 'Titulo de la tabla',
width: 500,
frame: true
});


Con la clase Ext.grid.GridPanel se crean las tablas, es necesario darle la información a desplegar, por medio de la propiedad “store”, las columnas que va a contener, donde a cada columna se le especifica su titulo, su tamaño, si será ordenable y lo más importante, el “dataIndex” que es donde se relaciona la columna con la información en el Lector, la opción renderTo, es el ID del elemento donde se quiere colocar la tabla en el documento.

Pues esto es todo lo necesario para crear una tabla, realmente sencillo y como se puede observar, la tabla se ve muy bien.

Ventanas
Para finalizar con este tutorial voy a mostrar como crear ventanas con toda la funcional necesaria.

Crear ventanas es muy sencillo, simplemente se ahce algo como esto:


var win = new Ext.Window({title:'El titulo',width:500,height:250});
win.show();


La clase Ext.Window es la responsable de crear una ventana totalmente configurable, en este ejemplo únicamente se le esta especificando las dimensiones y el título, pero también se puede configurar si se quiere que la ventana no se cierre, o que no se pueda redimensionar y muchas otras cosas mas que recomiendo y se vea el api para poder jugar con estas propiedades.

Es importante mencionar que con el método show se muestra la ventana, de lo contrario no se verá nada.

Conclusión
En este tutorial simplemente he mostrado algo de lo que se puede hacer con esta maravillosa librería, realmente que es sencillo y rápido desarrollar aplicaciones complejas.

Espero que esta corta introducción le pueda servir a mas de uno, y si tienen algún comentario o duda la pueden dejar en el formulario inferior de esta misma página, como parte complementaria al tutorial se puede descargar los archivos de ejemplo.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Objetivo
El principal objetivo de este artículo es mostrar algunas buenas prácticas al escribir clases, para que sean reutilizables no solo por el propio autor, sino también por otros desarrolladores, esto hay que tenerlo en mente siempre que escribimos una clase, la clase que se escribirá hará algo asi (En las feeds no se aprecia el efecto debido a que no se ejecuta el javascript):

Este carrusel de imágenes (slideshow) es idéntico (a nivel visor) al que ya he mostrado anteriormente, solo que esta vez el código estará mucho mas limpio y mejor diseñado, completamente orientado a objetos y podrá ser muy flexible para ser utilizado por algún otro desarrollador.

Para comenzar hay que descargar la librería de mootools (1.2beta2) e importarla a la página:

Definir una Clase con Mootools
La clase que hará el trabajo se llamará Carrusel, y para declararla vasta con hacer lo siguiente.


var Carrusel = new Class({

});


Agregar soporte para eventos y opciones
Generalmente una clase lleva Opciones, Eventos y un constructor, no son obligatorios, pero para reutilizar y distribuirla a otras personas, es mejor pensar a futuro.


var Carrusel = new Class({
Implements:[Events, Options], //Implementamos eventos y opciones
options:{

}
});


Notar que entre cada propiedad o método se separa mediante una coma simple “,”, esto debido al estandar de JSON para javascript.

Para dar soporte de Eventos a la clase hay que implementar la clase Events, al igual que la clase Options si se quiere que la clase sea capas de manejar opciones de una manera sencilla. Este punto en especifico es algo que cambió en esta versión, anteriormente era diferente la manera de implementar clases, ahora esta mucho mas claro y entendible.

Lo siguiente es definir las propiedades (opciones) que la clase tendrá. Tomando en cuenta que es un carrusel de imágenes, tendremos entonces imágenes, sus dimensiones y control sobre el tiempo del efecto de transición y el tiempo a entre cada una.


var Carrusel = new Class({
Implements:[Events, Options],
options:{
images:[],
width: 420,
height: 294,
durationFx:1000,
durationDelay: 3000 //3 segundos
},
initialize:function(el,options){
this.setOptions(options || {});
}
});


Es importante notar que el constructor esta recibiendo dos parámetros, un elemento y opciones.

Las opciones funcionan de la siguiente manera, inicialmente se declaran con los valores por default, en este caso images es un arreglo vacío, width vale 420 y así con las demás, en caso de que en el constructor no se le pasen opciones, entonces las opciones por default serán usadas, este comportamiento se logra gracias a la función this.setOptions, que es la encargada de sobrescribir las opciones por default.

Dentro del constructor de la clase se pueden poner llamadas a otras funciones de la misma clase y hacer cualquier otra cosa, en este caso, voy a crear dos propiedades de clase y dos métodos, por ahora.


initialize:function(el,options){
this.setOptions(options || {});
this.el = $(el);
this.id = this.el.get('id');
this.build();
this.start();
}


Hasta aquí únicamente he creado la propiedad this.el, que es la que guardará una referencia al elemento que se recibe, la propiedad this.id, es el identificador del elemento, esto lo hago por conveniencia, pues mas adelante se hará uso de este varias veces, el método build es el responsable de crear la estructura del visor de imágenes, ósea el html necesario, el método start es el encargado de iniciar la animación.

A continuación voy a mostrar en pseudos código lo que el método build hará.


build:function(){
//1.- Crear un div contenedor e inyectarlo dentro del elemento principal.
//2.- Crear un div para la imagen1 e inyectarlo al contenedor anterior
//3.- Crear un div para la imagen2 e inyectarlo al contenedor anterior
//4.- Crear las los efectos sobre los divs que contenedores de las imagenes
//5.- Iniciar con opacidad al 0%
}


El div del punto uno es necesario, pues es posible que el donde se aloje el carrusel sea otro div posicionado absoluto o flotante, mediante este primer div contenedor nos aseguramos que el carrusel se pueda desplegar correctamente en cualquier lugar.

Una vez claro lo que se hará, codificarlo con mootools es muy sencillo, para crear los divs se utiliza la clase Element, y para los efectos la clase Fx.Tween, el código del método queda de la siguiente manera.


build:function(){
//1.- Crear un div contenedor e inyectarlo dentro del elemento principal.
var content = new Element('div',{id:this.id+'_content',styles:{position:'relative',width:this.options.width+'px',height:this.options.height+'px'}}).inject(this.el);
//2.- Crear un div para la imagen1 e inyectarlo al contenedor anterior
var img1 = new Element('div',{id:this.id+'_img1',styles:{width:'100%',height:'100%'}}).inject(content);
//3.- Crear un div para la imagen2 e inyectarlo al contenedor anterior
var img2 = new Element('div',{id:this.id+'_img2',styles:{position:'absolute',width:this.options.width+'px',height:this.options.height+'px',top:0,left:0}}).inject(content);
//4.- Crear las los efectos sobre los divs que contenedores de las imagenes
this.imgFx1 = new Fx.Tween(img1, 'opacity',{
duration:this.options.durationFx,
onComplete:function(){
this.nextImage();
}.bind(this)
});
this.imgFx2 = new Fx.Tween(img2, 'opacity',{duration:this.options.durationFx});
//5.- Iniciar con opacidad al 0%
this.imgFx1.set(0);
this.imgFx2.set(0);
}


Lo mas interesante para comentar, es que en el punto numero cuatro, no solo se creó el efecto sobre la imagen uno, si no que también se agregó un evento, onComplete, este evento se dispara cuando el efecto sobre la imagen uno ha terminado, entonces la única instrucción aquí es cambiar a la siguiente imagen, el cual es otro método de la clase que mas adelante explicaré. Si eres observador al evento onComplete se le agregó también un bind(this) ,esto es de suma importancia, pues con esta instrucción es posible hacer referencia a la misma clase desde el evento, de no agregar esta instrucción el evento no sabría en que contexto buscar el método nextImage().

El siguiente método a implementar es el start, el cual es el encargado de iniciar con la animación. El pseudo código es el siguiente.


start:function(){
//1.- Revisar si hay imagenes para poder comenzar el carrusel
//2.- Disparar el evento onStart
//3.- Solicitar imagen
//4.- Hacer la trancision inicial
//5.- Crear un temporizador para ejecutar la transición periodicamente
}


El código de lo anterior es el siguiente.


start:function(){
//1.- Revisar si hay imagenes para poder comenzar el carrusel
if(this.options.images.length==0)
return;
//2.- Disparar el evento onStart
this.fireEvent('onStart');
this.index = -1;
this.isImg1OnTop = false;
//3.- Solicitar imagen
this.nextImage();
//4.- Hacer la trancision inicial
this.transition();
//5.- Crear un temporizador para ejecutar la transición periodicamente
this.timer = this.transition.periodical(this.options.durationDelay,this);
}


Es importante mencionan lo que sucede en la instrucción numero dos, para disparar el evento es necesario implementar la clase Events, la cual importamos al principio, this.fireEvent permite disparar eventos, en este caso se dispara el evento cuando se inicia la animación, estos eventos son provistos por los programadores que utilicen esta clase en algún futuro o por nosotros mismo, esto es muy útil si queremos reutilizar esta clase, añadiéndole comportamientos extras cuando sucedan los eventos, es por eso que siempre que se escribe una clase se debiera pensar en agregar eventos, personalmente siempre lo hago y me ha resultado de gran ayuda en el futuro.

En el método start esta haciendo una llamada al método nextImage, este método es el responsable de establecer la imagen al contendor correspondiente, verificando que al término de las imágenes inicie nuevamente desde la imagen número uno, esta función también es invocada cuando termina el efecto de la transición sobre la imagen uno, esto se especifico en la función build, en pseudo código esto es:


nextImage: function(){
//1.- Se incrementa el contador
//2.- Se verifica la dimension del arreglo de imagenes, si llego al limite iniciar desde el principio
//3.- Se verifica si la imagen uno esta actualmente viendose, de esta forma se sabe a donde posicionar la siguietne imagen
}


El código de lo anterior es el siguiente:


nextImage: function(){
//1.- Se incrementa el contador
this.index++;
//2.- Se verifica la dimension del arreglo de imagenes, si llego al limite iniciar desde el principio
if(this.index>=this.options.images.length)
this.index = 0;
//3.- Se verifica si la imagen uno esta actualmente viendose, de esta forma se sabe a donde posicionar la siguietne imagen
if(this.isImg1OnTop)
$(this.id+'_img2').setStyle('background-image','url('+this.options.images[this.index]+')');
else
$(this.id+'_img1').setStyle('background-image','url('+this.options.images[this.index]+')');
}


El método start también esta llamando a la función transition, la responsabilidad del método transition es realizar el efecto sobre los contenedores de la imágenes, esto es muy sencillo:


transition:function(){
this.fireEvent('onTransition');
this.imgFx1.start(this.isImg1OnTop?0:1);
this.imgFx2.start(this.isImg1OnTop?1:0);
this.isImg1OnTop = !this.isImg1OnTop;
}


Lo único que se esta haciendo aquí es disparar el evento onTransition, e iniciando el desvanecido de 0 a 100 por ciento, dependiendo de imagen uno.

Por último se crearán algunos métodos para ser utilizados por otros desarrolladores o por nosotros mismos en otras circunstancias, primeramente un método que detenga al carrusel, otros método para controlar las imágenes, estas pueden provenir de una llamada AJAX o de cualquier otro lugar.


stop:function(){
this.fireEvent('onStop');
$clear(this.timer);
}

newImages:function(images){
this.options.images = images;
},
addImages:function(images){
this.options.images.merge(images);
},
addImage:function(image){
this.addImages([image]);
},
deleteImages:function(){
this.stop();
this.options.images.empty();
}


Utilizar el carrusel o slideshow
Para utilizar el carrusel hay que crear instancias de esta clase, la forma más básica de su uso es:


//Utilizando las propiedades por default.
var car1 = new Carrusel('carrusel1',{images:['images/12.jpg','images/09.jpg','images/05.jpg']});

//Modificando todas las propiedades
var car4 = new Carrusel('carrusel4',{
durationDelay:7000,
durationFx:1500,
width: 500,
height: 280,
images:['images/08.jpg','images/06.jpg','images/13.jpg'],
onStart:function(){console.debug('comenzando...')},
onTransition:function(){console.debug('haciendo la transición')}
});


Hay que recordar que deben existir los elementos en el documento para que funcione correctamente, con esto me refiero a que el HTML debe contener algo como esto para cada instancia del carrusel:

El código completo de la clase carrusel.js es el siguiente:


var Carrusel = new Class({
Implements:[Events, Options],
options:{
images:[],
width: 420,
height: 294,
durationFx:1000,
durationDelay: 3000 //3 segundos
},
initialize:function(el,options){
this.setOptions(options || {});
this.el = $(el);
this.id = this.el.get('id');
this.build();
this.start();
},
build:function(){
//1.- Crear un div contenedor e inyectarlo dentro del elemento principal.
var content = new Element('div',{id:this.id+'_content',styles:{position:'relative',width:this.options.width+'px',height:this.options.height+'px'}}).inject(this.el);
//2.- Crear un div para la imagen1 e inyectarlo al contenedor anterior
var img1 = new Element('div',{id:this.id+'_img1',styles:{width:'100%',height:'100%'}}).inject(content);
//3.- Crear un div para la imagen2 e inyectarlo al contenedor anterior
var img2 = new Element('div',{id:this.id+'_img2',styles:{position:'absolute',width:this.options.width+'px',height:this.options.height+'px',top:0,left:0}}).inject(content);
//4.- Crear las los efectos sobre los divs que contenedores de las imagenes
this.imgFx1 = new Fx.Tween(img1, 'opacity',{
duration:this.options.durationFx,
onComplete:function(){
this.nextImage();
}.bind(this)
});
this.imgFx2 = new Fx.Tween(img2, 'opacity',{duration:this.options.durationFx});
//5.- Iniciar con opacidad al 0%
this.imgFx1.set(0);
this.imgFx2.set(0);
},
start:function(){
//1.- Revisar si hay imagenes para poder comenzar el carrusel
if(this.options.images.length==0)
return;
//2.- Disparar el evento onStart
this.fireEvent('onStart');
this.index = -1;
this.isImg1OnTop = false;
//3.- Solicitar imagen
this.nextImage();
//4.- Hacer la trancision inicial
this.transition();
//5.- Crear un temporizador para ejecutar la transición periodicamente
this.timer = this.transition.periodical(this.options.durationDelay,this);
},
stop:function(){
this.fireEvent('onStop');
$clear(this.timer);
},
transition:function(){
this.fireEvent('onTransition');
this.imgFx1.start(this.isImg1OnTop?0:1);
this.imgFx2.start(this.isImg1OnTop?1:0);
this.isImg1OnTop = !this.isImg1OnTop;
},
nextImage: function(){
//1.- Se incrementa el contador
this.index++;
//2.- Se verifica la dimension del arreglo de imagenes, si llego al limite iniciar desde el principio
if(this.index>=this.options.images.length)
this.index = 0;
//3.- Se verifica si la imagen uno esta actualmente viendose, de esta forma se sabe a donde posicionar la siguietne imagen
if(this.isImg1OnTop)
$(this.id+'_img2').setStyle('background-image','url('+this.options.images[this.index]+')');
else
$(this.id+'_img1').setStyle('background-image','url('+this.options.images[this.index]+')');
},
newImages:function(images){
this.options.images = images;
},
addImages:function(images){
this.options.images.merge(images);
},
addImage:function(image){
this.addImages([image]);
},
deleteImages:function(){
this.stop();
this.options.images.empty();
}
});


El código del documento HTML que lo invoca es:


"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

Conclusión
Si lo has notado, para escribir esta clase se han creado varios métodos, cada uno con una responsabilidad especifica, la clase esta muy entendible y fácil de utilizar, esto es lo que se debe tener en cuanta cuando se escriben clases.

Espero que este tutorial sea de utilidad para mas de uno, saludos.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Gracias a Joe Hewitt, el creador de firebug, que ha puesto esta herramienta disponible para todos los demás exploradores como un archivo javascript, esta versión de firebug es mas ligera y no tiene todo lo que la extensión para firefox, pero es de gran ayuda, simplemente tienes que incluir el archivo javascript en tu página y listo, puedes descargar Firebug Lite desde aquí .

Ahora bien, cuando se esta en la etapa de desarrollo, es recomendable agregar el archivo javascript, pero cuando se sube a producción hay que quitarlo para no desperdiciar ancho de banda, al hacer esto todas las llamadas al objeto console, el encargado de debuguear, marcarán error, para corregir eso simplemente hay que pegar las siguientes líneas de código antes de hacer cualquier llamada al objeto console.


if (!("console" in window) || !("firebug" in console)) {
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group"
, "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
window.console = {};
for (var i = 0; i }


Con esto se crea el objeto console y ya no marcará errores la aplicación.

Saludos.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

En la versión anterior el método set, de la clase Element, solo aceptaba un parámetro, ahora en esta nueva versión es posible pasarle un objeto con todas las opciones que querramos.

Ejemplo: En la versión anterior haciamos algo así para acceder a las propiedades de los elmentos.


$(element).set('href', 'http://moootools.net'); //setter
$(element).get('href'); //getter


En esta nueva versión podemos hacer lo siguiente, claro que lo anterior lo podemos seguir haciendo:


$(element).set({
href: 'http://www.crysfel.com',
text: 'Crysfel blog´s',
morph: {duration: 200, transition: 'quad:out'},
events: {
click: function(){
document.location.href = this.href;
return false;
}
}
});


Como se puede ver, ahora podemos asignarle varios parámetros a la vez, pero hay que notar que también se pueden declarar eventos.

Para mayor información ver el blog oficial, también recomiendo descargar esta nueva versión.

Saludos y a experimentar!.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Hacer esto es muy sencillo, antes que nada hay que descargar la ultima versión de mootools (mootools-release-1.11.js actualmente), luego de esto la importamos al documento así:

El siguiente paso es crear el objeto que se arrastrara y los botecitos donde se soltará la carpeta, el HTML quedará de la siguiente manera.

Ahora mediante CSS acomodamos al tamaño correcto y le ponemos las imágenes respectivas.


#mover{
width:64px;
height:64px;
background-image:url(folder.png);
}
#cubos{
width:400px;
margin:100px auto;
}
.drop{
float:left;
margin:3px;
width:128px;
height:128px;
background-image:url(boteBacio.png);
}


Una vez lista la interfase, viene lo divertido, pues es hora de programar las acciones y eventos a realizar.

Mootools tiene una forma muy sencilla de realizar el Drag and Drop, simplemente al elemento que se hace “dragable” se le asignan los elementos que serán “dropables” para este elemento mediante un arreglo.

Con esto en mente tomamos todos los elementos que contengan la clase “drop”, para esto simplemente utilizamos la función doble dólar y le pasamos la expresión que necesitamos.


var drops = $$('#cubos .drop');
var clon;


Hasta aquí contamos con un arreglo de elementos, además de que se ha creado una variable llamada clon, la cual no contiene nada por ahora, esta variable clon lo que contendrá es una copia del elemento mover y se le modificará su propiedad de la transparencia, todo esto se realizará cuando se le presiona el Mouse sobre el elemento mover.

El pseudo código es el siguiente:


$('mover').addEvent('mousedown',function(event){
//detenemos la propagación del evento
//si no existe una instancia del clon, se copia el elemento mover
//asignamos las mismas coordenadas al clon del objeto mover
//agregamos el clon al dom
//le asignamos una opacidad al clon del 70%
//hacemos al clon dragable e iniciamos el evento manualmente
//asignamos el evento emptydrop al clon, el cual se ejecuta cuando
//se ha soltado el clon fuera de los elementos dropables, de esta manera
//podemos desaparecer al clon cuando se suelta en un lugar no deseado.
}});


Esto en javascript se escribe de la siguiente manera:


$('mover').addEvent('mousedown',function(event){
event = new Event(event).stop();
if(!$chk(clon)) clon = this.clone();
clon.setStyles(this.getCoordinates());
clon.inject(document.body);
clon.setStyle('opacity',0.7);
clon.makeDraggable({droppables:drops}).start(event);
clon.addEvent('emptydrop',function(){
if($chk(clon)){ clon.remove(); clon= null;}
});
});


Lo único importante para comentar, es prestar atención a la función makeDraggable, pues esta es la responsable de que los elementos se puedan arrastrar en el documento, además, dentro de las opciones que se le pasan esta la de droppables, la cual es el arreglo de elementos en los que puede ser soltado el elemento que estamos arrastrando.

Lo que sigue es programar los eventos para los elementos dropables, los cuales son tres, el over, que se ejecuta cuando el elemento que se esta arrastrando esta sobre el elemento en cuestión, el leave, que se ejecuta cada vez que el elemento que se esta arrastrando sale del elemento en cuestión, y el mas importante, el drop se ejecuta cuando el elemento que se esta arrastrando es soltado sobre el elemento en cuestión.

Con esto en mente codificamos lo siguiente


drops.setStyle('opacity',0.7);
drops.each(function(drop){
var fx = new Fx.Styles(drop, {duration:300, wait:false});
drop.addEvent('drop',function(){
if($chk(clon)){ clon.remove(); clon= null;}
this.setStyle('background-image','url(boteLleno.png)');
});
drop.addEvent('over',function(){
fx.start({'opacity':1});
});
drop.addEvent('leave',function(){
fx.start({'opacity':0.7});
});
});


Primero se ponen con opacidad en 70%, luego se itera el arreglo y a cada elemento se le asigna los eventos de los que he hablado anteriormente (drop, over, leave), en los eventos leave y over, únicamente se cambia la opacidad mediante una transición, esto es gracias a la clase Fx.Styles, y en el evento drop se verifica que exista una instancia del clon, de ser así se elimina, luego se cambia la imagen del bote vacío por el bote lleno.

Pues esto es todo, realmente sencillo, espero que todo este claro, a continuación pongo el código completo del ejemplo, simplemente copia y pega.


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Que de beneficio tiene esto, pues imagínate que tienes en tu base de datos imágenes de productos de una tienda de aparatos electrónicos, y para cada aparato tienes una serie de imágenes, las cuales deben tener un orden, si las fuiste metiendo en orden pues que padre no, pero ¿que sucede si te equivocas? O si quieres que los usuarios mismos puedan elegir el orden en que aparezcan las imágenes, fácil, creas un campo en la tabla de imágenes donde introduzcas el orden de las imágenes, haces un Query trayéndolas ordenadas ascendentemente por medio de ese campo, pero para que los usuarios las ordenes debes ponerles una interfase fácil, pues si les pones una cajita y que ellos mismos introduzcan el numero de orden, para cada imagen, ¡imagínate! Muchos errores se ocasionaría, para estos casos es que es útil esta interfase, y a continuación muestro como hacerla.

Primero bajamos la librería de moootols, donde únicamente seleccionamos en la sección de plugins, la clase Sortables inmediatamente se seleccionan automáticamente todas sus dependencias, luego descargamos el archivo.

Lo importas a tu documento

Ahora lo siguiente es crear la lista de los elementos a ordenar, la cual puede quedar de la siguiente manera.

Ahora se crea una instancia de la clase Sortable pasándole como parámetro la lista que se quiere ordenar, esto quedaría de la siguiente manera.


var lista1 = new Sortables($('lista1'));


Con esa simple instrucción ya se puede comenzar a ordenar la lista dando clic sobre el elemento y desplazándolo hacia arriba o debajo de la lista.

Ahora, lo siguiente es poder obtener los valores de la lista resultante después de la ordenación, para eso hacemos una función y la invocamos en el lugar donde necesitemos saber dicho dato.


function getOrdenLista1(){

}


El método serialize se encarga de regresarnos un arreglo de cómo es que se encuentran ordenados los ítems, en un principio automáticamente enumera los ítems de 0-n, en forma ascendente, al ejecutar este método regresa el estado actual de los índices.

Ahora mostrare otro ejemplo, el de imágenes, y tomando en cuenta el ID proveniente de una base de datos y de esta manera recoger los IDs en el orden que se hallan modificado por el usuario, para esto usaremos la siguiente lista.

Si te has dado cuenta le he agregado un ID a cada <li> de la lista a ordenar, como valor le he puesto id_n donde n es el id de la imagen en la base de datos, es importante mencionar que es necesario ponerle un prefijo al numero id de la base de datos, esto por que no podemos declarar un ID en XHTML de tipo numérico, forzosamente tiene que ser una palabra, con esto en mente se crea la instancia de la clase Sortable para esta lista.


var lista2 = new Sortables($('lista2'));


El siguiente paso es crear la función que regresara el arreglo de IDs después de cada ordenación que se haga, para esto usaremos el mismo método que se utilizo anteriormente, solo que con una pequeña diferencia.


function getOrdenLista2(){
alert(lista2.serialize(function(el){
return el.id.substring(el.id.indexOf('_')+1)
})
);
}


La única diferencia es que se le esta pasando como parámetro una función, la cual remplazara a la función default, con esta función nosotros tomamos el ID de cada elemento y le quitamos el prefijo, regresando así solo el ID correspondiente de cada imagen con la base de datos.

Pues si, eso ha sido todo, ¿fácil verdad? Bueno, lo siguiente seria enviar mediante AJAX la lista ordenada al servidor y guardarla en la base de datos, para utilizar AJAX te sugiero leer Peticiones Post con Ajax en este mismo blog.

Aquí esta el código completo de este tutorial.


"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

Hasta la próxima!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Para que te des una idea de lo que mostrare en este tutorial, puedes ver el siguiente ejemplo.

¿Interesante no?, realizarlo es muy sencillo, así que para comenzar es necesario descargar la última versión de mootools (v1.11) e importarla a tu documento, pues es indispensable para este tutorial.

Ahora bien, lo primero es crear una clase (VisorImagenes), la cual contiene los métodos y propiedades necesarios para visualizar las imágenes.


function VisorImagenes(){
this.file;
this.img;

//Redimensionar el contenedor de la imagen
this.redimensionar = function(){}
}


Hasta este punto solo cree la estructura de la clase, esto es una especie de prototipo con el fin de visualizar cada paso de este tutorial, file es la url donde se encuentra la imagen a mostrar, img es una referencia al nodo donde se encuentra la imagen en el documento, y los métodos creo que es suficiente el comentario de estos en el código.

Una vez claros en la construcción de esta aplicación es hora de crear la estructura visual, para esto es necesario crear los elementos y agregárselos al body como hijos,aclaro una vez mas que este método simplemente hace la estructura del visor de imágenes al igual que el CSS necesario, a continuación se muestra el pseudo código del método y mas adelante se codifica.


this.constructor = function(){
//Crear el nodo principal cvrVisor (

)
//Crear el nodo para el fondo obscuro (

)
//Crear el nodo contenedor de la imagen y el texto (

)
//Crear el nodo de salida del visor ()
//Crear el nodo para la imagen ()
//Crear el nodo para el texto (

)
//Asignar coordenadas centrales al contenedor de la imagen y texto
//Hacer las asignaciones de los nodos creados anteriormente
//Agregar el arbol que creamos anteriormente al body del documento
}


Primeramente hay que crear el elemento principal, asignándole como id cvrVisor, su función es agrupar todos los elementos necesarios, sus dimensiones son todo el ancho de la pantalla y todo el largo también, esto que he comentado se resume en


var panel = new Element('div', {
'styles': {
'position': 'absolute',
'top':'0px',
'left':'0px',
'width': '100%',
'height': window.getScrollHeight()+'px'
},
id:'cvrVisor'
});


La clase Element crea un nodo o elemento XHTML y lo pone en memoria, es importante señalar que no esta dentro del DOM todavía, simplemente es un nodo perdido en la memoria, es por eso que hacemos una referencia a este con la variable panel, como primer parámetro en el constructor se pasa el elemento XHTML que quieres crear, en este caso un div, el segundo argumento o parámetro es un objeto con propiedades, en este objeto se le pueden pasar eventos, estilos, el ID que le queramos asignar, entre muchas cosas mas, claro esta que estos parámetros son opcionales, si quieres saber mas al respecto te recomiendo darle un vistazo a la http://docs.mootools.net/Native/Element.js documentación en mootools. Lo unico que hicimos anteriormente fue crear una capa con ID cvrVisor, que ocupa toda la pantalla, este elemento es el padre de todos los elementos que continúan.

Siguiendo con el pseudo código es hora de hacer el fondo de color negro que es del mismo tamaño del elemento anterior, la relación se hará mas adelante, por ahora solo se crea en memoria y se guarda la referencia en la variable fondo, no comentare sobre el CSS aplicado pues este tutorial no es sobre CSS, si tienes conocimientos sobre CSS entenderás el porque de esto, si no pues solo te queda creerme por fe o googlear un poco.


var fondo = new Element('div', {
'styles': {
'position': 'relative',
'width': '100%',
'height': '100%',
'background-color': '#000'
},
'id':'cvrFondo'
});


Ahora se crea el elemento que contiene la imagen y el texto, inicialmente será de 100×100, color blanco y contendrá como fondo una imagen centrada de el cargador, esto con el fin de mostrar al usuario que la imagen se esta cargando, cuando la imagen aparece el cargador queda oculto.


var cont = new Element('div', {
'styles': {
'position': 'absolute',
'top': '0px',
'left': '0px',
'width': '100px',
'height': '100px',
'background-color': '#fff',
'padding': '5px',
'background-image': 'url(cargador.gif)',
'background-repeat': 'no-repeat',
'background-position': 'center'
},
'id':'cvrContenedor'
});


Es hora de crear el botón de salida, lo interesante aquí es que ahora agregamos un evento, se trata de cuando se de clic sobre el link, este desaparezca lentamente el fondo y el visor, además de que por medio de CSS se ha posicionado sobre toda la pantalla este botón de salida, al final se le agrega el texto ‘salir’.


var salir = new Element('a', {
'title':'Clic para salir',
'styles': {
'display': 'block',
'width': '99.9%',
'height': '99.8%'
},
'events': {
'click': function(){
new Fx.Style($('cvrFondo'), 'opacity',{duration:500,onComplete:function(){$('cvrVisor').style.display = "none";}}).start(0.7,0);
return false;
}
}
});
salir.setText('Salir');


Se crea la imagen, esto no tiene nada especial, solo comentar que no se le esta poniendo el recurso, pues se le asignara dinamicante dependiendo de la imagen que se quiera mostrar.


var img = new Element('img', {
'styles': {
'margin': '0px'
},
'id':'cvrImagen'
});


Por ultimo se crea el contenedor del texto, el cual contendrá la descripción de la imagen mostrada.


var p = new Element('p', {
'styles': {
'margin': '0px',
'padding': '0px'
},
'id':'cvrDescripcion'
});


Ya tenemos todos los elementos necesarios en memoria, pero no los hemos asignado al DOM, así que los siguientes pasos son relacionar los elementos que se han creado y asignárselos al DOM, en este caso como hijos del body, el código esta comentado para mejor entendimiento.


//Se le asigna 70% de opacidad al fondo y se posiciona en el centro de la pantalla
new Fx.Style(fondo, 'opacity').set(0);
cont.style.top = window.getScrollTop() + window.getHeight()/2 - 50 - 15 +"px";
cont.style.left = window.getWidth()/2 - 50 + "px";

// Se agrega la imagen y el texto al contendor de estos
cont.appendChild(img);
cont.appendChild(p);

//Se le agrega el boton salir al fondo
fondo.appendChild(salir);

//Se agrega el fondo y el contenedor de la imagen y texto al visor
panel.appendChild(fondo);
panel.appendChild(cont);

//Se desaparece el visor, esto da como consecuencia
//que todos sus hijos desaparezcan con el
panel.style.display = 'none';

//Se agrega al DOM, en este caso al body
document.body.appendChild(panel);


Hasta este punto ya esta en el DOM la estructura necesaria para el visor, esta estructura es semejante a esto

Salir

Se ha logrado lo que se buscaba, pues ay tenemos listo los elementos necesarios, ahora es necesario programar los efectos respectivos, lo que sigue ahora es programar el método aparece, de la clase que definimos anteriormente, este método recibe dos parámetros, la url de la imagen a cargar, y la descripción de la misma, el siguiente es el pseudo código de lo que se codificara.


this.aparece = function(f,t){
//Se asigna a la variable file la url actual
//Se pone visible el visor de imágenes
//Se hace la animación de fade in
//Se asigna la descripción al elemento
//Se carga la imagen
}


Esto, codificado, queda de la siguiente manera


this.aparece = function(f,t){
this.file = f;
$('cvrVisor').style.display = 'block';
var f = new Fx.Style('cvrFondo', 'opacity',{duration:500});
f.set(0);
f.start(0,0.7);
$('cvrDescripcion').setText(t);
this.cargaImagen();
}


Lo único interesante es notar que la le estamos asignando 500 milisegundos a la animación, esta animación se la estamos aplicando al elemento con ID cvrFondo, la opacidad va de 0 a 0.7, esto es el 70% de la opacidad, la función cargaIMagen se describe a continuación.


this.cargaImagen = function(){
$('cvrImagen').style.visibility = 'hidden';
img = new Asset.image(this.file, {id: 'cvrImagen', title:'Imagen', onload: this.redimensionar});
}


Lo que se esta haciendo aquí es ocultar la imagen, al hacer esto es posible ver el cargador en el fondo del contenedor, después cargamos la imagen con la clase Asset, la cual mediante el método image indica cuando ha terminado la carga, de esta manera cuando termine la carga se dispara el método redimensionar el cual analizaremos con mas detalle por se un poco mas interesante.


this.redimensionar = function(){
//Se remplaza la nueva imagen por la anterior
$('cvrImagen').replaceWith(img);
//Se oculta para hacer la animacion de redimension
$('cvrImagen').style.visibility = 'hidden';

//Se crea la animacion sobre el elemento cvrContenedor,
//al termino se hace visible la imagen
var efecto = new Fx.Styles('cvrContenedor', {duration: 500,transition: Fx.Transitions.linear,onComplete: function(){$('cvrImagen').style.visibility = 'visible';}});

//Se inicia la animacion, modificando las siguientes propiedades
efecto.start({
'width': img.getSize().size.x,
'height': img.getSize().size.y + 25,
'top': window.getScrollTop() + window.getHeight()/2 - img.getSize().size.y/2 - 15,
'left': window.getWidth()/2 - img.getSize().size.x/2
});
}


Lo interésate aquí, es que podemos modificar mas de una propiedad de los elementos al mismo tiempo, para eso se utiliza la Styles, a diferencia de la clase Style, esta puede modificar simultáneamente las propiedades que se le definan, en este caso se modificaron cuatro propiedades, el ancho, alto, coordenada en x y coordenada en y, para saber las nuevas posiciones y tamaños, es necesario saber las dimensiones de la nueva imagen, para esto simplemente accedamos mediante img.getSize().size.x para el width, donde img es la referencia al nodo que se ha cargado recientemente, el cual contiene esa información, de la misma manera para el height cambiando únicamente x por y, una vez que se saben las dimensiones de la imagen, se puede calcular fácilmente las coordenadas donde debe quedar centrada, para esto es necesario saber el ancho de la pantalla del usuario, así como el alto, luego unas simples restas de la mitad de todos los datos y listo, el contenedor queda en el centro de la pantalla.

Por ultimo se tiene que crear una instancia de esta clase.


var visor = new VisorImagenes();

window.addEvent('domready', function(){
visor.constructor();
});


Lo que se esta haciendo aquí, es crear la instancia, y luego agregar un evento, este evento se dispara cuando el DOM esta listo, es decir que ya se puede comenzar a trabajar con el, esto es muy util pues no se tiene que esperar a que se carguen todas las imágenes del sitio para comenzar a trabajar, al momento de dispararse el evento, lo que se hace es ejecutar el metodo constructor de la clase VisorImagenes.

Para mostrar una imagen es necesario poner dentro de un boton o un link una llamada al metodo aparecer, con sus respectivos datos.


imagen 1
imagen 2
imagen 3
imagen 4


Si te has dado cuenta, los links son accesibles aún si el usuario tiene desactivado el javascript, la única diferencia es que nuestro visor de imágenes no funcionara, pero se vera la imagen de todas formas.

A continuación expongo el código completo para que copies y pegues en un documento html


"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

imagen 1
imagen 2
imagen 3
imagen 4





Pues bien, esto ha sido todo, espero pueda servirte, actualmente planeo realizar un plugin para wordpress y de esta manera poder integrar una galería de imágenes, esto para un proyecto que estoy desarrollando.

Antes de terminar quiero agradecer al chaka por proporcionar las imágenes de muestra

Hasta la próxima!!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://www.crysfel.com/2007/07/11/visor-de-imagenes/feed/ 7 http://www.crysfel.com/2007/05/02/carrusel-de-imagenes/ http://www.crysfel.com/2007/05/02/carrusel-de-imagenes/#comments Wed, 02 May 2007 15:09:29 +0000 Crysfel http://www.crysfel.com/index.php/2007/05/02/carrusel-de-imagenes/ this.maximo) this.cont = [...] No related posts. Related posts brought to you by Yet Another Related Posts Plugin.]]> Hoy quiero mostrar un poco de lo que se puede hacer con mootools, se trata de un carrusel de imágenes, muy sencillo, puedes ver el ejemplo para que me entiendas mejor.

Ahora voy a explicar como es que lo he hecho, veras que es algo muy sencillo. Primero es necesario descargar la última versión de mootools, luego lo importas a tu documento.

UPDATE:
He escrito un tutorial sobre como hacer esto mismo con mootools1.2, ademas explico como escribir una clase correctamente utilizando todo el potencial de mootools, te recomiendo ir a leer el nuevo tutorial.

Para importarlo al documento unicamente es necesario hacer esto:




Acontinuación muestro el XHTML necesario para el carrusel.

Como puedes ver, hay una capa contenedora de dos capas, las capas de adentro son para almacenar temporalmente las imágenes e irlas rotando, estoy utilizando dos, porque cuando se realiza la transición la imagen actual se desvanece, y la imagen siguiente aparece, ambos efectos al mismo tiempo.

Lo siguiente es acomodar estas capas una encima de la otra y darle el tamaño de las imágenes, esto lo hago con CSS.


#contenedor{
position:relative;
width:100%;
}
#img1{
width:420px;
height:294px;
background-image:url('galeria/intro/01.jpg');
}

#img2{
position:absolute;
top:0px;
left:0px;
width:420px;
height:294px;
}


Con esto únicamente estoy modificando las posiciones y asignando las imágenes iniciales, si te fijas la capa contenedora la posicione relativa, esto lo hice para hacer la capa IMG2 absoluta, de esta manera puedo mover la capa img2 a las coordenadas especificas, ósea, ponerla sobre la capa img1. Otro punto importante a destacar aqui, es que si el usuario no tiene habilitado JavaScript, aparecerá simplemente la imagen uno, no habrá efecto, pero podrá ver una imagen.

Lo siguiente es hacer un objeto que le llamaré Animación, este objeto le voy a pasar dos parámetros en el constructor, uno es la url donde están alojadas la imágenes a mostrar, y el otro es el numero máximo de imágenes a desplegar, el directorio de imágenes, debe de contener las imágenes nombradas numéricamente en orden ascendente, es decir deben llamarse 01.jpg, 02.jpg,03.jpg, etc.

Hasta este punto el código debe estar asi:


function Animacion(base,max){
this.base = base;
this.cont = 1;
this.img1 = true;
this.maximo = max;
}


Las propiedades del objeto son base, que es el directorio donde se alojan las imágenes, cont, es un contador secuencial, se incrementará a uno por cada ejecución de la transición, img1 es una variable booleana que indica únicamente si el div img1 es el que sale o no, maximo es la variable que contiene el maximo numero de imágenes, al llegar con a este numero, se reinicia.

Ahora sigue hacer una función a la cual llamaré inicia, la cual va a levantar un temporizador que se ejecutará cada tres segundos.


this.inicia = function(){
(function(){
//se incrementa el contador
this.cont++;
//al llegar al maximo la animacion se inicia
if(this.cont > this.maximo)
this.cont = 1;
var im = 'img1';
var prefix = this.cont+'.jpg';
if(this.cont<10)
prefix = '0'+this.cont+'.jpg';
if(this.img1){
this.img1 = false;
im = 'img2';
}else
this.img1 = true;
//se asigna la nueva imagen a la capa que no se esta viendo
$(im).style.backgroundImage = 'url('+this.base+'/'+prefix+')';
//se desaparece la capa con la nueva imagen
new Fx.Style(im, 'opacity').set(0);

//esta funcion espera un segundo antes de ahcer la transición
(function(){
//crea el efecto para las dos capas
var x = new Fx.Style('img1', 'opacity');
var y = new Fx.Style('img2', 'opacity');
//aparece y desaparece las capas
if(this.img1){
x.start(0,1);
y.start(1,0);
}else{
x.start(1,0);
y.start(0,1);
}

}
).delay(1000,this);
}
//Este es el temporizador, se ejecutará cada tres segundos
).periodical(3000,this);
}


He comentado las partes mas importantes del código, espero esté claro, y si existe alguna duda o comentario puedes dejarlo con toda confianza.

El código completo es el siguiente:


"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">




Hasta la próxima!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://www.crysfel.com/2007/05/02/carrusel-de-imagenes/feed/ 19 http://www.crysfel.com/2007/04/29/presentando-mootools/ http://www.crysfel.com/2007/04/29/presentando-mootools/#comments Sun, 29 Apr 2007 20:53:17 +0000 Crysfel http://www.crysfel.com/index.php/2007/04/29/presentando-mootools/ Yet Another Related Posts Plugin.]]> Hoy quiero hablar al respecto de una maravilla, se trata de un framework para JavaScript mootools, el cual incluye una API realmente buena. Quiero dar algunos puntos por los cuales deberías utilizarla.

La función dólar
La función dólar es una de mis favoritas, esta función fue inspirada en el framework de prototype, adaptado a este framework con algunas funcionalidades extras, esta función es excelente para el desarrollo rápido.

Buena compresión
Este punto es lo que hace que me agrade mucho mas esta librería, pues en tan sólo 36 kb, se encuentra toda una API lista para ser utilizada. La compresión está hecha con el famoso empaquetador de Dean Edwars, aunque también puedes descargar la versión sin compresión, la cual pesa aproximadamente 140 kb, pues además de traer el API viene con documentación integrada.

Orientada a Objetos
En esta librería se encuentran clases para ser utilizadas, esto nos permite hacer cuantos objetos necesitemos, teniendo así una excelente API.

Buena documentación
La documentación la puedes encontrar en http://docs.mootools.net/, y esta muy completa, con pequeños ejemplos de los métodos, y una muy buena navegación, a diferencia de otros frameworks este si cuenta con una excelente documentación.

La clase FX
Esta es la clase que me llamó más la atención, y es que dentro de esta clase se encuentran métodos para realizar animaciones realmente increíbles, esta clase implementa las ecuaciones de Robert Pender si has utilizado flash, sabes a lo que me estoy refiriendo, si no pues voy a poner un ejemplo para que veas lo fácil que es y de lo que estoy ahblando, a continuación el código necesario para hacer una pequeña animación.
El XHTML
[code lang="strict4xhtml"]

[/code]

El Javascript
[code lang="javascript"]
var fx = new Fx.Style("cuadro","margin-left",
{duration:1000,
transition:Fx.Transitions.bounceOut
});
[/code]

Y aquí el ejemplo ejecutandose.

Compatibilidad con exploradores
A lo que me refiero, es que este framework funciona correctamente tanto en Internet Explorer como en firefox, safari, konqueror y otros exploradores más, esto es un punto de suma importancia, pues como desarrolladores necesitamos estar seguros de que nuestros sistemas funcionaran de igual manera en todos los exploradores.

Clases para AJAX
El API contiene clases para realizar peticiones AJAX, de una forma muy sencilla, como esta:
[code lang="javascript"]
var myAjax = new Ajax(url, {method: 'get'});
myAjax.request();
[/code]
Esas dos líneas son las necesarias para realizar una petición al servidor, claro está que puedes modificar las opciones por default, como agregar la función que se disparará al recibir la respuesta, o enviar parámetros vía POST, etc.

Conclusión
Con esta maravilla, podemos crear cosas increíbles, ahora la única limitante es tu imaginación, esta librería contiene muchas mas clases que puedes utilizar, te recomiendo revisar la documentación y a disfrutarla!

Referencias
http://mootools.net/

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://www.crysfel.com/2007/04/29/presentando-mootools/feed/ 2