Manual Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Manual de Mootools
Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel Alvarez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (24 captulos)
Manual de Mootools: www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Mootools
Despus de trabajar durante unos meses con Mootools, ha llegado el momento de escribir algn artculo sobre este interesante sistema. No puedo decir que sea un experto, ni mucho menos, pero creo que podr ayudar a las personas que quieren dar sus primeros pasos usando Mootools en sus pginas web. Lo primero sera decir que Mootools es un framework Javascript, que sirve para crear fcilmente cdigo Javascript independiente del navegador, de una forma rpida y directa. Dicho de otra manera, que tal vez sea ms fcil de entender, Mootools es un conjunto de libreras, tambin llamado API, que proveen clases de programacin orientada a objetos en Javascript, para realizar una amplia gama de funcionalidades en pginas web, como trabajo con capas, efectos diversos, Ajax y mucho ms. Con Mootools podemos programar todo tipo de scripts en el cliente rpidamente y sin preocuparnos de las distintas particularidades de cada navegador. Mootools est especialmente indicado para programar scripts complejos, que nos costara mucho ms trabajo de realizar si partisemos de cero. Existen diversos framework en Javascript, la mayora ni he probado todava. Podemos ver unos cuantos de ellos en el artculo Listado de distintos Framework Javascript. Mootools es una opcin interesante, bastante difundida y que tiene una serie de ventajas como:

Ligero: el framework no pesa demasiado en Kb y no el procesamiento carga poco al navegador. Modular: mootools se compone de diversos mdulos y podemos seleccionar los que vamos a utilizar para incorporarlos en nuestras pginas web, dejando los otros para que no ocupen tiempo de descarga ni procesamiento. Libre de errores: podemos confiar en el sistema porque Mootools las herramientas de Mootools funcionan perfectamente, sin emitir errores en tiempo de ejecucin. Soportado por una amplia comunidad: existen muchos desarrolladores que lo utilizan con xito y han creado una serie de componentes adicionales ya listos para usar en nuestras pginas web, como calendarios, editores de texto, etc.
Pero tambin hay cosas que no me han gustado tanto, como la documentacin, que resulta un poco escasa. Realmente tiene una buena documentacin, pero la encuentro un poco escueta y falta de explicaciones o ejemplos. Tambin he de decir que me result bastante difcil dar los primeros pasos utilizando el framework, es decir, la curva de aprendizaje de Mootools en el inicio resulta bastante complicada y los ejemplos que encontraba en un principio demasiado complejos para poder entender qu y cmo estaban trabajando. No obstante, despus de realizar con xito unas cuantas pruebas, ya pude empezar a crear mis propios scripts personales. Uno de mis objetivos es preparar una buena serie de ejemplos sencillos para que los nuevos desarrolladores de Mootools puedan comenzar con mayor facilidad que yo en el trabajo con el framework. Para acabar esta introduccin hay que decir que Mootools es gratuito y de cdigo abierto, con licencia MIT, que permite usarlo y modificarlo en cualquier caso de uso. En los artculos siguientes voy a ilustrar el uso de Mootools, con el la versin framework 1.11, que es la que estaba en produccin en el momento de escribir este texto. Dejo la URL de Mootools para consultas y descargas del Framework. http://mootools.net Artculo por Miguel Angel Alvarez
Descarga de Mootools
La descarga de Mootools es sencilla, pero incorpora varias opciones que podemos resumir en este artculo. Tenemos dos cosas que elegir cuando hacemos el download de las libreras: Mdulos que queremos descargar: El cdigo de Mootools est repartido en varios mdulos o libreras, pero nuestras pginas web puede que no realicen todas las acciones que permiten los distintos mdulos. Es decir, puede que descarguemos slo Mootools para realizar efectos con capas, o para invocar fcilmente procesos Ajax. As que, en la hora de descargar el framework, podemos elegir qu mdulos traernos y as liberar a los usuarios que visitan nuestras webs de tiempo de descarga de las libreras y tiempo de interpretacin por parte del navgador. Los mdulos tienen algunas dependencias unos con otros. Pero la herramienta para descarga es "inteligente" y si seleccionamos un mdulo que necesita de otro, lo marca automticamente para la descarga en el paquete que necesitamos. El mdulo Core es necesario para cualquier paquete de libreras Mootools, por lo que siempre se debe descargar y aparece marcado desde el principio. Luego, si por ejemplo marcamos las libreras Element.Event, se marcarn adicionalmente otra serie de libreras que son necesarias para que esta funcione, como Class, Array, Element, etc. Tipo de compresin de la descarga: Adems tambin tenemos que seleccionar el tipo de compresin. Esto es para hacer la descarga de un archivo con las libreras con unas caractersticas especficas que lo hacen pesar ms o menos. Todos los archivos son de texto, con el cdigo listo para incluir en nuestras pginas, pero en unos estn los comentarios al cdigo, otros no tienen saltos de lnea o espacios, en otros incluso de han cambiado los nombres de variables internas por otros ms cortos, etc. Lo que est claro que cuanta mayor compresin, menos ocupar el archivo y menor ser por tanto el tiempo de descarga en nuestra web. Pero cuando estamos desarrollando igual nos conviene una versin con todo el cdigo y la documentacin en el propio archivo, para que podamos guiarnos con ella para depurar cualquier fallo. En esta serie de artculos he utilizado la versin de Mootools 1.11, que era la que estaba para descarga en el momento de hacer este texto. Voy a colocar aqu los archivos para descarga, para que cualquiera que quiera seguir estas explicaciones pueda utilizar las mismas versiones de la librera que us yo en los ejemplos. mootools-release-1.11-completo-comprimido.js.txt El framework completo y comprimido 43Kb mootools-release-1.11-completo-documentado-comentarios.js.txt Mootools completo, documentado y con comentarios 180Kb mootools-1.11-parcial-comprimido.js.txt El framework con las funcionalidades suficientes para hacer los primeros ejemplos, comprimido
20kb No obstante, hay que remarcar que para nuestros proyectos ser mejor descargar Mootools en las versiones ms actuales, que vendr ms completo y con mayor depuracin del cdigo. Adems, desde la propia pgina de descargas podremos seleccionar los mdulos que realmente vamos a necesitar en nuestras aplicaciones. Artculo por Miguel Angel Alvarez
Primer ejemplo con Mootools

Como haba dicho en la introduccin de este manual, Mootools puede resultar difcil para las personas que nunca han trabajado con l o con otro framework Javascript. Por eso tiene sentido hacer un ejemplo inicial muy simple para iniciarse. Este ejemplo realmente no sirve para nada, simplemente para que veamos la facilidad con la que se puede utilizar Mootools para realizar cdigo Javascript compatible con todos los navegadores ms habituales. No obstante, hay que decir que para poder utilizar Mootools debemos tener antes un conocimiento medio o avanzado de Javascript, porque realmente lo que estamos haciendo en estos ejemplos es programar en Javascript funcionalidades para pginas web. En DesarrolloWeb.com tenemos varios manuales de Javascript que nos van a servir para obtener las bases sobre el lenguaje y hasta conocimientos avanzados. Los podemos ver en la seccin de Javascipt a fondo. Adems, para quien no sepa qu es Mootools y donde descargarlo, ser necesario que comience por el principio del manual sobre Mootools. En este ejemplo slo tenemos que conocer unas cuantas cosas de Mootools. Para empezar, hay que incluir el cdigo Javascript de las libreras de Mootools, esto se hace incluyendo el archivo externo de cdigo Javascript con las libreras del framework, que hemos descargado de la pgina de Mootools.
<script src="mootools -1.11.js" type="text/javascript"></script>
La funcin $() En Mootols utilizamos la function $() para recibir un objeto con un elemento de la pgina. $() recibe como parmetro el identificador del elemento, que se ha indicado con el atributo id de la etiqueta HTML de lo que queremos recibir. Las libreras de Element.js, dentro del paquete llamado NATIVE, contienen varios mtodos que podemos invocar sobre los objetos element, para realizar cosas con ellos, analizarlos o alterar su estado. Nosotros vamos a utilizar dos mtodos de Element: Mtodo setOpacity() Es para alterar la transparencia de un elemento. Recibe un valor entre 0 y 1 para definir cuanto de opaco o transparente que es un elemento. El valor 0 es transparente y el valor 1 es opaco del todo.
Mtodo setStyle() Para alterar cualquier estilo CSS del elemento. Recibe dos parmetros, el primero el nombre del estilo y el segundo el valor del estilo. Con estos datos, ya conocemos todo lo que debemos saber de Mootools para entender el siguiente ejemplo. Primero voy a poner un enlace al ejemplo en marcha para que se vea lo que hemos hecho. El cdigo del ejemplo es el siguiente:
<html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"> <title>ejemplo bsico con mootools</title> <script src="mootools-comprimido-1.11.js" type="text/javascript"></script> <script> window.addEvent('domready', function(){ opaco_actual = 0; capa_transicion = null; cargado = true; }); </script> </head> <body> <div id="texto_presentacion">Hola, esto es un texto para hacer una prueba con Mootools. Simplemente estoy alterando propiedades de el DIV donde est este texto.</div> <br> <form> <input type="button" <input type="button" <input type="button" <input type="button" <input type="button" <br> <br> <input type="button" <input type="button" <input type="button" </form> </body> </html> value="Opacidad value="Opacidad value="Opacidad value="Opacidad value="Opacidad 0%" onclick="$('texto_presentacion').setOpacity(0);"> 25%" onclick="$('texto_presentacion').setOpacity(.25);"> 50%" onclick="$('texto_presentacion').setOpacity(.5);"> 75%" onclick="$('texto_presentacion').setOpacity(.75);"> 100%" onclick="$('texto_presentacion').setOpacity(1);">
value="Tamao 200px" onclick="$('texto_presentacion').setStyle('width', '200px');"> value="Pon borde" onclick="$('texto_presentacion').setStyle('border', '1px solid #ff0000');"> value="Tamao 50%" onclick="$('texto_presentacion').setStyle('width', '50%');">
Veremos que hemos incluido las libreras Mootools en el head de la pgina, con un archivo externo Javascript, cargado con la etiqueta <script> . Tambin debemos fijarnos que tenemos una capa, creada con un para especificar su nombre: id="texto_presentacion".
<div>
que tiene el atributo id
Luego, tenemos un formulario con una serie de botones, cada uno con un cdigo Javascript que se ejecuta cuando el usuario hace clic sobre el botn. La primera serie de botones alteran la opacidad del elemento.
$('texto_presentacion').setOpacity(0);
Con $('texto_presentacion') recibimos un objeto que es el elemento que tena el id="texto_presentacion". Luego sobre ese objeto invocamos el mtodo setOpacity() pasando por parmetro el valor de opacidad. Con eso se cambia la transparencia de la capa. Luego tenemos otra serie de botones que alteran algunos atributos de estilo del elemento.
$('texto_presentacion').setStyle('width', '200px');
Esto altera el atributo CSS width y lo cambia por el valor 200px, con lo que la capa texto_presentacion tendr un ancho de 200 pixel.
$('texto_presentacion').setStyle('border', '1px solid #ff0000');
Con esto aleramos el atributo CSS border, y le pasamos un nuevo valor que indica que tenga un borde slido de 1 pixel y con color rojo.
$('texto_presentacion').setStyle('width', '50%');
Con esto ltimo cambiamos de nuevo el atributo width para poner una anchura de 50%, es decir, la mitad del espacio disponible donde est el elemento. Espero que el ejemplo haya sido suficientemente sencillo y claro para entender un poco la facilidad con la que podemos realizar acciones, ms o menos complejas, en la pgina web. Todo sin preocuparnos de las particularidades de cada navegador. Podemos probarlo en distintos browsers para ver que funciona perfectamente, es decir, hemos conseguido un cdigo cross-browser, compatible con todos los navegadores, con un trabajo casi nulo. Dejo de nuevo el enlace para ver el ejemplo en marcha. Artculo por Miguel Angel Alvarez
Segundo ejemplo con Mootools

