Ricard Catalan
Hola ♥, soy Ricard Catalan Díaz. Soy diseñador y programador web , quieres conocerme?

19 de febrero de 2009

Este es el segundo artículo de Como crear elementos con mootools, el primero podéis acceder aquí.
En el primer artículo ya vimos como crear un elemento sencillo como puede ser un tag A, DIV, IMG, etc. hasta uno algo más complejo como SELECT por el cual necesitábamos de un bucle para recorrerlo.
En este artículo explicaré un poco los métodos que hay y que podemos hacer con ellos.

Los métodos para insertar un elemento son los siguientes:
  • - injectBefore: Inserta el elemento antes del indicado en el parámetro
  • - injectAfter: Inserta el elemento después del indicado
  • - injectTop: Insertamos arriba del elemento que indiquemos
  • - injectInside: Insertamos al final del elemento indicado

miElemento = new Element('div', { 'id': 'miElemento', 'html': 'Al insertar con injectInside, se colocará al final' });
miElemento.injectInside($('elementoDestino')); //Inserta miElemento al final del elementoDestino

Esto en HTML se podría traducir de la siguiente manera:
  • miElemento es una etiqueta DIV con texto dentro, etc.
  • elementoDestino es otro div que contiene otros div y estiquetas
  • Después de ejecutar el JavaScript, quedaría asi:

<div id="elementoDestino">
<p>1er parágrafo</p>
<p>2on parágrafo</p>
<div class="miClase">1er layer</div>
<div id="miElemento">Al insertar con injectInside, se colocará al final</div>
</div>

Antes de la ejecución del JavaScript, no teníamos ese div, y ahora gracias al DOM, hemos insertado un DIV dentro de otro al final del mismo.

Métodos para la entrada y salida (getters y setters):
  • - get(string): Recibimos el valor del atributo que pasamos por parámetro, ejemplo: $('miElemento').get('id'), recibimos el nombre de su ID
  • - set(string, value): Insertamos un valor al atributo que le pasamos, ejemplo: $('miElemento').set('id', 'otroElemento'), con eso cambiamos el valor de la ID
  • - getPoperty(string): Es un alias de get por lo que puede hacer prácticamente lo mismo / Podemos recibir varios atributos a la vez de un elemento
  • - setPoperty(string, value) / setPoperties: Es un alias de set / Podemos pasar varios atributos a la vez a un elemento
  • - getNext, getFirst, getLast, getParent, etc.: Estos métodos y otros similares realizan mediante DOM una búsqueda sobre los elementos que hay antes, después, etc. del elemento que indiquemos. Supongamos que tenemos un elemento del tipo INPUT type="submit" y queremos acceder al elemento FORM, usaremos getParent('form').

Varios ejemplos con la entrada y salida de atributos de un elemento:
$('miElemento').set('html', 'Esto es <b>código HTML</b> y se insertará dentro del "miElemento", pero <i>OJO</i> si contenia algo, se perderá.');
var temp = $('miElemento').getProperties('tag', 'id', 'html'); //Esto devolverá el TAG="div", la id="miElemento" y todo el contenido dentro de este DIV mediante HTML
$('miElemento').setProperties({
'html': 'esto introducirá código HTML dentro de "miElemento" a demás de las siguientes propiedades',
'title': 'título para este DIV',
'class': 'miClase'
});

Aquí finalizo este artículo sobre como crear elementos con mootools, en el próximo hablaré sobre eliminar contenido, borrar elementos y algunos ejemplos prácticos sobre los 3 artículos.

Etiquetas: ,


Lo prometido es deuda, y a continuación explicaré como realizar consultas Ajax con mootools 1.2.x y JSON.
He creado una clase llamada moojson para realizar las peticiones al servidor con Request.JSON de hay un poco mi tardanza, pero ha valido la pena.

Porqué Json? pues muy simple, Request.HTML solo recibimos texto formateado en código html, sin embargo con JSON recibimos un objeto, donde dentro hay propiedades, objetos, arrays, etc. Su gran dinamismo y el estar pensado para trabajar con javaScript, lo hace único y mejor que usar XML.

Un ejemplo que ilustra su sencillez: Si tenemos un objeto "coche" y una propiedad "color", solo con poner coche.color tendremos el color. así de sencillo. En el caso de un array "caracteristicas" dentro de "coche", podremos acceder a su contenido con coche.caracteristicas[0]. A continuación os pongo este ejemplo como sería en JSON:

{ "coche": {
"color": "rojo",
"caracteristicas": ["AA","4 Airbags","5 puertas"]
}
}

La clase que he creado permite realizar multiples consultas ajax dentro del mismo documento a diferentes documentos (PHP, ASP, .NET ...).
Actualmente funciona solo con los tag A (link) y INPUT (del tipo BUTTON), cuando mejore la clase permitirá algunos más.

Para realizar un consulta ajax con un link, lo podemos realizar de la siguiente manera:

<a class="moojson.tu_ID.true.false" href="#tudocumento.php">tu_link</a>

El atributo class es donde especificamos que queremos realizar una consulta, moojson es el nombre por el que se identifica, y siempre deberá empezar así, tu_ID indica a que ID queremos que aparezcan los resultados, es decir, si tenemos un DIV con "id=tu_ID" los resultados recibidos se mostrarán aquí. "TRUE" indica si queremos que se muestre el nombre de la propiedad, es decir, en el ejemplo anterior JSON, una propiedad es color, y su valor rojo, por defecto siempre mostraremos rojo, pero en algunos casos quizás nos interese que se muestre también el nombre de la propiedad. Para finalizar "FALSE" significa si queremos mostrar los resultados en DIV (false) o bien en TABLE (true).

El atributo href indica que documento realizará la consulta ajax. Siempre se deberá poner # delante.
Con esto será suficiente, a continuación os pongo una imagen que muestra su funcionamiento:

Usar Ajax con mootools y JSON

La clase mooJson sigue los estándares de W3C y es compatible con el DOCTYPE XHTML 1.0 Strict / Transitional y XHTML 1.1
A demás funciona con los navegadores Internet Explorer 6, 7 y 8, Firefox 2 y 3, Safari 2 y 3, Opera 9.5 y Chrome 1.0

Para finalizar, solo deciros que la clase también permite recoger los datos del formulario y enviarlos, de esta manera, podremos realizar multiples combinaciones realizando consultas a la base de datos.

Os dejo un link con el ejemplo y otro para descargar Usar Ajax con mootools y JSON

NOTA: el ejemplo del formulario no funciona, pues el servidor donde esta alojado no tiene base de datos, pero si queréis os he puesto un .sql con la tabla y los insert para hacer las pruebas.
Cualquier duda de la clase, mejora, etc. agradecería que me informárais.
Gracias y un saludo

Etiquetas: , , ,