JOURMOLY

Element.event nos facilita la tarea de manejar los eventos de usuario ademas de proporcionarnos métodos para trabajar con nuestros elementos. Como siempre toda esta explicacion esta acompañada por una serie de ejemplos que te recomiendo que veas: Eventos con Mootools.

Agregando Eventos

addEvent(evento, función)
Es un método que ya venimos utilizando seguido, nos permite agregar un evento a un elemento.

1
2
3
4

$('elemento').addEvent('click', function()
{
	alert('Mi elemento fue clickeado');
});

Con el código anterior añade un evento onClick a nuestro elemento. Los eventos que se pueden utilizar son los de javascript, pero sin el prefijo on. El segundo parámetro es la función que se ejecutara cuando se dispare el evento, en este caso cuando se haga click sobre elemento. Lo mismo de otra manera:

1
2
3
4
5

miFuncion = function()
{
	alert('Mi elemento fue clickeado');
};
$('elemento').addEvent('click', miFuncion);

Este código hace exactamente lo mismo que el del primer ejemplo, con la diferencia de que en este caso nos quedamos con una referencia de la función, la cual nos servirá si deseamos remover nuestro evento con removeEvent.

Por otro lado, addEvent nos da la posibilidad de agregar varios eventos del mismo tipo sobre un mismo elemento.

1
2
3
4
5
6
7
8
9
10
11
12
13

miFuncion = function()
{
	alert('Mi elemento fue clickeado');
};
$('elemento').addEvent('click', miFuncion);
 
$('elemento').addEvent('click', function()
{
	alert('Mi elemento fue clickeado 2 veces');
});
//Salida
//Mi elemento fue clickeado
//Mi elemento fue clickeado 2 veces

Seguir leyendo »

Mootools trae una serie de herramientas que nos facilitan el uso de JSON, éstas herramientas son JSON.js y JSON.Remote.js, las cuales veremos a continuación. Si no sabes que es JSON, podés consultarlo en la Wikipedia.

JSON, acrónimo de “JavaScript Object Notation”, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de Javascript pero no requiere el uso de XML.

(…)

JSON se emplea habitualmente en entornos donde el tamaño del flujo de datos entre cliente y servidor es de vital importancia (de aquí su uso por Yahoo, Google, etc, que atienden a millones de usuarios) cuando la fuente de datos es explícitamente de fiar(…)

Json.js

Json.js nos facilita la tarea de pasar de un string Json a un Objeto Javascript y viceversa.

Json.toString(objeto)
Nos permite pasar un Objeto Javascript a un simple String.

1
2
3
4
5
6
7

var objeto =
{
	nombre: 'Mootools',
	descripcion: 'Framework'
}
var str = Json.toString(objeto);
//{"nombre":"Mootools","descripcion":"Framework"}

Json.evaluate(string, secure)
Nos permite pasar de un String Json a un Objeto Javascript.

1
2
3
4

var str = '{"nombre":"Mootools","descripcion":"Framework"}';
var objeto = Json.evaluate(str);
alert(objeto.nombre); //Mootools
alert(objeto.descripcion); //Framework

secure es un parámetro opcional que por default es false, pero si lo cambiamos a true, se chequeará la sintaxis del string Json. En caso de que el string sea incorrecto, Json.evaluate devolverá null.

1
2
3
4
5
6
7
8

var str = '{"nombre":"Mootools","descripcion":"Framework}';
//Faltan " para Framework
var objeto = Json.evaluate(str, true);
if(objeto != null)
	alert(objeto.nombre);
else
	alert('El string JSON es incorrecto.');
//El string JSON es incorrecto.

Seguir leyendo »

Assets.js trae algunos métodos que nos permiten inyectar en nuestra página elementos script, link, como así también precargar imágenes. Si querés podés pasar directamente a los ejemplos con Assets.js de Mootools o seguir leyendo la explicación de cada uno de sus métodos.

Asset.javascript

Asset.javascript nos permite inyectar scripts en cualquier momento. Como primer parámetro debemos indicar la ruta hacia nuestro fichero de javascript, como segundo parámetro, opcionalmente, podemos indicar una serie de atributos para nuestro elemento script.

1
2
3
4
5

new Asset.javascript('script.js',
{
        tag: 'unTag',
        id: 'script1'
});

El código anterior insertaría en nuestra pagina lo siguiente:

1

<script tag="unTag" id="script1" src="script.js"></script>

Asset.css

Asset.css funciona de la misma manera que Asset.javascript, pero inserta un elemento link de css. Es decir, podemos cambiar el aspecto de nuestro sitio con un solo click y sin recargar la página.

1
2
3
4

new Asset.css('estilo1.css',
{
        id: 'unId'
});

El código anterior produce:

1

< link id="unId" href="estilo1.css" type="text/css" media="screen" rel="stylesheet">

Asset.image

Asset.image nos permite precargar una imagen, la cual no aparecerá hasta que la insertemos manualmente en algún sitio de nuestro código. Los parámetros son los mismos que en Asset.javascript, el primero es la url de la imagen y el segundo es un objeto con los tags que queramos para nuestro nuevo elemento.

1
2
3
4

var imagen = new Asset.image('mootools.jpg',
{
        'class': 'imagenes'
});

En la variable imagen tendremos nuestro nuevo elemento img el cual es muy sencillo de insertar en nuestra pagina:

1

$('id-de-nuestro-div').adopt(imagen);

Seguir leyendo »

Ajax.js hereda de XHR.js y es la clase que verdaderamente nos facilita el asunto de aplicar AJAX. A continuación encontrarás una breve explicación de cada uno de sus métodos y en el siguiente enlace podrás ver ejemplos en funcionamiento: Ejemplos Ajax.js de Mootools.

Antes de empezar, recuerda que ajax.js al ser una clase hija de xhr.js, hereda todos sus métodos, propiedades, opciones y eventos. Por eso es que en los ejemplos que siguen podrás encontrar opciones como method que ya las vimos en el artículo sobre xhr.js.

Creando un objeto Ajax

1

var miAjax = new Ajax(url, {opciones});

Parámetros

url
La url del script que recibe la petición.

Opciones

data
Es la información que le vamos a pasar a nuestro script. Puede ser un string como ya vimos con xhr, un formulario o un objeto.

Pasando un String:

1
2
3
4
5
6
7

var miAjax = new Ajax('recibe.php',
{
	method: 'get',
	data:'ejemplo=uno&variable=mootools',
	update: $('respuesta1')
});
miAjax.request();

Pasando un formulario:

1
2
3
4
5
6
7

var miAjax = new Ajax('recibe.php',
{
	method: 'get',
	data:$('form1'), //Pasamos el objeto form a enviar
	update: $('respuesta2')
});
miAjax.request();

Pasando un Objeto:

1
2
3
4
5
6
7
8
9
10
11

var miAjax = new Ajax('recibe.php',
{
	method: 'get',
	data:
	{
		ejemplo: 'tres',
		variable: 'mootools'
	},
	update: $('respuesta3')
});
miAjax.request();

update
Es el elemento HTML donde vamos a mostrar la respuesta de nuestra petición.

Seguir leyendo »

Poco a poco se va formando la comunidad hispana de Mootools y uno de esos centros importantes será, obviamente, su foro. Está creciendo de a poquito y cada vez son mas los que se animan a participar. Si tenés dudas que no resuelve Google (o mi sitio, ¿por qué no?) no dudes en ir al foro, allí te daremos una mano con lo que necesites.