Para continuar el manual de Mootools, vamos a ver un segundo ejemplo de gran sencillez para hacer un scroll en una capa por Javascript. Este sistema de scroll o desplazamiento sera muy complejo de hacer sin la ayuda del framework como Mootools. Nosotros lo vamos a hacer con una simple ejecucin de una sentencia Javascript. Lo primero aclarar que este artculo ya da por entendidos algunos conceptos que hemos visto en el manual de Mootools, por lo que ser necesario leer los anteriores captulos. Ahora voy a poner el enlace al ejemplo en marcha para que podamos verlo en funcionamiento antes de pasar a visualizar el cdigo. El presente ejemplo utiliza el mdulo llamado Element.Dimensions.js, que tiene dos mtodos que nos van a servir para hacer el desplazamiento: Mtodo scrollTo() Sirve para desplazar un elemento a una nueva posicin. Recibe dos parmetros, las
Manual de Mootools: www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 6
coordenadas X e Y a las que queremos desplazar el scroll del elemento. Mtodo getSize() Sirve para obtener las dimensiones de un elemento, as como la posicin actual del scroll o desplazamiento que se haya realizado sobre el mismo. Devuelve un objeto con una serie de propiedades que son las informaciones sobre tamao y desplazamiento del elemento. Entre las propiedades tiene la que nos interesa, que se llama scroll y a su vez, scroll tiene dos propiedades que son las X e Y del scroll que se haya realizado. Por ejemplo:
mielemento.getSize().scroll.x mielemento.getSize().scroll.y
Nos devolvera los pxel que se haya desplazado el elemento mielemento en la horizontal. Nos devolvera el desplazamiento vertical que se haya realizado sobre el elemento mielemento. El cdigo de este sencillo ejemplo es el siguiente:
<html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"> <title>Ejemplo 2 con Mootools</title> <script src="mootools-comprimido-1.11.js" type="text/javascript"></script> </head> <body> <div id="texto_scroll" style="overflow: auto; height: 70px; width: 400px;"> <div style="width:100%;"> Hola, esto es un texto que voy a poner de prueba para hacer un scroll rpidamente con Mootools. <br> La verdad es que este framework de javscript funciona muy bien y permite un desarrollo sorprendentemente rpido. <br> En pocos pasos y con absolutamente ningn conocimiento del Framework he conseguido hacer esta pgina. Me he ayudado de la documentacin y de unos ejemplos que he encontrado en la pgina: http://clientside.cnet.com/wiki/mootorial/ <br> Ahora tendra que intentar ir poco a poco para conocer todo el funcionamiento en detalle. </div> </div> <br> <script> capa_desplazar = $('texto_scroll'); </script> <a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a> // <a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a> </body> </html>
Como vemos, primero hemos incluido dentro del head de la pgina el script con el framework de Mootools, con la etiqueta <script> . Luego hemos creado una capa con un texto y una serie de estilos CSS para que tenga un tamao definido, que no permita ver el contenido completo del texto, y unas barras de desplazamiento para hacer el scroll. A continuacin hay un script que crea una variable global a la pgina que contiene la capa que
queremos desplazar.
<script> capa_desplazar = $('texto_scroll'); </script>
Luego hay un par de enlaces que son los que, pulsndolos, desplazar automticamente el texto arriba o abajo.
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a>
Con "javascript:" metido en un href de un enlace, estamos indicando que se tiene que ejecutar esa sentencia javascript al pulsar el link. Y la sentencia es:
capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);
Eso indica que en la variable de la capa que habamos creado antes, capa_desplazar, se tiene que ejecutar el mtodo scrollTo(). Este mtodo recibe como primer parmetro 0, porque no queremos desplazarlo horizontalmente. Luego como desplazamiento vertical ponemos el desplazamiento vertical del elemento + 20 pxel. El desplazamiento vertical actual del elemento lo sacamos con capa_desplazar.getSize().scroll.y, tal como habamos explicado antes en este artculo. El enlace de para desplazar el scroll hacia arriba sera muy similar al que acabamos de ver.
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>
La nica diferencia es que ahora hacemos un scrollTo() a cero en la horizontal y a el scroll actual - 20 pxel. Espero que se haya entendido el ejemplo. Podemos ir a la documentacin de Mootools, del mdulo Element.Dimensions.js para obtener la descripcin completa de los mtodos que hemos utilizado. Dejo de nuevo el enlace al ejemplo en funcionamiento. Hasta aqu en este manual hemos visto un par de ejemplos muy simples sobre Mootools, este segundo un poco ms prctico. Pero el objetivo no es sino expresar por medio de un cdigo la sencillez con la que se programa con Mootools para conseguir efectos que de otra manera nos hubiera costado mucho trabajo programar. Y todo compatible con los navegadores ms habituales. Artculo por Miguel Angel Alvarez
Componentes Mootools
Mootools, aparte de ofrecer un nutrido grupo de libreras para realizar efectos interesantes en Javascript, tiene una gentil comunidad de desarrolladores que crean componentes que se pueden utilizar en las pginas web que estemos realizando. As que podemos beneficiarnos del esfuerzo de desarrollo de otras personas para realizar pginas con efectos impactantes rpidamente.
No vamos por ahora a explicar cmo poner en marcha estos componentes, slo a comentarlos por encima y mostrar ejemplos. Tenemos una seccin de DesarrolloWeb.com donde vamos a ir colocando distintos scripts, plugins y componentes realizados con mootools: Scripts Mootools. Interfaz de pestaas Si queremos utilizar en una pgina web una interfaz de pestaas, se ofrece un componente muy interesante en: MooTabs. Este componente permite diversos tipos de pestaas con variados efectos y transiciones e incluso la obtencin por Ajax de los contenidos de las diversas pestaas. La instalacin y configuracin de las pestaas es sencilla, pero encontr un problema que identifico como incompatibilidad entre las versiones mootools 1.1 y la 1.11, porque si no utilizas la versin 1.1 no funciona. Popup DHTML Slimbox Con este componente podemos mostrar imgenes cuando un usuario hace un clic en una miniatura. Las imgenes se muestran con una especie de ventana emergente dinmica, que se ajusta a las dimensiones de la imagen. Adems, el fondo se queda como grisaceo, en segundo plano. Podemos conocer ms del componente y verlo en marcha en su propia pgina web: http://www.digitalia.be/software/slimbox Pase de diapositivas Hay varios componentes de pase de diapositivas o efectos visuales sobre imgenes que van cambiando. Tal vez el ms impactante y con mayores opciones de configuracin sea el SmoothGallery. El componente es tan espectacular como lo podra ser una animacin en Flash, con la particularidad que slo utiliza Javascript para su puesta en marcha (y HTML con CSS, por supuesto). Podemos ver la pgina del componente donde tiene diversos demo con distintas funcionalidades y configuraciones: http://smoothgallery.jondesign.net/ Calendario o seleccionador de fecha Otro componente muy til es un calendario para seleccionar fechas, que permite escoger una fecha determinada visualmente. Nosotros tendramos un campo fecha que al pulsarlo se mostrara un calendario del mes y ao actuales. Podemos movernos por el calendario cambiando el mes y el ao y luego pulsando cualquier da del calendario se seleccionara esa fecha determinada. Uno de los calendarios ms atractivos visualmente que he visto es el que ofrecen en esta direccin: http://www.electricprism.com/aeron/calendar/ Conclusin
Como se puede ver, las interfaces y funcionalidades que se pueden hacer con Mootools son tantas como la imaginacin nos permita concebir. Lo que est claro por mi experiencia hasta estos momentos es que se necesitan bastantes conocimientos de Javascript, HTML y CSS para poner en marcha los componentes, pues aunque muchos de ellos funcionan de manera modular, estn compuestos de varios archivos con distintos cdigos que tenemos que saber incluir y utilizar en nuestras pginas. Algunos problemas que he encontrado yo:

A veces existen problemas de versiones, porque los componentes utilizaban una versin distinta de Mootools que la que estamos utilizando nosotros Algunas veces la documentacin es escasa. Si da un problema en un navegador es casi imposible revisar el cdigo para tratar de arreglarlo. Una simple declaracin de estilos CSS te puede tirar al traste todas las pruebas y hacerte perder horas de tu precioso tiempo.
Esto es lo que veo yo que tienen algunos de los componentes con los que he trabajado. Espero que este manual nos ayude a solucionar ms rpidamente cualquier eventualidad, aunque por ahora este artculo simplemente quera mostrar un poco las cosas avanzadas que se pueden realizar con Mootools. Una vez ms recuerdo que en la seccin de Scripts Mootools de DesarrolloWeb.com iremos publicando los componentes tiles que encontremos con Mootools. Artculo por Miguel Angel Alvarez
Evento domready de Mootools

El framework Javascript Mootools define un evento que vamos a utilizar infinidad de veces a lo largo del Manual de Mootools. Este mtodo se puede asociar al objeto window, para ejecutar acciones cuando el DOM ha sido cargado por completo y est listo para poder hacer cualquier tipo de acciones con l. Cuando tenemos el DOM Ready (DOM listo) Bueno, sabemos que una pgina tiene un cdigo HTML y adems una serie de elementos externos, que se cargan aparte del propio cdigo de la pgina. Si nuestra pgina es larga y contiene diversas imgenes, scripts, declaraciones de estilos u otros elementos que tengan cierto peso, puede tardar un buen tiempo hasta que todo ha terminado de cargarse. En las aplicaciones web que tienen componentes del lado del cliente, que se ejecutan mediante Javascript, muchas veces se tienen que crear funciones de inicializacin de esos componentes, para insertarlos en la pgina, posicionarlos, etc. Por ejemplo, podramos desear ejecutar acciones Javascript para realizar una carga de datos por Ajax o para generar contenidos dinmicos en la pgina, insertando elementos como una barra de navegacin generada automticamente, un calendario o lo que podamos necesitar. Todos estos componentes que se deben insertar dinmicamente en una pgina, en teora,
10
deben ser incluidos cuando el navegador est preparado para recibirlos. Esto es, cuando el DOM (la jerarqua de objetos del navegador a disposicin de Javascript para alterar los elementos de la pgina) est cargado por completo en el navegador y listo para ser alterado. Quien conozca las bases de Javascript sabr que existe un evento "onload", que sirve para ejecutar acciones cuando se termina la carga de la pgina. Pero este evento se ejecuta cuando TODOS los elementos de la pgina han terminado de cargarse, es decir, la propia pgina y todo lo que tenga, como imgenes, banners y otro tipo de recursos externos. As que, si nuestra pgina tiene, por ejemplo, muchas imgenes muy pesadas, puede que onload tarde demasiado en ejecutarse y hasta entonces no se mostraran los elementos que se desean insertar dinmicamente. Pero mucho antes que finalice esa carga de elementos externos, la pgina podra haber estado lista para ejecutar acciones Javascript que alteren el DOM. En concreto, cuando una pgina termina de cargarse y procesarse, aunque se continen descargando imgenes o elementos externos, el DOM estar listo para realiza acciones. Cmo utilizar el evento domready de mootools Espero que las explicaciones anteriores se hayan entendido. En resumen, domready es un evento que se ejecuta cuando la pgina est lista para realizar acciones que afecten al DOM, es decir, cuando el DOM est listo. Debe quedar claro que el DOM puede estar listo mucho antes que se terminen de cargar todos los elementos de la pgina, sobretodo si la pgina tiene imgenes o elementos externos que ocupen mucho espacio en bytes. Entonces, para ejecutar acciones cuando el DOM est listo en Mootools se hace esto:
window.addEvent('domready', function() { //aqu las acciones que quieras realizar cuando el DOM est listo alert ("Ahora el DOM est listo"); });
Eso es todo. Simplemente con este cdigo podemos incluir todas las acciones que necesitemos para ejecutarlas slo en el momento que el DOM est listo.
Importante: El evento domready slo se puede utilizar con el objeto window del navegador. Para vuestra referencia, la declaracin del evento domready se encuentra dentro del paquete Utilities/DomReady.
Aqu puede verse un ejemplo de uso del evento domready de mootools. Artculo por Miguel Angel Alvarez
Core.js Mootools
Las libreras de Mootools estn divididas en varios paquetes, los cuales podemos necesitar o no para determinados proyectos. En este caso vamos a explicar el paquete core.js, que contiene funciones que forman parte del ncleo de mootools. Esta librera contiene una serie de funciones sencillas, de propsito general, que se utilizan en todo el framework y que nosotros tambin podemos utilizar para crear aplicaciones Javascript. El core de mootools es requerido por todas las otras libreras del framework. Se puede utilizar
de manera independiente, pero no tiene mucho sentido porque no ofrecen mucha utilidad por si solas. El core de mootools contiene diversas funciones, aunque de momento no las vamos a ver todas, porque para poder explicarlas necesitaramos explicar antes algo de programacin orientada a objetos. No obstante, estas funciones nos van a servir para ir practicando con aspectos bsicos de mootools, al alcance de cualquiera que conozca Javascript de antemano.
Referencias: Podemos aprender Javascript en nuestra seccin Javascript a fondo. Adems, dejamos el enlace del manual donde se engloba este artculo: programacin con el framework mootools.
$defined Esta funcin sirve para saber si existe una variable o un objeto. La funcin devuelve true si el parmetro que se le pasa no es null o undefined. Veamos un par de ejemplos:
$defined(null);
Devolvera false.
mivariable = 1; $defined(mivariable);
Devolvera true. Podemos ver un ejemplo de funcionamiento de $define() en una pgina aparte. $type Esta funcin se utiliza para saber el tipo de una variable, es decir, el tipo de dato que contiene la variable, por ejemplo, si es un objeto, un nmero, un boleano, etc. Se le pasa por parmetro una variable y devuelve un string que identifica el tipo de la misma. Por ejemplo:
cadena = "sol"; $type(cadena);
Devuelve "string".
numero = 23; $type(numero);
Devuelve "number".
var x = new Array(1,2,3); $type(x);
Devuelve "Array". $type puede devolver los siguientes valores: 'element' si el parmetro es un elemento DOM (objetos del navegador) 'textnode' si el parmetro es un nodo de texto del DOM 'whitespace' si el parmetro es un nodo de espacio en blanco del DOM
'arguments' si el parmetro es un objeto argumento 'object' si el parmetro es un objeto 'string' si el parmetro es una cadena de caracteres 'number'si el parmetro es un nmero 'boolean' si el parmetro es una variable boleana (true/false) 'function' si el parmetro es una funcin 'regexp' si el parmetro es una expresin regular 'class' si el parmetro es una clase (de programacin orientada a objetos, creada como una nueva clase o extendiendo otra) 'collection' si el parmetro es una coleccin htmlelements 'array' si el parmetro es un array Para todos los dems casos, o si el parmetro es undefined o null, $type devuelve false (valor boleano) Podemos ver un ejemplo de funcionamiento de $type() en una pgina aparte. $chk Hace un chequeo de un parmetro y devuelve un boleano que puede ser: Verdadero: en caso que el valor recibido por $chk() exista, pudiendo tener el valor cero. Falso: en el caso que el valor recibido por parmetro no exista. Esta funcin es til para permitir valores iguales a cero en el valor a evaluar su existencia. Ejemplo:
var mivariable=0; if ($chk(mivariable)) alert ("vale cero o cualquier otro valor"); else alert ("no existe el valor");
En este caso se ejecutara el alert de "vale cero o...". Si por ejemplo mivariable hubise sido null, dira que no existe el valor. En el siguiente artculo seguimos viendo funciones de core.js de mootools. Artculo por Miguel Angel Alvarez
Core.js de Mootools (parte II)

En el artculo anterior del manual de Mootools habamos presentado las primeras explicaciones sobre las funciones de la librera core.js. Ahora vamos a seguir explicando algunas de las funciones que forman parte del core de mootools. $random Esta funcin sirve para obtener nmeros aleatorios de una manera sencilla. Recibe dos parmetros, que son un valor mnimo y uno mximo, por ese orden, y devuelve un nmero aleatorio entre esos dos parmetros, incluyndolos. Por ejemplo:
$random(3,7);
13
Devuelve un nmero aleatorio del 3 al 7. Podra ser 3, 4, 5, 6 7. Por ejemplo este script imprimira por pantalla 100 nmeros aleatorios entre el 3 y el 7.
for (i=0; i<100; i++){ aleatorio = $random(3,7); document.write (aleatorio); document.write ("<br>"); }
Podemos ver este script en marcha en una pgina aparte. $time Devuelve el timestamp actual. Un nmero entero con los milisegundos que han pasado desde 1970. Se llama sin pasar ningn parmetro.
$time()
Podemos ver este script en marcha en una pgina aparte. $clear Esta funcin sirve para eliminar un setTimeout o un interval. Un setTimeout sirve para ejecutar instrucciones Javascript con un retardo y con $clear podemos liberar ejecuciones que se hayan planificado para un futuro. Vamos a verlo en un ejemplo en el que creamos un setTimeout y luego lo eliminamos.
temporizador = setTimeout('alert("hola")', 2000); temporizador = $clear(temporizador);
Con estas dos sentencias el resultado ser que el navegador no presentar ningn resultado. Podemos verlo en marcha en una pgina aparte. Clase Window Adems, las libreras core.js implementan unas nuevas propiedades en la clase Window de la jerarqua de objetos del navegador. Estas nuevas propiedades sirven para realizar deteccin del navegador que est ejecutando los scripts. Por ejemplo, si el navegador que est ejecutando la pgina es Internet Explorer, se crea la propiedad window.ie y se le asigna el valor true. Si el navegador es Firefox, se crea con valor true la propiedad window.gecko. Por ejemplo, se pueden utilizar las propiedades de la siguiente manera:
if (window.ie){ document.write ("Ests en Internet Explorer"); } if (window.gecko){ document.write ("Ests en Mozilla/Gecko"); } if (window.opera){
14
document.write ("Ests en Opera"); }
Podemos ver este script en marcha en una pgina aparte. Vamos a dejar para ms adelante otras caractersticas del core.js de mootools, porque tenemos que explicar previamente algunos conceptos sobre programacin orientada a objetos. Tambin nos detendremos en la utilizacin de las libreras core.js en casos prcticos, como por ejemplo la deteccin del navegador, que es un punto interesante para detallar con calma. Artculo por Miguel Angel Alvarez
Clases en Mootools
Mootools es un framework Javascript para realizar programas o scripts con programacin orientada a objetos. Provee una serie de utilidades para crear clases de una manera ms elaborada que si programsemos slo con Javascript. A la vez, Mootools dispone una sintaxis particular para la realizacin de clases, que permite escribir cdigo ms til con menos lneas. Todo esto lo tenemos que conocer, ya que cuando programamos utilizando Mootools en realidad y por decirlo de alguna manera, estamos programando en sintaxis Mootools en lugar de sintaxis Javascript. De momento, para seguir estas explicaciones, hay que conocer al menos las bases de la programacin orientada a objetos. Para ello recomendamos leer la pequea introduccin a programacin orientada a objetos que hemos publicado en DesarrolloWeb.com. Dentro de lo que es la programacin orientada a objetos ese artculo slo comenta una pequea parte, pero aun as nos dar algunas ideas y aclaraciones que ayudarn a entender este manual. Lo cierto es que la programacin orientada a objetos no es difcil, pero s que puede ser delicado al menos al principio. Por supuesto, tambin convendr haber seguido hasta este punto nuestro manual de Mootools. Clases en Mootools Cuando creamos una clase en Mootools tenemos que hacerlo creando un nuevo objeto de la clase Class. La clase Class, tiene la arquitectura bsica para crear clases de programacin orientada a objetos en Mootools. Una clase se crea de esta manera:
var NombreClase = new Class({ //contenido de la clase (propiedades y mtodos) });
Cualquier persona con un poco de experiencia en programacin orientada a objetos ver que se crea como si instacisemos un objeto de la clase Class. Con ello hacemos una nueva clase a partir de Class. Dentro colocamos el contenido de la clase, tanto sus propiedades como sus mtodos. Hay que fijarse tambin que el contenido de la clase se escribe entre parntesis y entre llaves.
15
Definir propiedades de las clases A la hora de definir el contenido de la clase podemos especificar las propiedades que tendr la clase que estamos definiendo. Esto se hace entre las llaves, colocando una coma de separacin entre cada una de las propiedades. Adems, debemos especificar directamente el valor de las propiedades, con esta sintaxis:
var MiClasePropiedades = new Class ({ propiedad1: propiedad2: propiedad3: propiedad4: }); 232, "texto", true, null
Como se puede ver, se ha definido una nueva clase con nombre MiClasePropiedades y con 4 propiedades con distintos valores. Asimismo conviene fijarse que las propiedades van separadas por una coma, menos la ltima que no debemos ponerla por no tener ninguna otra propiedad detrs. Para que no de error de sintaxis estamos obligados a definir los valores de las propiedades. En ltimo caso, si no deseamos asignar ningn valor a la propiedad, siempre podemos colocar null, como hemos hecho nosotros en la propiedad4. Definir mtodos de clases en Mootools Los metodos o funcionalidades asociadas a las clases, se pueden definir de manera similar a como se definen propiedades. Es decir, dentro de las llaves que declaran los contenidos de la clase, con el nombre del mtodo seguido de la funcin que va a contener el cdigo del mtodo. Utilizamos esta sintaxis para la definicin de mtodos:
var MiClaseMetodos = new Class ({ metodo1: function(){ alert ("estoy ejecutando el mtodo"); }, metodo2: function(parametro){ alert ("estoy recibiendo un parmetro = " + parametro); } });
En el cdigo anterior se ha creado una nueva clase llamada MiClaseMetodos, que tiene dos mtodos: metodo1 y metodo2. Cada uno de los dos mtodos es una funcin, cuyo cdigo se ha definido tambin dentro de la declaracin de la clase. Por una parte, metodo1 es una funcin que simplemente muestra un mensaje de alerta. Por otra parte, metodo2 es una funcin que recibe un parmetro y escribe un mensaje de alerta que muestra el valor de ese parmetro. Entre cada mtodo, igual que ocurra entre cada propiedad, debemos colocar una coma. Artculo por Miguel Angel Alvarez
16
Instanciar y trabajar con objetos de clases creadas con Mootools

Instanciar objetos es el proceso de generar un ejemplar de una clase, es decir, la clase es como una declaracin de una forma y el objeto es un caso o elemento concreto que responde a esa forma. En este artculo vamos a continuar y desarrollar un poco ms los ejemplos que vimos en el artculo anterior del manual de Mootools: Clases en Mootools. Los objetos se crean a partir de una clase. Con el nombre del objeto (o la variable que va a contener ese objeto que deseamos crear), seguido de un signo igual y luego la palabra new seguida del nombre de la clase y unos parntesis. Para la clase que habamos declarado en el ejemplo de las propiedades, la clase MiClasePropiedades, podramos crear instancias de esta de la siguiente manera:
miObjeto = new MiClasePropiedades();
Podemos crear infinitos objetos a partir de una clase, cada uno sera una instancia de la clase o un ejemplar de esa clase.
miSegundoObjeto = new MiClasePropiedades(); otroObjeto = new MiClasePropiedades();
Para la clase que habamos definido en el ejemplo de los mtodos, se crearan objetos de la siguiente manera:
miObjetoDeOtraClase = new MiClaseMetodos();
Acceder a propiedades de objetos Para acceder a propiedades de los objetos utilizamos el nombre del objeto, seguido del operador punto "." y el nombre de la propiedad.
miObjeto.propiedad1
Esta propiedad es como una variable que contiene un valor que est dentro del objeto y es particular a este. Llamar mtodos de objetos Podemos acceder a los mtodos o mejor dicho, invocar a los mtodos de los objetos a partir del nombre del objeto, el operador punto, el nombre del mtodo que queremos ejecutar y los partesis (como si llamsemos a una funcin). Para el ejemplo que vimos a la hora de explicar los mtodos en Mootools, llamaramos al primer mtodo de la siguiente manera.
miObjeto.metodo1();
Dentro de los parntesis indicamos los parmetros que debe recibir el mtodo, si es que el
mtodo se declar para recibir parmetros.

miObjeto.metodo2("valor del parmetro");
Ejemplos de creacin de clases con propiedades y mtodos Ahora vamos a ver el cdigo Javascript completo de los ejemplos que hemos utilizado para explicar tanto las propiedades y mtodos. La clase que muestra la creacin y uso de propiedades:
var MiClasePropiedades = new Class ({ propiedad1: 232, propiedad2: "texto", propiedad3: true, propiedad4: null }); miObjeto = new MiClasePropiedades(); alert(miObjeto.propiedad1);
Podemos ver este ejemplo en marcha en el siguiente enlace. Ahora veamos la clase que muestra la creacin y utilizacin de mtodos con Mootools:
var MiClaseMetodos = new Class ({ metodo1: function(){ alert ("estoy ejecutando el mtodo"); }, metodo2: function(parametro){ alert ("estoy recibiendo un parmetro = " + parametro); } }); miObjeto = new MiClaseMetodos(); miObjeto.metodo1(); miObjeto.metodo2("valor del parmetro");
Veamos en una pgina aparte este script en funcionamiento. Ms adelante en este manual veremos casos ms prcticos de clases y objetos, pero por ahora estas notas servirn para ir hacindose una idea de cmo funciona todo el tema de programacin orientada a objetos en Mootools. Artculo por Miguel Angel Alvarez
Constructores en Mootools
En nuestro manual de Mootools ya hemos empezado a conocer cosas sobre el uso de clases. Hemos creado clases y objetos a partir de ellas, hemos conocido lo que son las propiedades y los mtodos, pero todava nos queda mucho camino para recorrer antes que consigamos dominar las clases en Mootools.
18
Ahora le toca el turno a los constructores, que en Mootools tienen un mtodo especial de declarase. En este artculo tambin veremos la creacin de una clase completa, con funcionalidades que nos servirn para afianzar los conocimientos adquiridos. Qu es un constructor Un constructor en programacin orientada a objetos se encarga de resumir la tarea de inicializacin de los objetos. Al definir una clase podemos declarar un constructor, opcionalmente. Si existe ste, en el momento de instanciar un objeto a partir de esa clase, se realizar una llamada al constructor para inicializar las propiedades del objeto creado. Al constructor se le pueden pasar parmetros que se podrn utilizar para inicializar el objeto. Declaracin de un constructor en Mootools Un constructor de una clase Mootools se declara como si fuera un mtodo corriente, pero con un nombre fijo: initialize. Dicho mtodo ser una funcin que puede recibir parmetros. Dentro de la funcin se podrn realizar diversas acciones, siendo lo ms corriente la asignacin de valores a las propiedades del objeto. Veamos un ejemplo de clase con su constructor:
var ClaseConstructor = new Class({ propiedad1: null, initialize: function(){ this.propiedad1 = 1; } });
Como se puede ver, el objeto se ha creado con una propiedad, definida en la lista de propiedades con valor null. Luego, en el constructor se actualiza el valor de la propiedad y se le asigna 1. Habra que remarcar aqu la utilizacin de this, que en lneas generales sirve para referenciar al objeto sobre el que se est invocando el mtodo. Como hemos dicho, un constructor se ejecuta cuando se est creando un objeto, durante el proceso de instanciacin. Por lo tanto, this servir para hacer referencia al objeto que se est construyendo. Dado el constructor que hemos creado, todos los objetos de la clase ClaseConstructor, en el momento de su creacin, tendrn el valor de propiedad1 = 1. Otro ejemplo de constructor Seguimos las explicaciones con este otro ejemplo de clase realizada con mootools, que tiene un constructor. El nombre de la clase es Vehiculo y hemos simplificado e idealizado bastante el funcionamiento de un vehculo cualquiera. Tendr dos propiedades: estado (Detenido o En marcha) y color, configurable por medido del constructor. Adems crearemos dos mtodos en la clase para poner en marcha o parar el vehculo.
var Vehiculo = new Class({ estado: "Detenido", initialize: function(color){ this.color = color; }, arrancar: function(){ this.estado = "En marcha"; }, detener: function(){ this.estado = "Detenido";
19
} });
Vemos que la clase Vehiculo tiene en principio una propiedad, de nombre estado y que el valor de la propiedad, en el momento de declararla se ha marcado como Detenido. Luego vemos en constructor, en el que se recibe un parmetro, que es el color del vehculo. El color recibido por parmetro se asigna a this.color. Con ello se genera una propiedad nueva en el objeto, llamada color al que se le asigna el color recibido en el parmetro. Con esto vemos que, aparte de definir las propiedades de la clase a la hora de declarar sus componentes, tambin se pueden crear propiedades a medida que se ejecutan los mtodos. Como el constructor siempre se ejecuta al crear el objeto, podemos estar seguros que todos los objetos creados tendrn la propiedad color, asignada al valor de color definido en el parmetro. Luego vemos dos mtodos que simplemente actualizan la propiedad estado, para marcar si el vehculo est en marcha o detenido. Podramos crear un objeto de la clase Vehiculo de la siguiente manera:
var miVehiculo = new Vehiculo("rojo");
Este objeto tendr como propiedad color el valor rojo. Por tanto, si mostramos en una caja de alerta la propiedad, nos aparecera rojo:
alert (miVehiculo.color);
Podemos crear otro objeto de la clase Vehiculo con color azul, de esta manera:
var miVehiculo = new Vehiculo("azul");
Veamos algunos usos simples que podramos dar al objeto creado, para mostrar el estado, y para cambiarlo con los mtodos arrancar y detener.
var miVehiculo = new Vehiculo("rojo"); alert (miVehiculo.color); alert (miVehiculo.estado); miVehiculo.arrancar(); alert (miVehiculo.estado); miVehiculo.detener(); alert (miVehiculo.estado);
Podemos ver el ejemplo en ejecucin de esta clase vehculo y su uso en una pgina aparte. Artculo por Miguel Angel Alvarez
Otras formas de extender clases y objetos

En el artculo Extend: Extendiendo clases con Mootools explicamos qu es la extensin de clases, para crear clases nuevas, a partir de otras ya creadas, a las que se le aaden caractersticas y funcionalidades nuevas. En este caso vamos a seguir viendo modos de trabajo con Mootools a la hora de extender clases. Extender un objeto con las caractersticas y funcionalidades de otro Vamos a aprender a utilizar la funcin $extend() del core de Mootools, para extender un
objeto con otro. Con $extend() indicamos como parmetros dos objetos y entonces conseguimos que el objeto del primer parmetro se extienda con las funcionalidades y propiedades del objeto del segundo parmetro. Tenemos estas dos clases de las que hemos creado dos objetos:
var Ordenador = new Class({ cpu: "Intel 486", hd: "180 Mb", procesar: function(x){ alert("Procesando " + x); } }); miOrdenador = new Ordenador(); var Portatil = new Class({ cpu: "Pentium", pantalla: "800x600", cargaBateria: function(){ alert("Cargando bateria"); } }); miPortatil = new Portatil();
Son los objetos miOrdenador, de la clase Ordenador. Y miPortatil, de la clase Porttil. Ambos tienen propiedades y mtodos, siendo que alguna propiedad (cpu) est repetida en uno y en el otro, pero con valores distintos. Ahora podemos hacer uso de $extend() de esta manera:
//extiendo el objeto miOrdenador con las propiedades y mtodos de miPortatil $extend(miOrdenador, miPortatil);
Con esto he conseguido que el objeto miOrdenador adquiera las propiedades y mtodos de miPortatil. Despus de este paso todas las propiedades y mtodos de ambos objetos estarn presentes en miOrdenador y miPortatil quedar inalterado. Adems la propiedad cpu de miOrdenador ser igual al valor que haba en el objeto miPortatil. Podramos ejecutar estas lneas para comprobar los valores de los parmetros y la presencia de los distintos mtodos.
//el campo CPU, repetido, toma el valor del objeto del segundo parmetro alert(miOrdenador.cpu); alert(miOrdenador.hd); //el campo pantalla, que era de miPortatil, queda ahora dentro de miOrdenador. alert(miOrdenador.pantalla); miOrdenador.procesar("algo"); //el mtodo de miPortatil queda tambin en miOrdenador. miOrdenador.cargaBateria();
Como sealbamos, miPortatil no ser alterado, eso lo podemos comprobar tratando de mostrar la propiedad hd, que no debera estar en ese objeto.
//el objeto miPortatil queda inalterado alert(miPortatil.hd); //mostrar undefined
21
Veamos el ejemplo en marcha en una pgina aparte. Extender una clase a travs de un objeto Entre las posibilidades de extend y la extensin de clases en mootools, se pueden aadir propiedades y mtodos de un objeto a una clase de mootools. Esto es un poco extrao, puesto que no se entiende muy bien para qu puede servir extender clases con objetos, ya que adems son cosas distintas, pero el caso es que se puede y he decidido poner un ejemplo, por si en algn momento a alguien le sirve de utilidad. Para continuar con el ejemplo de clases anterior, vamos crear una nueva clase a partir de la clase Ordenador, que se ha extendido con las propiedades y mtodos del objeto miPortatil.
var OrdenadorPortatil = Ordenador.extend(miPortatil);
Con ello tenemos la clase OrdenadorPortatil, que tiene las propiedades y mtodos de la clase Ordenador, ms los que haba en el objeto miPortatil. Podemos probar ahora el funcionamiento de esta clase OrdenadorPortatil a partir de este cdigo:
miOrdenador2 = new OrdenadorPortatil(); alert(miOrdenador2.cpu); alert(miOrdenador2.hd); alert(miOrdenador2.pantalla); miOrdenador2.procesar("algo");
Podemos ver el ejemplo en marcha en una pgina aparte. Artculo por Miguel Angel Alvarez
Implement: implementando clases en Mootools

Continuamos el Manual de Mootools con explicaciones sobre el implement de las clases de Mootools. Implement es un mtodo de Class, por tanto es un mtodo que tendr cualquier nueva clase que creemos con Mootools (Recordemos que cualquier clase creada con Mootools en realidad es un objeto de la clase Class). Implement sirve para modificar una clase creada anteriormente, aadiendo nuevas propiedades o mtodos. Para explicar el funcionamiento de implement podemos utilizar un ejemplo. Imaginemos que tenemos la clase coche. El coche puede tener color, modelo y motor, luego a un coche podemos arrancarlo y pararlo, moverlo y detenerlo. Pero ahora imaginemos que necesitamos complicar un poco la clase coche, para aadirle un nmero de plazas para pasajeros y la posibilidad de llenar o vaciar dichas plazas con personas. Entonces lo que haremos ser implementar en la clase coche, ya creada anteriormente, la propiedad de nmero de plazas, as como los mtodos de ocupar y desocupar los asientos. Con implement no se crean nuevas clases, sino que se modifican. La clase coche habr cambiado, porque ahora tiene nuevas propiedades y funcionalidades, pero no se habr creado ninguna clase a partir de coche, sino que es la misma clase coche la que se ha alterado.
22
Para entender mejor implemet tenemos que verlo en comparacin con extend. Mientras que con extend lo que se creaban eran nuevas clases que extendan las anteriores, con implement lo que estamos es modificando esas mismas clases. Por si no ha quedado todava claro, con extend crebamos nuevas clases "hijo" que heredaban propiedades y mtodos de clases "padre", mientras que con implement no se crea ninguna clase nueva "hijo", sino que se modifica la clase original que se est implementando.
Referencia: Tenemos explicaciones de Extend en el manual de Mootools.
Para qu casos puede servir implement? Voy a dar un ejemplo tpico en el que nos puede servir de mucha ayuda el mtodo implement. Imaginemos que tenemos la clase "Animal". Luego con extend hemos creado, a partir de la clase animal, las clases "Mamferos" y "Anfibios". Ahora, extendiendo la clase "Mamferos" hemos creado la clase "Perro" y "Gato". Extendiendo "Anfibios" hemos creado la clase "Rana" y "Salamandra". En una estructura de herencia como la que he relatado por poner un ejemplo, ahora imaginemos que queremos aadir una caracterstica o funcionalidad especfica a la clase "Animal", para que todos los animales de la jerarqua de herencia tengan esa nueva funcionalidad o caracterstica. Podramos extender la clase "animal" y crear un "AnimalExtendido", pero esto no modificara las clases que heredan de "Animal", a no ser que modificsemos el cdigo de todas las clases que dependen de "Animal" para hacer que, en vez de extender "Animal", extendiesen "AnimalExtendido". Esa solucin, que sera poco atractiva, por tener que retocar el cdigo de una serie de clases, se puede solucionar con implement. Con Implement podramos modificar directamente la clase "Animal" y con ello conseguiramos que cambiase esta y todas las clases que tenga por debajo en la jerarqua de herencia. Es decir, implementando esas nuevas funcionalidades o caractersticas a "Animal" estaramos automticamente incorporndolas a los "Mamferos", "Anfibios", "Perros", "Ranas" Veamos un ejemplo de Implement en un cdigo Javascript con Mootools: Podemos tener una clase llamada "Casa", con un cdigo como el que sigue:
var Casa = new Class({ abierta: false, initialize: function(habitaciones, banos){ this.num_habitaciones = habitaciones; this.num_banos = banos; }, abrir: function(){ this.abierta = true; alert('casa abierta'); }, cerrar: function(){ this.abierta = false; alert('casa cerrada'); } })
23
Esta clase "Casa" tiene una propiedad "abierta" que en principio vale "false". Adems con el constructor initialize se crean dos nuevas propiedades que son el nmero de habitaciones y baos. Luego se han creado dos mtodos uno para abrir() la casa y otro para cerrar() la misma. Ahora vamos a ver como se podra utilizar implement para aadir nuevas propiedades y mtodos.
Casa.implement({ ocupantes: 0, ocupar: function(){ if (this.abierta){ if (this.ocupantes < this.num_habitaciones){ this.ocupantes++; alert("He ocupado una habitacin"); }else{ alert("No hay espacio para mi en la casa"); } }else{ alert("La casa est cerrada, no puedo entrar"); } }, desocupar: function(){ if (this.abierta){ if (this.ocupantes > 0){ this.ocupantes--; alert("He salido de la casa y dejado una habitacin libre"); }else{ alert("No hay ocupantes en la casa"); } }else{ alert("La casa est cerrada, no puedo salir"); } } });
Vemos que se ha aadido una propiedad llamada "ocupantes", que contiene el nmero de ocupantes de la casa, inicialmente siempre igual a cero. Luego se han aadido con implement dos mtodos, ocupar() y desocupar(). El mtodo ocupar primero comprueba si la casa est abierta y luego si queda espacio en las habitaciones. Si es as aade uno al nmero de ocupantes. El mtodo desocupar() simplemente mira si la casa est abierta y si hay ocupantes y en ese caso resta uno a los ocupantes. Despus del implement, la clase "Casa" simplemente tendr esas nuevas propiedades y mtodos, pero seguir siendo la misma clase "Casa", simplemente modificada. Podramos poner en marcha la clase casa de la siguiente manera:
var miCasa = new Casa(2,1); miCasa.ocupar(); miCasa.abrir(); miCasa.desocupar(); miCasa.ocupar(); miCasa.ocupar(); miCasa.ocupar(); miCasa.desocupar(); miCasa.ocupar();
24
Podemos ver el ejemplo en marcha en una pgina aparte. Slo sealar un pequeo detalle, que puede ser una tontera el comentar, pero para que quede claro. En extend podamos utilizar parent() para hacer referencia a la clase padre que estbamos extendiendo, desde la clase hija. Pero en implement, como no se est creando ninguna clase hija, sino que se modifica la clase original, no tiene sentido utilizar parent(). Artculo por Miguel Angel Alvarez
Funcin $merge() del core Mootools

Continuamos con nuestro manual de Mootools, en este caso explicando otra de las funciones del core de Mootools, llamada $merge(). Forma parte, como decimos, del core de Mootools y nos quedaba por estudiar todava, aunque no tena sentido explicarla sin haber explicado antes la creacin de clases y objetos con Mootools. Esta funcin, $merge(), sirve para crear un objeto a partir de la fusin de otros objetos. Recibe varios parmetros, en nmero indeterminado, pero dos como mnimo, que deben ser objetos. $merge() devuelve un nuevo objeto, que es la combinacin de todos esos objetos recibidos por parmetro. Adems, deja los objetos iniciales (los enviados por parmetro) inalterados y sin referenciar en el nuevo objeto resultante de la fusin de objetos. Cmo funciona la fusin de $merge() Simplemente se crea un objeto totalmente nuevo, que tiene todas las propiedades y mtodos de los objetos iniciales. Adems, si una propiedad o mtodo se repite en nombre, ocurre que el elemento del ltimo objeto fusionado es el que prevalece. Veamos un primer ejemplo sencillo, de la fusin de dos objetos:
//creo dos objetos var obj1 = {a: 1, b:4}; var obj2 = {a: 3, c:2}; //fusiono los objetos obj_fusion = $merge(obj1, obj2); //obj_fusion vale {a:3, b:4, c:2}; //muestro los valores alert (obj_fusion.a); alert (obj_fusion.b); alert (obj_fusion.c);
Como se puede ver, la propiedad "a", que estaba repetida en los dos objetos, toma el valor del segundo objeto fusionado. Podemos ver el resultado de la ejecucin de este cdigo en una pgina aparte. Ahora veamos un segundo ejemplo de uso de $merge(): Vamos a crear tres clases, que hemos llamado "lechuga", "filete" y "manzana". Luego instanciaremos 3 objetos a partir de esas clases, que combinaremos para crear un nuevo objeto "comida". Luego veremos cmo queda dicho objeto "comida" y cmo los objetos iniciales han quedado inalterados.
//creo la clase lechuga
25
var Lechuga = new Class({ color: "Verde", tipo: "Rizada", sazonar: function(){ alert ("Estoy lista para comer"); } }); //creo la clase filete var Filete = new Class({ initialize: function(animal, peso){ this.procedencia= animal; this.peso= peso; } }); //ahora creo la clase manzana var Manzana = new Class({ color: "Amarilla", sabor: "dulce" }); //instancio 3 objetos a partir de las clases creadas miLechuga = new Lechuga(); miFilete = new Filete("Pollo", 0.2); miManzana = new Manzana(); //utilizo merge para combinar los tres objetos $comida = $merge(miLechuga, miFilete, miManzana); //muestro las propiedades del objeto combinado alert($comida.tipo); alert($comida.procedencia); alert($comida.sabor); //La propiedad color, que estaba repetida, toma el valor del ltimo objeto combinado. //el ltimo objeto combinado era la manzana de color amarilla alert($comida.color); //pero los objetos iniciales est inalterados. Muestro la propiedad color de los mismos alert(miLechuga.color); alert(miManzana.color);
Podemos ver en marcha el cdigo de este segundo ejemplo en una pgina aparte. Artculo por Miguel Angel Alvarez
Element en Mootools. Mtodo $()

Mootools tiene un mdulo llamado Element, que debemos conocer y dominar para poder trabajar con el framework y tener a mano cualquiera de los componentes de la pgina. En nuestro Manual de Mootools hemos visto una serie de artculos para aprender a manejar otros mdulos de los que componen el framework. Sin embargo, hasta que no aprendamos a manejar un poco el objeto Element, no podremos empezar a hacer y entender ejemplos ms complejos. As que, aunque nos hayamos saltado algunos temas de la documentacin de Mootools, vamos a empezar a explicar Element. Ya volveremos atrs ms adelante para incluir explicaciones de otras partes de Mootools. Element es el mdulo de Mootools que contiene la mayora de funciones para alterar cosas de
26
la pgina. La mayora de los mtodos de Element sirven para alterar propiedades de los elementos que visualizamos en nuestro navegador, como pueden ser atributos CSS, cdigo HTML, inyectar cdigo, obtener propiedades, construirlos o destruirlos, etc. La mayora de los mtodos de la clase Element son sencillos de entender, pero debemos comenzar por un par de mtodos que pueden requerir algunas explicaciones adicionales, que sirven para seleccionar elementos de la pgina. Funcin dlar $() Esta funcin se ha incluido dentro de los mtodos del objeto Window. Por ello, podremos acceder a ella directamente desde cualquier parte del cdigo Javascript de la pgina. Con $() se efectan un par de operaciones: 1. Obtener un objeto Element a partir de cualquier elemento de la pgina, pasando a $() el identificador del elemento que queramos recuperar. 2. En el caso que se est viendo la pgina en Internet Explorer, $() realiza una segunda funcin, que consiste en aplicar al elemento seleccionado todos los mtodos de la clase Element que aporta Mootools.
Nota: Para lo que a nosotros respecta, debemos saber que con $() obtenemos una referencia al objeto Element asociado a un elemento de la pgina. No hay ms!. Pero bueno, como est en la documentacin de Mootools, hemos querido tambin mencionar que en el caso del navegador Internet Explorer, de manera transparente para nosotros, se aplican todos los mtodos de Element a ese objeto al invocar a $(), porque hasta entonces no estaran disponibles. Otros navegadores como Firefox, Opera o Safari tienen disponibles desde el principio cualquiera de los mtodos de Element (siempre que hayamos incluido el framework Mootools y el mdulo Element) en cualquiera de los componentes de la pgina.
Veamos un ejemplo de uso del mtodo $() Primero veamos un elemento cualquiera de una pgina web:
<div id="mibloque"> Estoy probando Element de Mootools! </div>
Esto es un bloque DIV, al que le hemos colocado un identificador id=mibloque. Ahora veamos cmo podemos recuperarlo con Mootools como un objeto de la clase Element.
elemento_mibloque = $("mibloque");
Ahora en la variable elemento_mibloque tenemos una referencia a ese bloque DIV. Como elemento_mibloque es un objeto de la clase Element, podemos invocar mtodos de Element. Aun no hemos visto explicaciones sobre los distintos mtodos, pero podemos mostrar un cdigo para alterar las propiedades CSS de dicho bloque.
elemento_mibloque.setStyle("border", "1px solid #ff8800"); elemento_mibloque.setStyle("padding", "20px");
No es nada complicado, simplemente debemos saber que, con el mtodo setStyle() de la clase Element, podemos cambiar las propiedades CSS del elemento. Podemos ver el ejemplo en marcha en una pgina aparte. El mtodo dlar tambin acepta una referencia a un elemento, es decir, en vez de un string con el identificador del elemento, podemos pasarle una referencia DOM del elemento deseado. Para aclarar este punto, veamos un cdigo que parece un poco redundante, pero que tiene una razn de ser que explicar luego:
mielemento = document.getElementById("mibloque"); mielemento = $(mielemento); mielemento.setStyle("font-size", "150%"); Con mielemento
= document.getElementById("mibloque")
27
obtenemos una referencia al bloque DIV de antes, pero a travs del mtodo getElementById() del objeto document. Este mtodo forma parte de Javascript y lo tiene cualquier navegador moderno. Luego, con mielemento = $(mielemento), lo que hacemos es obtener un objeto Element a partir de la referencia conseguida en la lnea de cdigo anterior. Esto es necesario hacerlo, porque hasta que no hagamos la invocacin al mtodo $(), la referencia del elemento no es un objeto Element de Mootools en Internet Explorer, o mejor dicho, no tiene aplicadas todas las funcionalidades de Element en IExplorer. El cdigo anterior se puede ver en este enlace. Como podemos ver, $(), puede ser til cuando no sabemos si en una variable tenemos un identificador o una referencia a un elemento del DOM. Adems, es una manera ms rpida de hacer el document.getElementById(), que podemos conocer anteriormente de Javascript. Artculo por Miguel Angel Alvarez
Element en Mootools. Mtodo $$()

En el captulo anterior del Manual de Mootools vimos las primeras nociones sobre el mdulo Element, que son muy interesantes para comenzar a tocar partes divertidas y tiles de Mootools. Ahora vamos a continuar con el mtodo de Window $$(), que sirve para seleccionar un grupo de elementos de DOM y extender sus funcionalidades, para tratarlos como objetos de la clase Element de Mootools. Funcin doble dlar $$() Esta funcin forma parte del mdulo Element, aunque se ha creado, igual que la funcin $() vista en el captulo anterior, como un mtodo de Window, por lo que se encuentra siempre disponible. Sirve para obtener referencias a un grupo variable de elementos de la pgina. Acepta una serie de posibles parmetros de entrada -que veremos luego- para especificar grupos de elementos y devuelve siempre un array con las referencias a los elementos, independientemente del nmero de elementos seleccionados. El mtodo $$ se puede utilizar de esta manera:
elementos_parrafo = $$("p");
Esto selecciona todas las etiquetas P de la pgina y devuelve un array con las referencias a todos estos prrafos. En el cdigo anterior guardamos el Array de Elements devuelto una variable que hemos llamado elementos_parrafo. Como decamos, elementos_parrafo ser un array de objetos Element, independientemente del nmero de prrafos que tuviese nuestra pgina. Ejemplo completo de uso de $$() Para entender esto, lo ms fcil es ver un ejemplo de uso del mtodo $$() para ver cmo funciona.
<p> Esto es un prrafo </p> <p> Esto es un segundo prrafo </p> Manual de Mootools: www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 28
<p> Sigo con un tercer prrafo! </p> <script> elementos_parrafo = $$("p"); //alert($type(elementos_parrafo)); Nos mostrara array en un alert for (i=0; i<elementos_parrafo.length; i++){ elementos_parrafo[i].setStyle("font-size", (100 + (i*50))+"%"); } </script>
Primero hemos escrito un cdigo HTML con tres prrafos. A continuacin tenemos un script en Javascript que hace uso de Mootools para recoger esos prrafos y tratarlos. En nuestro ejemplo hacemos uso del mtodo $$(p) para obtener un array con los objetos Element correspondientes a todos los prrafos. A continuacin tenemos un bucle que recorre cada uno de los elementos del array y va cambiando el estilo de los mismos, en concreto el tamao de la fuente. Entonces, para cada prrafo le coloca un tamao de fuente mayor. Como se puede ver, con elementos_parrafo[i] estamos accediendo a cada una de las etiquetas HTML de prrafo. Podemos ver el ejemplo en marcha en una pgina aparte. Posibles parmetros de seleccin de elementos con $$() Los posibles parmetros que acepta $$() son:

Etiquetas HTML, una o varias. Arrays de elementos Variables con elementos Cadenas de caracteres con selectores de clases CSS, o identificadores
Ahora veamos otra serie de ejemplos de seleccin de elementos de la pgina:

elementos = $$("p","a");
Esto seleccionara todos los prrafos de la pgina y en las posiciones sucesivas del array, todos los enlaces.
elementos=new Array(document.getElementById("p1"), document.getElementById("p3")); elementos_parrafo = $$(elementos);
Con estas dos lneas seleccionaramos los elementos con identificadores p1 y p3. En la primera lnea creamos el array con los elementos, extrados con document.getElementById(), y en la segunda lnea obtenemos un array con dichos elementos como objetos de la clase Element.
elementos=new Array($("p1"), $("a2")); elementos = $$(elementos);
Este ejemplo es similar al anterior, con la diferencia que en este caso ya tenamos los elementos de la clase Element, seleccionados con $().
elemento0= $("p3"); elemento1 = $("a1"); elemento2 = $("a2"); elementos = $$(elemento0, elemento1, elemento2);
En este ejemplo tenemos tres variables con objetos de la clase Element y los seleccionamos con $$, especificndolos como tres parmetros consecutivos. Ahora veamos un ejemplo con selectores. Tenemos este cdigo HTML:
<div id="x">Este div es de identificador id=x</div>
Y luego este script:

<script> elementos = $$("#x"); for (i=0; i<elementos.length; i++){ elementos[i].setStyle("color", "blue"); } </script>
Con $$("#x") obtenemos el elemento que tiene identificador id="x. Ser un nico elemento. Luego con el bucle for recorremos el array para cambiar el color del texto de ese elemento a azul. Un ltimo ejemplo, en el que tenemos este cdigo HTML:
<div class="titular">Esto es DIV de la clase titular</div> <div>Este NO es de la clase titular</div> <div class="titular">Esto es otro DIV que es titular</div>
Vemos tres bloques DIV. El primero y el tercero son de la clase titular. Entonces, veamos el siguiente cdigo Javascript:
<script> elementos_titular = $$(".titular"); //alert($type(elementos_parrafo)); Nos mostrara array en un alert for (i=0; i<elementos_titular.length; i++){ elementos_titular[i].setStyle("color", "red"); } </script>
Con ello estamos seleccionando todos los elementos de la pgina que son de la clase titular, con el selector .titular. Con el bucle luego les estamos cambiando el color del texto a rojo a todos los elementos. Podemos ver este ltimo ejemplo en marcha aqu. Por cierto, para que funcione la seleccin de elementos por selectores de clase CSS debemos tener el mdulo Selectors cargado en Mootools. Artculo por Miguel Angel Alvarez
Construir elementos en la pgina con Mootools

Con el objetivo de continuar nuestro aprendizaje de Mootools, ahora vamos a ver cmo se podran crear elementos dinmicamente en la pgina web. Este artculo se encaja en el Manual de Mootools, que estamos publicando en DesarrolloWeb.com. En captulos anteriores ya comenzamos a explicar las caractersticas del mdulo Element, que sirve para trabajar con los elementos de la pgina. Cuando nos referimos a los elementos de la pgina, abarcamos cualquier tipo de contenido de sta. Por ejemplo, los prrafos son elementos, las imgenes o cualquier otra cosa que coloquemos con etiquetas HTML. Las listas, por ejemplo, tambin son elementos. La propia lista es un elemento (etiqueta UL u lo), pero tambin son elementos cada uno de los item de la lista (etiqueta LI). As pues, podemos entender la pgina como un conjunto de elementos colocados de manera secuencial. Con Mootools tenemos acceso a cualquiera de estos elementos y podemos trabajar con ellos de manera dinmica. Esto incluye, modificar sus propiedades, crearlos, borrarlos, etc. Para
30
trabajar con un elemento de la pgina tan solo tenemos que poder referirnos a l y para ello utilizbamos su identificador (atributo id). Para conseguir una instancia de la clase Element de un elemento de la pgina a partir de un identificador utilizbamos la funcin dlar, relatada en el artculo anterior. As que despus de esta introduccin a lo que son los elementos de la pgina, vamos ya con los objetivos a cubrir en este artculo de desarrollo web.com. No son otros que crear elementos dinmicamente, como respuesta a ejecucin de sentencias Javascript. En adelante veremos tambin cmo insertarlos en la pgina, para que aparezcan en el lugar que nosotros deseemos. Constructor de Element La clase Element de Mootools tiene un constructor que sirve para realizar las tareas de creacin de un elemento nuevo, a la vez que nos ofrece herramientas para su inicializacin. El constructor es muy sencillo y recibe dos parmetros, como podemos ver a continuacin: miElemento = new Element(etiqueta, caracteristicas); Los parmetros del constructor son los siguientes: Etiqueta: es el nombre de una etiqueta HTML. Por ejemplo si ponemos p estaremos creando un elemento tipo prrafo, o si colocamos img estaremos creando un elemento o etiqueta imagen. Caractersticas: son una lista de caractersticas de la etiqueta o elemento que se est creando. Estas caractersticas son opcionales. Por ejemplo, podemos construir elementos de esta manera: Construyo un elemento prrafo, etiqueta P:
var nuevoElemento = new Element ("p");
Construyo un elemento enlace, etiqueta A, y aparte le doy una serie de caractersticas del enlace, para inicializar el texto del enlace, la URL a la que va dirigido, y algunos estilos CSS.
var otroElemento = new Element("a", { "html": "texto del enlace", "href": "url_del_enlace", "styles": { "background-color": "red", "color": "white" } });
Al construir un elemento este simplemente se genera internamente en la memoria con Javascript, pero no aparece en ningn lugar de la pgina. Para incluirlo en la pgina tendremos que insertar el elemento, o inyectarlo, como prefiramos decirlo. Todo esto lo veremos en un par de ejemplos en el siguiente artculo. Artculo por Miguel Angel Alvarez
31
Ejemplo de construccin de un elemento e inyeccin en la pgina

En el artculo anterior de nuestro Manual de Mootools publicado en DesarrolloWeb.com vimos cmo trabajar con el constructor de Element. Ahora vamos a aprender a poner en prctica la construccin de elementos y la insercin de los mismos en algn lugar de la pgina. Esto lo veremos con un par de ejemplos. Para conocer mejor de antemano los objetivos del artculo podemos entrar a ver el resultado de los ejemplos en marcha. Veamos un primer ejemplo de construccin de un elemento con Mootools y la posterior insercin del mismo en la pgina:
//construyo un nuevo elemento var nuevoElemento = new Element ("div"); //Meto algo de texto dentro del elemento nuevoElemento.set("html", "Este texto lo meto directamente desde Javascript"); //injecto ese elemento en la pgina nuevoElemento.inject($("micapa")); Nota: Para la realizacin de este sencillo ejemplo de uso del la clase Element de Mootools, hemos tenido que introducir otros dos mtodos de Element, que aun no habamos relatado en el manual de Mootools de desarrolloweb.com: el mtodo set() y el mtodo inject(). Esperamos que no resulte muy complicado de entrada. De todos modos, sigue leyendo las siguientes explicaciones, en las que intentaremos aclarar algo el uso de ambos mtodos. Tener en cuenta tambin que hemos utilizado una de las funciones explicadas con anterioridad, la funcin dlar de Mootools $().
Con las anteriores lneas de cdigo hemos hecho 3 cosas: Primero creamos un nuevo elemento, en este caso una etiqueta DIV. Luego he una llamada al mtodo set() del Element, en el que asigno un poco de texto a la etiqueta. Con set() podemos asignar todo tipo de propiedades al elemento, entre ellas, con html asignamos el texto que hay dentro del mismo. Por ltimo inyecto el elemento en la pgina. Para ello tengo que utilizar el mtodo inject() indicando como parmetro el lugar donde se tiene que insertar el elemento, en este caso se mete el elemento dentro de otro elemento llamado micapa. Supongamos que yo tena este HTML (fjate que el div tiene un id=micapa para referirme a l):
<div id="micapa">Crear Elementos con Mootools</div>
Pues despus de la ejecucin de estas sentencias de creacin e inyeccin del nuevo elemento, me quedar la pgina con el siguiente cdigo HTML:
<div id="micapa"> Crear Elementos con Mootools <div>Este texto lo meto directamente desde Javascript</div> </div>
Como vemos, con el mtodo inject() de la clase Element se inserta el objeto que recibe el mtodo, dentro del objeto Element que se indica como parmetro. Aunque inject() puede insertar los elementos en otros lugares, como veremos en el siguiente ejemplo. Ahora vamos a mostrar un segundo ejemplo, un poco ms elaborado. Se trata de insertar
nuevos elementos a una lista que hay en la pgina. Es muy parecido al ejemplo anterior, con la salvedad que ahora vamos a utilizar algunas caractersticas adicionales del constructor de Element.
var nuevoElementoLista = new Element("li", { "html": "Texto del elemento", "styles": { "font-size": "14pt", "font-weight": "bold" } }); nuevoElementoLista.inject($("lista"), "top");
Con la primera lnea de cdigo construyo un elemento LI (un elemento de lista). En este caso hemos utilizado el segundo parmetro del constructor de Element para especificar algunas caractersticas del elemento LI. Estas son: html para indicar el texto que va dentro de la etiqueta y styles para especificar algunos atributos de estilos CSS. Luego en la ltima lnea se inyecta el elemento recin creado dentro de otro elemento con id=lista, pero en la parte de encima (por cambiar un poco, hemos utilizado un segundo parmetro del mtodo inject() para decir top, con lo que conseguiremos que el elemento sea introducido arriba del todo de la lista). Si tenamos un cdigo HTML como este:
<ul id="lista"> <li>Elemento de lista 1</li> <li>Otro elemento de lista</li> </ul>
Despus de la ejecucin de estas lneas de cdigo obtendremos un HTML resultante como este:
<ul id="lista"> <li style="font-size: 14pt; font-weight: bold;">Texto del elemento</li> <li>Elemento de lista 1</li> <li>Otro elemento de lista</li> </ul>
Podemos ver ambos ejemplos relatados en este artculo de desarrollo web .com en el siguiente link: Ver el ejemplo en marcha. Artculo por Miguel Angel Alvarez
window.getSize en Mootools
Hacemos un pequeo inciso en el manual de Mootools para explicar un detalle que es importante para tratar con la funcin window.getSize(), que sirve para que el navegador nos devuelva varios valores, como las dimensiones de rea disponible donde se muestran las pginas web o los distintos scrolls o desplazamientos realizados o posibles en la pgina completa.
33
Conocer el rea de trabajo disponible del navegador nos puede servir para estructurar los espacios disponibles para la maquetacin o para mostrar elementos en posiciones especficas o con tamaos definidos, que variaran segn la medida de la ventana del navegador y la configuracin de elementos de la interfaz que tenga el usuario.
Atencin: cuando hablamos del rea del espacio til del navegador NO nos referimos al rea de la pantalla, porque sta suele ocupar un espacio mayor (por ej la definicin de pantalla 800x600, que depende de la configuracin del usuario), sino la parte donde se muestran las pginas, dentro de la ventana del navegador, despus de quitar toda la interfaz de mens y botones del browser.
Obtener las dimensiones de Window en Mootools 1.1 ACTUALIZADO: Estas explicaciones que vienen a continuacin son para Mootools versin 1.1. Resulta que en la versin 1.2 del framework ha cambiado un poco la funcin getSize(), creemos que a mejor. Explicar al final del artculo cmo hacer esto mismo para Mootools 1.2. Para obtener los datos en Mootools de las dimensiones de la ventana del navegador hay una funcin, como decimos, llamada getSize(). Dicho mtodo depende del objeto window, que est extendido por el framework Mootools en el archivo Window.Size.js. (mirar la documentacin de Mootools) para saber acerca de Window.Size.js, aunque lo vamos a explicar algunas cosas en este artculo. Window.Size.js incorpora varios mtodos al objeto window del navegador. El que nos interesa es window.getSize(), que devuelve lo mismo que el mtodo Element.getSize(). Esto es, un objeto con una serie de propiedades acerca de las dimensiones del elemento. En el caso del objeto window se refiere a la ventana, o mejor dicho, al espacio til del navegador, donde se mostrarn las pginas. En concreto, el objeto devuelto tiene estas propiedades:
{ 'scroll': {'x': 10, 'y': 10}, 'size': {'x': 400, 'y': 600}, 'scrollSize': {'x': 600, 'y': 1000} }
Por explicarlo con palabras, devuelve un objeto que tiene tres propiedades: scroll, size y scrollSize, que a su vez tienen dos propiedades, x e y, que son valores de tamaos en horizontal y vertical. Cada uno de esos tamaos significa:

Scroll: El desplazamiento que se ha hecho en la pgina, con las barras de desplazamiento horizontales y verticales respectivamente. Size: El tamao del rea til de la ventana del navegador, destinado a mostrar la pgina web. scrollSize: El tamao de la pgina completa, que puede ser o no mayor que el rea disponible para mostrarla. Si es mayor quiere decir que para mostrar toda la pgina se tendrn que mover las barras de desplazamiento horizontales o verticales.
Para que quede claro, pongo una imagen esquemtica sobre los valores de getSize().
34
Dejo aqu un ejemplo de uso de window.size() en Mootools:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"> <title>Ejemplo Size</title> <script src="mootools-release-1.11.js" type="text/javascript"></script> <script> function dameTamanos(){ tamanos = window.getSize(); alert ("Tamao del rea disponible: " + tamanos.size.x + " x " + tamanos.size.y); alert ("Scroll: " + tamanos.scroll.x + " x " + tamanos.scroll.y); alert ("scrollSize: " + tamanos.scrollSize.x + " x " + tamanos.scrollSize.y); } window.addEvent('domready', dameTamanos); window.addEvent('resize', dameTamanos); </script> </head> <body> <h1>Ejemplo de prueba de size en Mootools</h1> ? </body> </html>
Podemos ver el ejemplo en marcha en una pgina aparte. Window.getSize() para mootools 1.2
Actualizado (19/08/2008): Tal como hemos explicado en las anteriores lneas, con Mootools se ha implementado un mtodo en window llamado getSize(). Esto no ha cambiado. Pero lo que s que cambia en Mootools 1.2 es que ahora todas las propiedades de dimensiones de window no dependen de un nico mtodo getSize(). Mootools tiene una serie de mtodos, implementados en window y en la clase Element, que sirven para obtener dimensiones de elementos de la pgina o de la propia ventana del navegador. Ahora, para obtener el rea disponible de espacio para la pgina, utilizamos window.getSize(). Para obtener el scroll realizado sobre la pgina tenemos el mtodo window.getScroll() y para saber cuan grande es el rea de la pgina (lo que se ve ms la parte que queda fuera, pero que podemos ver haciendo scroll -desplazando con las barras de desplazamiento-), utilizamos window.getScrollSize(). Estos tres mtodos tienen como respuesta un objeto que contiene dos propiedades x e y, con las coordenadas o tamaos que correspondan. Por lo tanto, ahora en Mootools 1.2, para obtener las dimensiones del rea disponible del navegador hacemos:
dimension = window.getSize(); //en dimension.x est el tamao en pixels horizontal del rea donde se muestra la pgina. //en dimension.y tenemos el tamao en pixels del rea en vertical.
Doctype adecuado para getSize() en Mootools Atencin a este pequeo gran detalle: dependiendo de la declaracin Doctype que hayamos puesto en la pgina la funcin getSize() de Mootools funcionar bien o no en Internet Explorer. En Firefox no existe este problema, pero en Internet Explorer, si no utilizamos un Doctype adecuado, los valores de size nos van a dar cero. Con este Doctype no vamos a tener ningn problema, aunque seguramente funcione tambin con otros doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
O bien este otro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Este es un detalle que, si no lo conoces, te puede hacer perder bastante tiempo. Aunque en foros est comentado y ha sido fcil encontrar la solucin. Artculo por Miguel Angel Alvarez
API Panoramio + ejemplo de JSON con Mootools

En este artculo queremos presentar el API de Panoramio, por el que podemos obtener fotografas de lugares del mundo que los usuarios de Panoramio han enviado al servidor. Todas las fotos estn localizadas geogrficamente, por lo que se pueden utilizar para ilustrar pginas
web de lugares del mundo o para aadir informacin grfica a nuestros mapas de Google. El API de Panoramio en realidad es muy sencillo de usar, porque consiste nicamente en una URL dirigida al sitio web de Panoramio, en la que indicamos una serie de parmetros, que se envan por GET en la propia URL, con los que especificar las fotos que queremos obtener. Podemos especificar el lugar geogrfico donde se deben buscar fotos, el tamao de las mismas, la cantidad de fotos que queremos recibir, etc. Lo cierto es que no caben muchas explicaciones con respecto al uso del API, sino simplemente unas notas sobre qu podemos hacer para mostrarlas. Para el uso del API os enviamos directamente a la propia pgina del API, donde se explica en espaol la configuracin de la URL para recibir las fotos: API de Panoramio Por ejemplo, para recibir 10 fotos de la ciudad de Len, en Espaa, de tamao medio, ordenadas por popularidad, podramos componer una URL como esta: http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0& to=10&minx=-5.8&miny=42.59&maxx=-5.5&maxy=42.65&size=medium Qu recibimos con la URL de consulta al API de Panoramio Cuando recibimos datos de la URL con la que se realiza la consulta al API de Panoramio, en realidad lo que estamos recibiendo no son las fotos propiamente dichas, sino un texto con los datos de las fotos que se han encontrado y seleccionado conforme a la configuracin de la URL. Los datos recibidos estn generados en JSON, una especificacin de un lenguaje con una notacin de objetos de Javascript. JSON permite escribir con cdigo fuente, fcilmente entendible por seres humanos, declaraciones de objetos. En el caso del API de Panoramio, estos objetos son las propias fotos seleccionadas con nuestra consulta. Podemos ver ms informacin de JSON en espaol en la propia pgina de especificacin de JSON. La complicacin entonces ser procesar ese texto recibido de la consulta al API de Panoramio, en lenguaje JSON, con los datos de las propias fotos, con el objetivo final de mostrarlas en una pgina web. Para ello conviene dejarse ayudar por algn sistema que permita procesar los JSON de una manera cmoda. Existen diversos sistemas para procesar objetos JSON en diferentes lenguajes para desarrolladores del web, como Javascript, PHP, ASP, Action Script, etc. Incluso hay libreras que nos facilitan la tarea a unas pocas lneas de cdigo. Yo me he dedicado a jugar un poco con el API de Panoramio utilizando el Framework Javascript Mootools, que tiene interesantes funciones para recibir un archivo de cdigo de objetos JSON y procesarlo, de modo que podamos utilizarlo en nuestros propios scripts Javascript. Todo el procesamiento del JSON lo basamos en un mtodo de Mootools llamado Json.Remote, que es el que recibe el texto con los objetos y nos permite volcarlo a objetos Mootools. Este ejemplo de uso del API de Panoramio tambin puede servir de ejemplo de utilizacin de JSON en Mootools.
37
Lo malo es que todo esto tiene cierta dificultad, que no voy a tratar en este artculo, por falta de tiempo. Pero espero que se pueda entender algo. Cabe decir que estamos publicando un manual de Mootools en DesarrolloWeb.com donde podris aprender algo de Mootools con lo que entender un poco ms todas estas cosas y donde esperamos en breve explicar temas avanzados que nos hagan dominar este ejemplo y perfeccionarlo ms an. En la pgina web he colocado una capa donde mostrar las fotos recibidas del API de Panoramio.
<div id="muestrafotos"></div>
Por ahora la capa est vaca, pero la llenar una vez recibidas y procesadas las imgenes. Para ello utilizo este cdigo:
var requiero_fotos = new Json.Remote("http://www.panoramio.com/map/get_panoramas.php?order=popularity& set=full&from=0&to=10&minx=-5.8&miny=42.59&maxx=-5.5&maxy=42.65&size=medium", {onComplete: function(fotos){ HTMLfotos = ""; for (i=0; i<fotos.photos.length; i++){ HTMLfotos += "<img src='" + fotos.photos[i].photo_file_url + "'>"; HTMLfotos += "<br>"; HTMLfotos += fotos.photos[i].photo_title; HTMLfotos += "<br>"; HTMLfotos += "Foto de: " + fotos.photos[i].owner_name HTMLfotos += "<br>"; HTMLfotos += "<a href='" + fotos.photos[i].photo_url + "' target=_blank>Ver la foto en Panoramio</a>"; HTMLfotos += "<p>"; } $('muestrafotos').setHTML(HTMLfotos); }}); requiero_fotos.send();
Como deca, la complicacin est en entender el Json.Remote, que espero poder explicarlo en un futuro prximo. Por el momento, dejo un enlace con el ejemplo en marcha de uso del API de Panoramio. Problema de acceso a una URL de otro servidor con Ajax y Json.Remote El cdigo, tal como lo he dado, me funciona en local en Internet Explorer y en remoto (publicado en el servidor de DesarrolloWeb.com) no funciona en ningn navegador. El problema es que Ajax da un "Permiso denegado" al intentar acceder a un archivo remoto. La solucin pasara por llamar a un archivo en local, publicado en nuestro propio servidor, que contenga el cdigo JSON de las fotos. Algo como esto:
var requiero_fotos = new Json.Remote("get_panoramas.txt", {onComplete: function(fotos){
El archivo get_panoramas.txt, que he colocado en nuestro servidor, contiene el texto del cdigo JSON con los objetos de las fotos que he consultado en Panoramio y luego guardado con la opcin guardar como del navegador. Con ello he obtenido el listado de las fotos y las he colocado en nuestro servidor para hacer pruebas.
38
Lo malo de este sistema es que las fotos no se actualizan, sino que siempre son las mismas que obtuve el da que guard el archivo get_panoramas.txt. La solucin a esto podra ser obtener ese archivo por medio del servidor, con programacin PHP y luego guardarlo en nuestro servidor antes de procesarlo con Mootools. O simplemente lo podra obtener con PHP y procesarlo directamente con este lenguaje en el servidor, que tambin tiene libreras de soporte a JSON. Espero que todos estos problemas no desanimen y sirvan para aprender. Intentar ms adelante dar nuevas claves o trucos para el trabajo con el API de Panoramio. Artculo por Miguel Angel Alvarez
Ajax con Mootools, ejemplo sencillo

Vamos a ofrecer unas notas para aprender a programar con Ajax usando el framework Javascript Mootools, a travs de la realizacin de un sencillo ejemplo. El ejercicio consiste en crear un enlace que, al pulsarlo, realizar una conexin con Ajax para traerse los contenidos de un archivo HTML, para mostrarlos en una caja de alerta. Para los que no sepan lo que es Mootools, debemos referirles a nuestro Manual de Mootools. En este artculo vamos a dar por sabidas muchas cosas de Mootools, pero esperamos que con unos mnimos conocimientos se pueda seguir el ejemplo. La versin del framework que estamos utilizando en estos momentos es Mootools 1.2. Para realizar estos ejemplos sencillos de Ajax utilizaremos la clase Request de Mootools. Dicha clase es como un envoltorio del XMLHttpRequest de Javascript, que se utiliza para crear conexiones Ajax. Para realizar una conexin Ajax tenemos que instanciar un objeto de la clase Request, que se crea indicando una serie de opciones y eventos, que nos servirn para configurar la conexin y especificar las acciones a realizar durante el proceso de ejecucin de la conexin. En este primer caso veremos un reducido juego de opciones y eventos de los que podemos utilizar en la clase. Podemos ir viendo el objetivo a conseguir en este ejercicio. Cdigo HTML Antes que nada, veamos el cdigo HTML que necesitaramos para crear un enlace, luego modificaremos su comportamiento con Mootools.
<a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a>
El enlace tiene dos cosas que comentar. Primero el href="javascript:void(0)", que sirve para que el enlace no haga nada al pulsarse. Luego id="mienlace", que sirve para darle un nombre a ese enlace para poder referirnos a l desde Javascript. Configurar una conexin Ajax con Request de Mootools Ahora veamos qu se debera hacer para configurar una conexin conAjax mediante la clase Request de Mootools.
var prueboRequest = new Request({ method: 'get', url: 'archivo-html-solicitud.html', onRequest: function() { alert('Acabas de iniciar una solicitud por Ajax!'); },
39
onSuccess: function(texto, xmlrespuesta){ alert('Respuesta:\n' + texto);}, onFailure: function(){alert('Fallo');} }).send();
Como se puede ver, se ha creado un objeto prueboRequest que es una instancia de la clase Request. Para configurar la conexin se envan una serie de opciones: method: Sirve para definir que el mtodo de conexin. En nuestro ejemplo ser por GET url: Con esto indicamos la URL a la que queremos conectar con Ajax, para traernos el contenido de la misma. Simplemente indicamos la ruta relativa donde est el archivo al que nos conectamos. Por cierto que el archivo 'archivo-html-solicitud.html' debemos haberlo creado en nuestro servidor. Tal como est la ruta al archivo se entiende que se ha colocado en el mismo directorio que el script. onRequest: Esto sirve para definir un evento en la conexin, que se ejecutar cuando se inicie la conexin con el archivo. La funcin escrita a continuacin del onRequest contiene el cdigo que de va a ejecutar al inicio de la conexin Ajax. En nuestro ejemplo es un simple alert() de Javascript. onSuccess: Esto sirve para especificar un evento, que se ejecutar en caso que la conexin se realice con xito. A continuacin se debe escribir el cdigo de la funcin que se ejecutar al desatarse el evento, que tiene la particularidad de recibir dos parmetros. El primero es el cdigo HTML del archivo trado por Ajax. El segundo contendr la respuesta XML del Request. En nuestro ejemplo la funcin simplemente muestra en una caja de alert() de Javascript el contenido del cdigo HTML. onFailure: Con este otro evento definimos qu hacer en el caso que la conexin con Ajax haya dado un error. Tambin debemos fijarnos en el ltimo .send(), que es un mtodo que se llama sobre el objeto Request creado. Este mtodo sirve para poner en marcha la conexin Ajax. Asociar esa conexin a un evento de clic en el enlace Hasta ahora tenemos un enlace HTML y una instaciacin de un objeto de la clase Request. Pero tenemos que conectar estos dos elementos, para que al pulsar el enlace se cree la conexin. Para ello tenemos que aadir un evento al enlace y debemos realizarlo as en Mootools:
//funcin que se va a ejecutar cuando est listo el dom window.addEvent('domready', function(){ //aado un evento al enlace para ejecturar al hacer clic $('mienlace').addEvent('click', function(evento){ //creo y ejecuto un request como se ha visto anteriormente }); });
El ejemplo sencillo de conexin Ajax con Mootools completo El cdigo completo del ejemplo es el siguiente.
<html> <head> <title>Request de Mootools</title> <script src="mootools-1.2-core-yc.js" type="text/javascript"></script> </head> <body>
40
Request de Mootools, un envoltorio de XMLHttpRequest. <p> <a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a> <script> window.addEvent('domready', function(){ //funcin que se va a ejecutar cuando est listo el dom //aado un evento al enlace para ejecturar al hacer clic $('mienlace').addEvent('click', function(evento){ //creo un request var prueboRequest = new Request({ method: 'get', url: 'archivo-html-solicitud.html', onRequest: function() { alert('Acabas de iniciar una solicitud de contenidos por Ajax!'); }, onSuccess: function(texto, xmlrespuesta){ alert('Respuesta:\n' + texto);}, onFailure: function(){alert('Fallo');} }).send(); }); }); </script> </body> </html>
Podemos ver el ejemplo en funcionamiento en una pgina aparte. ltimas aclaraciones para que este ejemplo Ajax-Mootools funcione Ahora bien, conviene decir un par de cosas para terminar de aclarar este ejemplo y que cualquiera de vosotros pueda ponerlo en marcha en su ordenador o en su servidor web. Como se puede haber entendido por las explicaciones anteriores, para la puesta en marcha de este ejemplo necesitamos dos pginas distintas. Una es la que tiene el cdigo fuente del ejercicio y otra pgina que es la que se conecta por Ajax para mostrar sus contenidos. El archivo con el cdigo Javascript lo podemos llamar de cualquier manera, pero el archivo que nos traemos por Ajax debe llamarse 'archivo-html-solicitud.html', para que la ruta de la conexin realizada en el Request funcione. Ambos archivos deben estar en el mismo directorio. Adems, para que funcione correctamente la conexin con Ajax debemos poner los archivos en un servidor Web. Si intentamos colocar los archivos en un directorio cualquiera de nuestro disco duro y luego abrir la pgina con cdigo del ejemplo en un navegador, al intentar hacer la conexin http por Ajax, nos dar un error. Si abrimos directamente el archivo no se podr realizar la conexin con Ajax. Por lo tanto debemos pasar por un servidor web para que funcione. Para ello debemos de hacer una de estas dos cosas: 1. Podemos tener un servidor web instalado en local en nuestro ordenador. Entonces simplemente colocamos los archivos en un directorio de publicacin y accedemos a ellos a travs de localhost. Algo como http://localhost/mootools-ajax/request-alert.html 2. Colocar los archivos en un servidor de hosting que tengamos contratado. Para ello los subimos por FTP a nuestro servidor como habitualmente habremos hecho. Esto es todo. Espero que este primer ejemplo de Ajax con Mootools haya podido entenderse bien. Ahora puedes seguir leyendo y aprendiendo con unas modificaciones a este script, para mostrar los contenidos Ajax en el propio cuerpo de la pgina. Artculo por Miguel Angel Alvarez
41
Ejemplo 2 de Ajax utilizando Mootools

Acabamos de ver el primer ejemplo de Ajax con Mootools. Ahora vamos a publicar unas modificaciones bien sencillas, simplemente para hacer que los contenidos trados por Ajax se muestren en la misma pgina, pero en el propio cuerpo de la pgina y no en una caja de alerta. El ejemplo es bien parecido, as que antes de leer esto, debemos haber ledo el anterior taller de Ajax con Mootools. Como deca, la idea es realizar una conexin con Ajax, as que la nica diferencia es que, al mostrarse el contenido del archivo, se mostrar en una capa en el mismo contenido de la pgina., sin recargarla, por supuesto. As que, de la conexin que hacemos con el objeto de la clase Request, lo nico que cambia es lo que va a pasar en caso que la conexin se realice con xito (Evento onSuccess). Antes de continuar, si se desea, puede verse en ejemplo en marcha. Cdigo HTML El HTML que necesitaremos para el ejemplo debe contener adems un contenedor para mostrar la respuesta Ajax.
<a href="javascript:void(0)" id="mienlace">Pulsa el enlace</a> <p> <div id="cajaactualizacion"> Aqu voy a actualizar el texto! </div>
El enlace no ha cambiado, lo que se puede ver a continuacin es que tenemos un DIV llamado "cajaactualizacion", que es donde mostraremos el contenido del archivo. Cdigo Javascript relativo al Ajax con Mootools El cdigo es exactamente igual, pero se ha utilizado una funcin distinta en el evento onSuccess.
var nuevoRequest = new Request({ method: 'get', url: 'archivo-html-solicitud.html', onRequest: function() { alert('Empezando la solicitud con Ajax!'); }, onSuccess: function(texto, xmlrespuesta){ $('cajaactualizacion').set('html',texto);}, onFailure: function(){alert('Error!');} }).send();
Como se deca, lo nico que debemos entender, de manera adicional a lo que ya vimos en el ejemplo del artculo anterior, es esto:
$('cajaactualizacion').set('html',texto);
Simplemente se est haciendo una llamada a un mtodo del elemento $('cajaactualizacion'), que es el DIV donde se iban a escribir los resultados de la conexin Ajax. A este $ ('cajaactualizacion') le pasamos el mtodo set, pasando a su vez los parmetros "html", para decir que queremos cambiar el innerHTML de la capa, y luego la variable texto, que contiene el texto del archivo trado por Ajax. El cdigo del segundo ejemplo de Ajax y Mootools
<html> <head> <title>Request de Mootools</title> <script src="mootools-1.2-core-yc.js" type="text/javascript"></script> </head> <body> Manual de Mootools: www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 42
Clase Request de Mootools, un envoltorio de XMLHttpRequest. Para Ajax! <p> <a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a> <p> <div id="cajaactualizacion"> Aqu voy a actualizar el texto! </div> <script> window.addEvent('domready', function(){ //funcin a ejecutar cuando est listo el dom $('mienlace').addEvent('click', function(evento){ var nuevoRequest = new Request({ method: 'get', url: 'archivo-html-solicitud.html', onRequest: function() { alert('Empezando esta solicitud Ajax!'); }, onSuccess: function(texto, xmlrespuesta){ $('cajaactualizacion').set('html',texto);}, onFailure: function(){alert('Error!');} }).send(); }); }); </script> </body> </html>
Podemos ver en marcha el ejemplo en una pgina aparte. Atentos a las otras explicaciones y recomendaciones adicionales tratadas en el artculo anterior!, que hay cosas que no hemos comentado aqu por haberse dado por entendidas. Artculo por Miguel Angel Alvarez
Averiguar la posicin del ratn al hacer clic

Un rpido ejemplo de uso de Mootools para saber la posicin del ratn en el momento que se hace un clic en el elemento que nosotros queramos. Es un ejemplo sencillo de las posibilidades de la clase Event de Mootools, que sirve para hacer cosas con eventos de usuario. Antecedentes acerca de conocer la posicin del ratn Las cosas como las que queremos hacer en este artculo, averiguar la localizacin del mouse en la pgina, las debemos realizar con Javascript. Para ahorrarnos dificultades de cara a los distintos tipos de navegadores es interesante utilizar un framework como Mootools, que nos ayuda a realizar un trabajo ms sencillo de cara a la programacin de scripts del lado del cliente. Si queremos saber la posicin del ratn en un momento dado, tenemos que definir un evento para ejecutar cdigo en ese momento. En nuestro ejemplo queremos saber la posicin del ratn en el momento de hacer clic sobre un elemento de la pgina.
Referencia: Tenemos un manual de Mootools para explicar el funcionamiento del framework Javascript.
El cdigo Mootools
As que en este artculo vamos a realizar un evento y dentro de ese evento vamos a crear el cdigo para mostrar las coordenadas del lugar donde se encuentra el ratn. Tenemos este elemento HTML:
<div id="elementocualquiera" style="border: 1px solid #999999; background-color:#ccffcc; width: 120px; padding: 5px;"> Tienes que hacer clic en esta capa. </div>
Ya ahora este cdigo Mootools para crear el evento:

$("elementocualquiera").addEvent('click', function(event) { alert("Posicin del ratn\nx: " + event.page.x + "\ny: " + event.page.y); });
Al asignar un evento a un elemento en Mootools, se asocia una funcin a ese evento. En la propia funcin se recibe como parmetro un objeto evento, de la clase Event, que se ha producido. En el objeto de la clase Event encontramos varias propiedades, entre las que hay un par de ellas que son la posicin del ratn al producirse el evento: event.page.x / event.page.y Ahora veremos que al pulsar con id="elementocualquiera", por medio del evento click de Mootools, se muestra en una caja de alerta la posicin del ratn. Ver el ejemplo en una pgina aparte. Recuerda que tenemos un manual de Mootools para poder entender bien los procesos explicados en este artculo concernientes a Mootools. Artculo por Miguel Angel Alvarez
Enviar un formulario por Ajax con Mootools

En nuestro Manual de Mootools hemos aprendido las cosas ms bsicas para empezar a trabajar con este framework Javascript y hacer cmodamente algunas cosas que sin l sera mucho ms difcil. Una de las facilidades que podemos utilizar de Mootools es la realizacin de scripts Ajax, sin tener que complicarnos con las particularidades de los distintos navegadores. En este artculo de DesarrolloWeb.com queremos mostrar la facilidad con la que podemos enviar un formulario con Ajax usando Mootools. Por ahora vamos a intentar presentar un formulario muy sencillo y cmo podemos enviarlo con Ajax utilizando el menor nmero de lneas de cdigo posibles. Luego complicaremos el ejemplo, para aadir efectos y otras cosas interesantes, pero lo vamos a dejar para prximos artculos, por no complicarnos ahora, que esto es una mera introduccin al envo de formularios con Ajax. En desarrollo web .com iremos publicando nuevos artculos sobre el tema, para ir mostrando las posibilidades y ventajas de usar Mootools para el trabajo con Ajax. Como siempre hacemos, os dejamos el link para ver el ejemplo que vamos a realizar en
marcha.
Referencia: en artculos anteriores ya hemos visto otros ejemplos de Ajax con Mootools. Consultar el artculo Ajax con Mootools.
Cdigo HTML Pasamos directamente a mostrar el cdigo HTML del formulario:

<form id="miformulario" action="recibe-formulario.php" method="post"> Nombre: <input type="text" name="nombre" size="20"> <br> Edad: <input type="text" name="edad" size="3"> <br> <input type="submit" value="Enviar"> </form>
Como se puede ver, es un formulario exactamente igual a cualquiera realizado con HTML. Est compuesto por slo dos campos de texto y un botn de submit. Cabe destacar que el formulario se enva a la pgina recibe-formulario.php y que se va a enviar por POST. Cdigo Javascript para enviar el formulario por Ajax Ahora vamos a ver el cdigo Javascript, utilizando Mootools, que requerira la pagina para utilizar Ajax en el envo del formulario. El script es muy sencillo y lo he comentado para que se pueda entender mejor. Ahora bien, si no conocemos previamente un poco de Mootools nos sonar a chino. As que recodar la referencia al Manual de Mootools o a la documentacin del propio framework.
window.addEvent('domready', function() { //Vamos a recibir el elemento formulario elementoFormulario = $("miformulario"); //Vamos a aadir un evento al formulario para cuando se enve elementoFormulario.addEvent('submit', function(e) { //primero voy a parar el evento para que no se enve como lo hara normalmente e.stop(); //Aqu podramos hacer acciones como mostrar la tpica imagen de cargando de Ajax //Luego definimos qu hacer cuando se enva el formulario //Aqu "this" se refiere al formulario sobre el que defino el evento this.set('send', { //onComplete sirve para definir qu hacer cuando se recibe la respuesta onComplete: function(respuesta) { //escribo la respuesta en la capa "resultado" $("resultado").set('html', respuesta); } }); //Envo el formulario this.send(); }); });
Bsicamente lo que se hace es crear un evento para ejecutar cuando el formulario se enve (evento submit). El evento lo programamos para que se detenga el proceso habitual de submit y a continuacin codificamos el envo con Ajax.
45
Para enviar un formulario con Ajax desde Mootools, lo nico que tenemos que hacer es ejecutar el mtodo send() del elemento formulario:
formulario.send();
Pero claro, antes tenemos que decirle qu queremos hacer cuando se complete el envo y cmo mostrar la respuesta recibida despus de ello. Para ello tenemos que definir otro evento onComplete, que asociamos al envo "send". El evento onComplete recibe un parmetro que es el texto que se recibe como respuesta al procesar el formulario. Dentro de onComplete podremos hacer lo que queramos con la respuesta del procesamiento del form. La respuesta se generar mediante un lenguaje de programacin del lado del servidor, como PHP, .NET, ASP, o lo que queramos. Este cdigo Javascript se podra ampliar mucho con tantos efectos o utilidades como necesitemos, como mostrar una imagen de carga. Repito que tenemos planificada la publicacin de artculos adicionales sobre este tema en desarrolloweb .com, donde veremos con detalle ms adelante estos usos. Cdigo PHP para procesar el formulario La respuesta de procesar el formulario se genera en el script que lo recibe. Si nos fijamos en el cdigo HTML del formulario, veremos que el action="recibe-formulario.php". As que tendremos que crear ese archivo PHP para recibirlos datos y hacer algo con ellos.
<? echo "Nombre: " . $_POST["nombre"]; echo "<br>"; echo "Edad: " . $_POST["edad"]; ?>
Esto es lo ms sencillo que podemos hacer con el formulario, simplemente mostrar sus datos. Para ello hacemos unos cuantos echo de PHP. Todo lo que se escriba en la pgina mediante PHP se recibir como respuesta de la solicitud Ajax. Todo el cdigo del ejemplo de procesamiento de formulario en Ajax Veamos todo el cdigo junto.
<html> <head> <title>Ejemplo de envo de formulario por Ajax con Mootools</title> <script src="mootools-1.2.js" type="text/javascript"></script> <script> window.addEvent('domready', function() { //Vamos a recibir el elemento formulario elementoFormulario = $("miformulario"); //Vamos a aadir un evento al formulario para cuando se enve elementoFormulario.addEvent('submit', function(e) { //primero voy a parar el evento para que no se enve como lo hara normalmente e.stop(); //Aqu podramos hacer acciones como mostrar la tpica imagen de cargando de Ajax //Luego definimos qu hacer cuando se enva el formulario //Aqu "this" se refiere al formulario sobre el que defino el evento this.set('send', { //onComplete sirve para definir qu hacer cuando se recibe la respuesta
46
onComplete: function(respuesta) { //escribo la respuesta en la capa "resultado" $("resultado").set('html', respuesta); } }); //Envo el formulario this.send(); }); }); </script> </head> <body> <form id="miformulario" action="recibe-formulario.php" method="post"> Nombre: <input type="text" name="nombre" size="20"> <br> Edad: <input type="text" name="edad" size="3"> <br> <input type="submit" value="Enviar"> </form> <div id="resultado"></div> </body> </html>
Para que este cdigo funcion faltara el script PHP para procesar el formulario, que estara en un archivo aparte, en el mismo directorio que el cdigo HTML.
Nota: Para que el ejemplo funcione tenemos que ponerlo en un servidor web, porque el envo se realiza por http y porque la pgina PHP debe ser interpretada y procesada por el servidor web.
Podemos ver este ejemplo en marcha en una pgina aparte. Artculo por Miguel Angel Alvarez
47

Manual Mootools

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Manual Mootools

Diunggah oleh

Hak Cipta:

Format Tersedia

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Primer ejemplo con Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

que tiene el atributo id

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Segundo ejemplo con Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Evento domready de Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Core.js de Mootools (parte II)

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

document.write ("Ests en Opera"); }

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Instanciar y trabajar con objetos de clases creadas con Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

mtodo se declar para recibir parmetros.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Otras formas de extender clases y objetos

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Implement: implementando clases en Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Funcin $merge() del core Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Element en Mootools. Mtodo $()

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Element en Mootools. Mtodo $$()

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ahora veamos otra serie de ejemplos de seleccin de elementos de la pgina:

Y luego este script:

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Construir elementos en la pgina con Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ejemplo de construccin de un elemento e inyeccin en la pgina

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Dejo aqu un ejemplo de uso de window.size() en Mootools:

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

O bien este otro:

API Panoramio + ejemplo de JSON con Mootools

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ajax con Mootools, ejemplo sencillo

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

onSuccess: function(texto, xmlrespuesta){ alert('Respuesta:\n' + texto);}, onFailure: function(){alert('Fallo');} }).send();

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com