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 (35 captulos)
Manual de Mootools: http://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
Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 2
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
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.
Referencia: Quien desee aprender Mootools, recomendamos la lectura del Manual de Mootools que estamos publicando en DesarrolloWeb.com.
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, 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.
11
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:
12
'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);
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){
14
document.write ("Ests en Mozilla/Gecko"); } if (window.opera){ 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. 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.
16
Artculo por Miguel Angel Alvarez
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.
17
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. 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"; }, Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 19
detener: function(){ this.estado = "Detenido"; } });
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
Extends: Extendiendo clases con Mootools

Una de las ventajas de la programacin orientada a objetos es la creacin de clases extendiendo las clases que ya tenemos. Por ese mtodo podemos crear clases que heredan las propiedades y mtodos (es decir, los atributos y funcionalidades) de otras clases. Todo esto tiene como ventaja que podremos reutilizar cdigo y hacer cosas ms complejas basndonos en trabajos realizados anteriormente, por nosotros o por otros programadores.
En este artculo del manual de Mootools de DesarrolloWeb.com vamos a ver cmo extender clases, utilizando Extends. Qu es la extensin de clases Para comprender los mecanismos o las ventajas de la extensin de clases podemos verlo con un ejemplo tpico. Por ejemplo, pensemos en los animales. Si tuviramos que modelizar en programacin orientada a objetos la clase animal, le asignaramos unas propiedades y mtodos cualesquiera que necesitsemos. Otro da podramos querer definir la clase mamfero (es un animal que tiene unas caractersticas especficas). Entonces tendramos la posibilidad de reescribir todo el comportamiento definido para los animales y aadirle todo el comportamiento o caractersticas de los mamferos. Pero eso no sera totalmente ptimo, porque con ello estaramos reescribiendo el mismo cdigo que se haba programado ya para los animales. Estaramos haciendo el trabajo dos veces y eso es algo que la programacin orientada a objetos trata de evitar. La programacin orientada a objetos permite la herencia o extensin de clases que en estos casos nos viene como anillo al dedo. Debido a que un mamfero es un animal que tiene unas particularidades especiales, lo interesante es definir los mamferos como una extensin de los animales. Es decir, hacer una clase mamfero que herede las propiedades y mtodos de los animales. Con ello slo tendramos que definir los comportamientos y caractersticas propias de los mamferos, apoyndonos en el trabajo realizado anteriormente para la modelizacin de los animales. As mismo, si definisemos la clase reptil, pues tambin podramos ayudarnos extendiendo la clase animal. Es decir, modelizaramos el reptil a partir del animal (extendiendo la clase animal) y aadiendo los mtodos y propiedades de los reptiles. El esquema de herencia se puede llevar hasta donde sea necesario. Si algn da necesitamos definir la clase perro, pues podramos hacerlo extendiendo la clase mamfero. O si definimos la clase Dogo Alemn podramos hacerlo a travs de extender la clase perro. Etc etc Esto tiene varias ventajas. Una es la reutilizacin de cdigo, como ya hemos dicho. Otra ventaja sera la encapsulacin. Dado que sabemos que la clase perro funciona tal cual queremos, pues podemos crear todas clases con distintas las razas de perros sin preocuparnos de cmo funcionan los perros, ni como funcionan los mamferos, ni los animales, porque todas esas clases fueron creadas como un paquete que se comprob que funcionaba correctamente. Pero si algn da detectamos que una de nuestras clases funciona mal, o se le desea aadir una funcionalidad, simplemente tenemos que editarla y automticamente ese cambio se trasladar a todas las clases que la extiendan. Con la herencia, como se puede entender, ganamos en reusabilidad, facilidad de mantenimiento y creacin del cdigo. Ahora que ya tenemos unas ideas bsicas sobre la herencia, vamos a continar este artculo de desarrolloweb .com, con unas explicaciones para aprender a implementarla en Mootools. Extends en Mootools 1.2 La versin de Mootools 1.2 tiene una manera nueva de realizar la extensin de clases, es decir, clases que heredan propiedades y mtodos de otras clases. Tenemos que crear la clase que va a heredar como cualquier otra clase (con el correspondiente new Class), y dentro de la propia clase especificaremos que se desea extender otra clase con la palabra Extends: y el nombre de la clase de la que pretendemos heredar. Por ejemplo, tenemos aqu una clase "Animal" de ejemplo:
21
var Animal = new Class({ initialize: function(nombre){ this.nombre = nombre; }, tenerHijo: function(){ alert("Se produce un nuevo " + this.nombre); } });
Y ahora vamos a hacer una clase llamada "Mamifero" que hereda de "Animal".
var Mamifero = new Class({ Extends: Animal, initialize: function(nombre, sexo, semanas_gestacion){ this.parent(nombre); this.sexo = sexo; this.semanasGestacion = semanas_gestacion; }, tenerHijo: function(){ if (this.sexo = "hembra"){ alert("Pasan " + this.semanasGestacion + " semanas de gestacin... y llega el parto"); this.parent(); } }, });
Como se puede ver, creamos la clase como cualquier otra, con la palabra new Class
var Mamifero = new Class({ .... });
Ahora tenemos que prestar atencin al uso de la palabra Extends: para indicar la clase de la que queremos heredar.
Extends: Animal,
Eso quiere decir que vamos a extender la clase Animal, definida anteriormente. Al final lleva una coma porque vamos a seguir definiendo mtodos y/o propiedades especficas de los mamferos, que son las que van a extender la clase "Animal" para crear la clase extendida "Mamifero". Ahora en este ejemplo vamos a redefinir el constructor. La clase "Animal" ya tena su propio constructor, pero como los mamferos son ms complejos que los animales, tenemos que redefinir el constructor para realizar la inicializacin completa de los mamferos. En el constructor, no obstante, se puede aprovechar el constructor de la clase de la que se hereda. Es decir, en el constructor del mamfero podemos hacer uso del constructor del animal, para incializar las caractersticas de los animales. Para ello utilizamos esta lnea de cdigo: Este parent es una llamada al constructor de la clase padre, es decir, de la clase que estamos heredando. Con ello podemos hacer uso del constructor definido anteriormente para la clase "Animal", de modo que esa parte del cdigo no tiene por qu ser escrita de nuevo.
this.parent(nombre);
Cabe decir que el mencionado parent se puede utilizar en cualquier mtodo que se haya reescrito en la case que hereda. Por ejemplo, la clase "Mamifero" en este ejemplo refefine el mtodo "tenerHijo" y dentro del cdigo de este mtodo, como se puede ver, tambin se hace uso de parent para llamar al mtodo "tenerHijo" pero de la clase de la que hereda ("Animal"). Para utilizar esta clase "Mamifero" podramos utilizar este cdigo:
var miMamifero = new Mamifero("perro", "hembra", 9); miMamifero.tenerHijo();
22
Este ejemplo se puede ver en marcha. Con esto ya sabemos extender clases en Mootools, pero para completar este artculo de desarrolloweb.com, vamos a presentar otro ejemplo de herencia, que nos va a venir bien para seguir aprendiendo sobre programacin orientada a objetos. Cmo se realiza un extend en Mootools 1.1 Ahora vamos a ver unas notas sobre extend en Mootools 1.1, ya que la herencia se implementa de una manera distinta en esta versin del framework Javascript. Ahora bien, incluso utilizando Mootools 1.2 vendr bien echar un vistazo a este ejemplo para dar un impulso a nuestros conocimientos, de cara a dominar la programacin orientada a objetos. En Mootools existe la instruccin extend, que se aplica sobre clases para extender o generar una clase a partir de otra. Para la clase que comentbamos antes de los animales, podramos tener:
var Animal = new Class({ //propiedades y mtodos de los animales });
Ahora los mamferos se crearan as:

var Mamifero = Animal.extend({ //propiedades y mtodos de los mameros });
Despus de este cdigo, el mamfero sera la suma de las propiedades y mtodos de los animales (esas propiedades y mtodos estaran heredadas de los animales) y las propiedades y mtodos propios de los mamferos. Ejemplo completo de herencia o extensin de clases en Mootools Vamos a hacer un ejemplo sencillo de herencia en Mootools. En el ejemplo vamos a tener una clase que servir de punto de partida, llamada InstrumentoMusical, que modeliza cualquier instrumento musical. Luego tendremos varios instrumentos musicales que crearemos extendiendo la clase InstrumentoMusical. Haramos la clase InstrumentoMusical de la siguiente forma:
var InstrumentoMusical = new Class({ initialize: function(tipo){ this.tipo = tipo; } });
Como vemos simplemente hemos creado un constructor, que recibe el tipo de instrumento (si es de cuerda, percusin, viento, etc) y lo introduce en una propiedad del objeto llamada tipo. Luego podramos crear la clase guitarra de esta manera:
var Guitarra = InstrumentoMusical.extend({ initialize: function(cuerdas){ this.parent("instrumento de cuerda"); this.numCuerdas = cuerdas; }, sonar: function(){ alert("tran tran tran"); } });
Como se puede ver, la clase guitarra est extendiendo la clase InstrumentoMusical.
23
A la clase guitarra le hemos incorporado un constructor que recibe un parmetro que es el nmero de cuerdas que va a tener la guitarra. En dicho constructor estamos haciendo una lnea que cabra explicar:
this.parent("instrumento de cuerda");
Con esta lnea estamos llamando al mtodo initialize de la clase padre que se est extendiendo (el constructor de la clase InstrumentoMusical) pasndole "instrumento de cuerda" como parmetro. Luego las guitarras creadas tendrn como siempre tipo de instrumento el valor "instrumento de cuerda". Adems hemos hecho un mtido llamado sonar en la clase guitarra que hace que la guitarra suene. Posteriormente podramos crear la clase batera, que es otro instrumento musical compuesto por varios elementos de percusin.
var Bateria = InstrumentoMusical.extend({ initialize: function(numeroElementos){ this.parent("instrumento de percusion"); this.numeroElementos = numeroElementos; }, sonar: function(){ for (i=1; i<=this.numeroElementos; i++){ alert ("Sonando elemento " + i); } } });
La batera tiene sus propias particularidades, pero se basa en la clase InstrumentoMusical para funcionar. Igual que ocurra con la guitarra, extiende la clase InstrumentoMusical. Luego la batera tiene un mtodo sonar, que hace ruido, pero este es diferente del de la guitarra. Para utilizar estas dos clases podramos hacer algo como esto:
var miGuitarra = new Guitarra(6); alert(miGuitarra.tipo); miGuitarra.sonar(); var miBateria = new Bateria(3); alert(miBateria.tipo); miBateria.sonar();
Podemos ver el ejemplo en marcha 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.
24
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.
25
//el objeto miPortatil queda inalterado alert(miPortatil.hd); //mostrar undefined
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. 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'); }
27
})
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(); Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 28
miCasa.desocupar(); miCasa.ocupar();
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 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
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")
31
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: http://www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 32
<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
34
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
35
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
Seleccionar un elemento con getElement()

Seguimos con el Manual de Mootools de DesarrolloWeb.com. En artculos precedentes estuvimos brindando las nociones ms bsicas del mdulo Element y vamos a continuar con ello. Debe haber quedado claro hasta el momento el uso de las funciones dlar $() y doble dlar $$ (), porque las vamos a utilizar constantemente en este manual. Si no es as, conviene repasar
el uso de esas funciones en los artculos Mtodo $() y Mtodo $$(). Vimos que con esas funciones se poda acceder rpidamente a elementos de la pgina a travs de sus identificadores (atributo id del elemento HTML). Ahora vamos a ver cmo acceder a elementos de la pgina que estn dentro de otros. Los elementos que vamos a acceder ahora no necesitan tener identificadores para poder ser accedidos y procesados por medio de Mootools. Para ello utilizaremos el mtodo getElement(), de cualquier objeto de la clase Element. El mtodo getElement() pertenece a la clase Element, as pues, tenemos que invocarlo sobre una instancia de la clase Element, es decir, un elemento de la pgina. Los elementos podemos conseguirlos a travs del mtodo $(). $("id_de_un_elemento_cualquiera").getElement("div"); getElement() recibe como parmetro el nombre de una etiqueta HTML y devuelve el primer espcimen de esa etiqueta que haya dentro del elemento donde fue invocado getElement(). Esta explicacin puede parecer un poco retorcida, pero se entender as: en la sentencia anterior, getElement() devolver la primera etiqueta DIV que haya dentro del elemento con id="id_de_un_elemento_cualquiera". De todos modos, como solemos hacer en desarrolloweb .com, vamos a ver algunos ejemplos de uso de getElement() que terminarn de aclarar este asunto. Imaginemos que tenemos un cdigo HTML como el que sigue:
<body> <ul> <li>Elemento en una lista fuera del div</li> <li>Otro elemento fuera del div</li> <li>Elemento <a href="#">con enlace!</a></li> </ul> <div id="capadiv"> <ul> <li>Lista, elemento 1 <a href="#">enlace dentro de elemento</a></li> <li>Lista, elemento 2</li> <li>Otro elemento</li> </ul> <p> Esto es un prrafo. Pongo un <a href="#">enlace dentro del prrafo</a> </p> </div> <p>Pongo otro prrafo fuera del div</p> </body>
Como vemos tenemos un cuerpo de la pgina, englobado en la etiqueta BODY y dentro del mismo varios elementos o etiquetas HTML. Vamos ahora a trabajar con esta pgina, simplemente seleccionando algunos de estos elementos y alterando sus propiedades, para cambiarlos un poco y as ver que los hemos seleccionado correctamente. Para ello veamos esta primera funcin:
38
function seleccionarParrafoEnDiv(){ miParrafo = $("capadiv").getElement("p"); miParrafo.set("html", "Meto otro texto en el prrafo"); }
Esto lo que hace es seleccionar el primer prrafo (etiqueta P) que hay dentro del elemento con id="capadiv". Podemos ver en el cdigo HTML anterior que haba una capa DIV con ese identificador:
<div id="capadiv>
Dentro contiene varias otras etiquetas, entre ellas un prrafo As pues, seleccionamos ese primer prrafo con la sentencia:
miParrafo = $("capadiv").getElement("p");
Luego, con la siguiente lnea alteramos alguna de las propiedades de ese prrafo. Vemos que para alterarlo utilizamos el mtodo set() de Element, que recibe dos parmetros. El primero es lo que queremos alterar y el segundo es el nuevo contenido.
miParrafo.set("html", "Meto otro texto en el prrafo");
La ejecucin de la lnea anterior forzar a que el contenido del prrafo sea "Meto otro texto en el prrafo". Ahora veamos una segunda funcin que tambin hace uso de getElement() para seleccionar otro elemento.
function seleccionarPrimeraLista(){ miLista = $(document.body).getElement("ul"); miLista.set ("style", "font-size: 150%; color: red"); }
Con este nuevo ejemplo estamos seleccionando el primer elemento UL que hay en el BODY del documento HTML. Esto nos seleccionar la primera lista UL que haya en el cuerpo de la pgina. Luego con la siguiente lnea cambiamos ese elemento UL para asignarle nuevos estilos CSS. El mtodo set() de la clase Element, como hemos podido comprobar y tal como habamos visto en distintos ejemplos de este manual de desarrollo web .com, es muy polivalente, permitiendo alterar cualquier estilo o atributo de una etiqueta HTML. Para finalizar este ejercicio podemos ver el ejemplo en marcha en una pgina aparte. Artculo por Miguel Angel Alvarez
Seleccionar elementos de la pgina con getElements()

En el captulo anterior del manual de Mootools vimos cmo podramos seleccionar un elemento en concreto de la pgina. En este nuevo artculo de DesarrolloWeb.com veremos cmo seleccionar todos los elementos de una misma etiqueta, por ejemplo, todos los enlaces, todos los prrafos, etc. Para ello utilizaremos el mtodo getElements() de la clase Element de
39
Mootools. Antes de continuar con este artculo conviene haber ledo el texto anterior, en el que comentamos la funcin getElement() de Mootools, ya que getElements() funciona exactamente igual, con la nica diferencia que devuelve todos los elementos de un tipo en un array y no nicamente uno. $("elemento_de_la_pagina").getElements("p") Una lnea como la anterior seleccionara todas las etiquetas de prrafo ("p") que hay dentro del elemento "elemento_de_la_pagina". Veremos ahora unos ejemplos de uso de getElements() para terminar de entender su funcionamiento. Tendremos un cdigo HTML para seleccionar elementos dentro de l, que ser el mismo que en el artculo anterior de este manual. Veamos este cdigo:
function seleccionarLiEnDiv(){ todosLiEnDiv = $("capadiv").getElements("li"); todosLiEnDiv.each(alterarLi); }
Esta funcin, en la primera lnea, selecciona todos los elementos "li" (elementos de lista) que hay dentro de una capa llamada "capadiv". Esto nos devuelve un array donde en cada una de sus casillas tenemos una instancia de cada uno de los LI que hay dentro del elemento "capadiv". Se entiende entonces que la variable todosLiEnDiv es un array de objetos de la clase Element, en este caso un array de elementos de lista. Luego, en la siguiente lnea, estamos utilizando un mtodo propio de Mootools llamado each(). Nos viene bien explicar con detalle este mtodo each, porque todava no lo habamos utilizado ni explicado anteriormente en desarrollo web .com. each() forma parte del core de Mootools y tambin de la clase Array. En este caso estamos invocando a each sobre un array. Lo que hace es ejecutar, para cada elemento del array, una funcin que se le pase por parmetro. Dicho de otra manera, para cada elemento del array todosLiEnDiv vamos a llamar a la funcin alterarLi, pasando como parmetro cada uno de los elementos del array. La funcin que se invoca con each para cada elemento del array recibe como parmetro el valor del elemento actual. As pues, podemos ver cmo sera esa funcin alterarLi.
function alterarLi(elemento){ elemento.set("style", "margin: 15px; background-color: #999999"); }
Como vemos, recibe por parmetro el elemento actual y simplemente, se llama al ya conocido mtodo set() para alterar ese elemento. As pues, alterarLi recibir cada uno de los elementos del array, esto es, cada uno de las etiquetas LI que tenamos en el array que nos devolvi getElements(). Ahora veamos otra funcin interesante para ilustrar el funcionamiento de getElements().
function seleccionarEnlaces(){
40
todosEnlaces = $(document.body).getElements("a"); todosEnlaces.each(function(elemento){ elemento.appendText(" Click aqu!"); });
Aqu se puede ver un uso similar de getElements(), con el que vamos a seleccionar en un array todos los enlaces (elementos de etiqueta "a") que hay en el cuerpo de la pgina. Con $ (document.body) tenemos una referencia al cuerpo de la pgina o etiqueta BODY. Siguiendo el ejemplo, tiene que quedar claro que en la variable todosEnlaces tenemos un array con todos los enlaces de la pgina. Ahora con todosEnlaces.each() hacemos llamadas a una funcin pasando cada uno de los elementos del array. En este caso, la propia funcin est expresada dentro del parmetro que recibe each. En esa funcin recibimos como parmetro cada uno de los elementos del array y dentro, simplemente, llamamos a otro mtodo de la clase Element, appendText(), que sirve para aadir un texto al elemento. El resultado de ejecutar esta funcin ser la alteracin de texto de todos los enlaces de la pgina, agregando al final la cadena " click aqu". El ejemplo en funcionamiento se puede ver en una pgina aparte. (hemos combinado los ejemplos de este artculo y el anterior, para tener en un slo cdigo los usos de las funciones getElement() y getElements()) Artculo por Miguel Angel Alvarez
Ms mtodos de la clase Element de Mootools

En nuestro manual de Mootools hemos presentado ya unos cuantos captulos sobre el trabajo con la clase Element de Mootols. Todos estos artculos explican las bases del tratamiento dinmico de cualquier elemento de la pgina web. Hemos visto varias maneras de seleccionar elementos de la pgina y alterar algunas de sus caractersticas principales. La clase Element es una de las ms completas de Mootools, que contiene decenas de mtodos para realizar acciones sobre el contenido de la pgina. La idea es seguir viendo mtodos de Element, por lo menos algunos de los ms tiles, para adquirir una soltura mayor con el framework. Como venimos haciendo en los artculos de desarrolloweb.com, acompaaremos las explicaciones con algunos ejemplos. Mtodos getProperty() y setProperty() Estos dos mtodos de Element nos sirven para obtener y modificar el valor de una propiedad de un elemento de la pgina. Cuando hablamos de propiedad nos referimos a uno de los atributos que se colocan en la etiqueta HTML del elemento. Tenemos un enlace como este:
<a href="http://www.desarrolloweb.com" id="mienlace" title="Tu mejor ayuda para aprender a hacer webs">DesarrolloWeb.com</a>
Ahora con el mtodo getProperty() vamos a extraer el valor de una de sus propiedades, en
este caso el valor del atributo title.

$('mienlace').getProperty('title')
Esto nos devolver el valor del atributo title. Si quisiramos obtener el valor del atributo href haramos lo siguiente:
$('mienlace').getProperty('href')
Ahora, con setProperty() vamos a alterar el valor del atributo title:

$('mienlace').setProperty('title', 'pongo otro title')
Podemos ver un ejemplo en marcha dedicado a este ejemplo de seleccionar y alterar propiedades de elementos. Mtodos addClass() y removeClass() Otros de los mtodos ms interesantes de la clase Element son los que permiten aadir una clase a un elemento (una clase de estilos CSS -class-) y eliminarla. El mtodo addClass() aade una clase de estilos CSS a un elemento, si es que no la tuviera ya. En el momento que se aade una clase se alteran los estilos del elemento para mostrar las nuevas caractersticas CSS que tenga esa clase nueva. Imaginemos que tenemos un elemento como este:
<div id=mielemento>Contenidos de un elemento al que voy a aadir y quitar clases de CSS (CSS class)</div>
Y una declaracin de estilos, en la que definimos una clase -class css- como esta:
<style type="text/css"> .miclase{ background-color: #666666; color: #ffffcc; padding: 15px; } </style>
Si queremos alterar el elemento para aplicarle la clase css anterior, haramos algo como esto:
$('mielemento').addClass('miclase');
Por su parte, el mtodo removeClass() lo que hace es eliminar los estilos CSS de una clase, es decir, hace que el elemento no tenga la clase CSS que le indiquemos por parmetro. Ahora, si queremos quitarle la clase miclase a ese elemento haramos algo como esto:
$('mielemento').removeClass('miclase')
Podemos ver una pgina en marcha basada en este ejemplo. En el siguiente artculo vamos a continuar viendo otros mtodos de la clase Element de Mootools.
42
Artculo por Miguel Angel Alvarez
Ms funcionalidades de Element
Continuamos con las explicaciones de la clase Element, enmarcadas en el Manual de Mootools que estamos publicando en DesarrolloWeb.com. A continuacin vamos a ver otros mtodos interesantes de la clase Element. Mtodo empty() Este mtodo sirve para eliminar los contenidos que haya dentro de un elemento de la pgina. Cuando nos referimos a los contenidos hablamos de todo el texto que haya dentro de la etiqueta y todas las etiquetas que pudiera tener, entre la apertura y cierre del elemento. Por ejemplo, tenemos este elemento:
<div id="mielemento" style="background-color: #ffcc00; padding: 10px;"> <p>Contenidos del elemento, que luego podremos borrar!</p> <a href="http://www.desarrolloweb.com">DesarrolloWeb.com</a> </div>
Se trata de una capa DIV que a su vez tiene diversos elementos dentro. Si quisiramos borrar todo lo que hay dentro del DIV haramos esto:
$('mielemento').empty();
Esto no borrar la capa "mielemento" pero s todo lo que haba dentro. Podemos ver le ejemplo en funcionamiento en una pgina aparte. Mtodo destroy() Hemos visto que con empty() podemos borrar todo lo que haya dentro de un elemento, pero si queremos borrar todos los contenidos de ese elemento y adems el propio elemento, debemos utilizar el mtodo destroy(). Veamos ahora este elemento:
<div id="mielemento" style="background-color: #ffcc00; padding: 10px;"> <p>Contenidos del elemento, que vamos a eliminar por completo.</p> <a href="http://www.desarrolloweb.com">DesarrolloWeb.com</a> </div>
Si queremos eliminarlo totalmente de la pgina haramos algo como esto:

$('mielemento').destroy();
Esto nos borrar todo el elemento, es decir, l mismo y todo lo que tuviera dentro. Podemos ver una pgina con el ejemplo en marcha. Mtodo clone()
Ahora vamos a ver un mtodo de Element que permite clonar cualquier elemento que tengamos en la pgina. Este mtodo recibe el elemento que se desea clonar y devuelve una copia del mismo, en una variable que es un objeto de la clase Element. Por ejemplo, tenemos un elemento como este:
<img src="http://www.desarrolloweb.com/images/logo_desarrollo_web.gif" id="miimagen" />
Esto es una imagen que vamos a clonar y para ello haremos lo siguiente:
clonada = $('miimagen').clone();
Con esto tenemos una varible llamada clonada, que dentro contiene una instancia de Element, que es una copia de la imagen que habamos visto antes. Pero con esto no obtenemos ningn resultado, porque el elemento imagen simplemente est en una variable Javascript de la pgina y no se est visualizando en el navegador, a no ser que la inyectemos por algn lado.
clonada.inject($('miimagen'), 'after');
Con esto la hemos insertado dentro de la pgina, justo despus de la imgen clonada previamente.
Nota: ya explicamos cmo inyectar elementos en la pgina en un artculo anterior publicado por desarrolloweb en este manual. Lase el artculo: inyeccin de un elemento en la pgina.
Podemos ver un ejemplo basado en este cdigo para mostrar el funcionamiento del mtodo clone(). Como hemos dicho en otras ocasiones, la clase Element es la ms rica en funcionalidades de Mootools y aun quedan muchas cosas que habra que conocer. Sin embargo, para ir avanzando el manual de Mootools de desarrollo web .com y por el momento, este artculo pretendemos que sea el ltimo en el que vamos a tratar la clase Element. En el futuro iremos mostrando otros ejemplos que con toda certeza aplicarn conocimientos que hemos relatado sobre Element, y tambin cosas nuevas que nos hemos dejado en el tintero. Artculo por Miguel Angel Alvarez
Eventos en Mootools: Element Event

Los eventos son una de las partes fundamentales de Mootools que debemos dominar para poder hacer componentes dinmicos con Javascript, que respondan a las acciones realizadas por los usuarios. En el Manual de Mootools publicado en DesarrolloWeb.com ya hemos visto en algunos ejemplos cmo se realizan eventos, pero aun no hemos ofrecido explicaciones detalladas sobre cmo crearlos. Ha llegado el momento de ponernos en la tarea de conocer los eventos, para crearlos y empezar a hacer scripts ms interactivos. As pues, vamos a trabajar con la clase Element de Mootools, para aprender a crear eventos que respondan a acciones del usuario realizadas sobre cualquier elemento de la pgina.
44
Para ello, los elementos de la pgina, que se modelizan a travs de la clase Element, tienen un mtodo llamado addEvent(), que recibe el tipo de evento y la funcin que debe ejecutarse como respuesta al mismo. Lo veremos con detalle en este artculo.
Nota: Suponemos que ya se conocen lo que son los eventos y qu eventos tenemos disponibles en Javascript para hacer cosas como resultado de las acciones del usuario sobre la pgina. Si no sabemos qu son los eventos y cules tenemos disponibles, recomendamos la lectura de nuestros manuales de Javascript, concretamente los artculos del manual de Javascript II que tratan sobre eventos: Eventos en Javascript y los artculos siguientes del manual.
Definir un evento sobre un elemento de la pgina

Suponemos que tenemos un elemento cualquiera de la pgina, al que queremos asignar un evento.
<div id="mielemento">Este elemento</div>
Ahora, con Javascript podemos definir el siguiente cdigo para asignar un evento a este elemento:
$("mielemento").addEvent('click', function() { alert('Has pulsado "mielemento"...'); });
Como se puede ver, se accede al elemento a travs de la funcin dlar ($). Luego sobre ese elemento se invoca el mtodo addEvent, al que le pasamos dos parmetros. 'click': es el tipo de evento que queremos definir (onclick, onmouseover... ) pero sin el prefijo "on". As pues, click sirve para definir un evento que se desata cuando se hace clic sobre el elemento. function(): Luego se define la funcin que se debe invocar para realizar la ejecucin de acciones relacionadas con la puesta en marcha del evento. Esta serie de funciones se pueden definir a continuacin en el mismo cdigo, abriendo las llaves de la funcin y luego colocando todas las sentencias a ejecutar cuando se ejecute el evento. Podemos ver el ejemplo en marcha en una pgina donde tenemos todos los ejemplos sobre eventos que vamos a ver en este artculo.
Nota: Tambin debemos decir que lo correcto es aadir el evento (es decir, llamar al mtodo addEvent) cuando se ha cargado ya el DOM de la pgina y est listo para recibir acciones. As que lo correcto es utilizar el evento domready de window, como se puede ver en este cdigo. window.addEvent('domready', function() { $("mielemento").addEvent('click', function() { alert('Has pulsado "mielemento"...'); }); });
45
Otro ejemplo de creacin de eventos en Mootools

Para que se pueda entender mejor este sistema para la definicin de eventos de usuario en Mootools, vamos a poner otro cdigo para la ejecucin de otro evento sobre otro tipo de elemento de la pgina. En este caso vamos a definir un evento "onchange" sobre un campo select de formulario. El evento onchange se desata cuando cambia el valor seleccionado en el campo de seleccin desplegable. Tenemos este campo select de formulario:
<form> <select id="miselect"> <option value="1">Opcion 1</option> <option value="2">Opcion 2</option> </select> </form>
Como se puede ver, hemos colocado un identificador en la etiqueta SELECT, para poder referirnos a l mediante Mootools. Ahora veamos cmo definir un evento sobre este campo.
$("miselect").addEvent('change', function() { alert('Has cambiado el campo select'); });
El ejemplo es similar, con la diferencia que en este caso hemos utilizado el evento "change" que corresponde al mencionado evento de Javascript onchange. Podemos ver este cdigo funcionando en este enlace. Ya hemos podido comenzar a crear eventos con Mootools, con addEvent(), ahora vamos a pasar a utilizar una funcin realmente til en Mootools, bind(), pero lo explicaremos en el siguiente artculo. Artculo por Miguel Angel Alvarez
Utilizacin de bind() en los eventos Mootools

Hay un metodo que se utiliza constantemente a la hora de definir eventos en Mootools. Se trata del mtodo bind(), que pertenece a la librera Native - Function de Mootools. Para los que lleguen a este artculo del Manual de Mootools de DesarrolloWeb.com, decirles que deben leer antes el artculo anterior, en el que da una primera introduccin a los eventos de Element.
Para qu sirve Bind() en funciones Mootools

Bind() es un mtodo de funciones Mootools que permite cambiar el mbito de la variable this cuando se invoca una funcin. Como sabemos 'this' es una variable que apunta al objeto que recibe una llamada a un mtodo. Dicho de otra manera, this es una referencia al objeto sobre el que se est ejecutando un mtodo. Los que dominen, aunque sea ligeramente, la programacin orientada a objetos bien deben saber que la variable this es muy importante, porque nos permite hacer cosas con el objeto con el que se trabaja. Ahora bien, cuando llamamos a un evento que estamos definiendo en un
objeto, se invoca a una funcin distinta, donde el mbito de la variable this ya no existe. As que en un evento no tendramos acceso a la variable this, con lo que no podramos acceder al objeto que ha recibido el evento. Con bind() en una funcin podemos definir el valor de la variable this dentro de esa funcin. Dicho valor, que se ha de cargar en this durante la ejecucin de la funcin, se debe escribir en la propia declaracin de la funcin.
function mifuncion(){ //... codigo de la funcion this.loquesea() //this toma el valor de la variable contenido_para_this }.bind(contenido_para_this)
As, cuando se ejecute esa funcin, la variable contenido_para_this se podr acceder a travs de la variable this.
Definicin de un evento con bind

Ahora, por lo que respecta a eventos, como deca anteriormente en este texto publicado en desarrollo web .com, al codificarse en una funcin distinta, hay veces que tendremos que utilizar bind(), para decirle a la funcin del evento el valor de la variable this que debe tener. Seguramente lo podamos ver mejor con un ejemplo. Tenemos este enlace:
<a href="javascript:void(0)" id="mienlace">Enlace</a>)
Ahora vamos a definir un evento sobre el enlace, que se ejecute cuando el usuario coloca el ratn sobre el mismo.
$("mienlace").addEvent('mouseover', function() { this.set("style", "background-color: #ff8800;"); }.bind($("mienlace")) );
Como se puede ver, a la hora de declarar la funcin, despus de la llave de cierre, se ha colocado el mtodo bind() pasando como parmetro una variable, $("mienlace"), que es una referencia al enlace que recibe este evento. Luego, en el cdigo de la funcin, se puede apreciar cmo se utiliza la variable this, que tiene el valor de lo que se pas en bind(), es decir, el enlace sobre el que se ejecut el evento. A ese enlace se le cambia una declaracin de estilo css para ponerle un color de fondo. Ahora vamos a ver un evento similar, para ejecutar acciones cuando se retira el ratn del enlace:
$("mienlace").addEvent('mouseout', function() { this.set("style", "background-color: transparent;"); }.bind($("mienlace")) );
Este ejemplo se puede ver en marcha en una pgina aparte. As pues, hemos aprendido a utilizar la funcin bind() a la hora de definir eventos, para que las funciones que codifican los eventos sepan qu se debe tener en la variable this. Realmente el ejemplo que hemos puesto no dice mucho sobre la verdadera importancia de bind(), pero a lo largo del manual de Mootools de desarrolloweb.com veremos ms ejemplos sobre bind() mucho ms utiles y fundamentales, con lo que se podr practicar sobre este asunto. Artculo por Miguel Angel Alvarez
47
Ms sobre Eventos en Mootools. Mtodo fireEvent

En nuestro Manual de Mootools hemos explicado ya algunas de las claves del trabajo con eventos. Pero todava hay algunos detalles que se deben comentar y mostrar ejemplos de cdigo para dominar el sistema de eventos. En general, ya vimos como asociar un evento a un elemento de la pgina y tambin cmo utilizar el mtodo bind() para conseguir cambiar el mbito de la variable this cuando se est codificando el comportamiento de un evento. Ahora veremos cmo podemos disparar un evento de un elemento de la pgina, automticamente, sin necesidad que el usuario produzca el evento.
Mtodo fireEvent de Element.Event

El mtodo fireEvent() sirve para ejecutar un evento de un elemento, es decir, lanzar un evento que pertenece a un elemento de la pgina, sin que el usuario haya tenido que realizar nada con ese elemento. Este mtodo se invoca sobre el elemento de la pgina del que se quiere ejecutar el evento (un botn o elemento de formulario, un enlace, una capa DIV o lo que sea) y recibe varios parmetros. Tipo de evento: el nombre del evento que se desea lanzar. Parmetros para el evento: uno o varios parmetros que se tienen que pasar a la funcin que ejecuta el evento. Si es ms de un parmetro, se tienen que indicar en un array. Retardo: nmero de milisegundos que se tiene que ejecutar el evento.
Aqu tenemos el primer ejemplo de este artculo de DesarrolloWeb.com de los dos que vamos a ver sobre el mtodo fireEvent, en el que vamos a tener un botn HTML. Luego crearemos un evento "click" para ese botn y lo invocaremos con fireEvent. Este sera el botn:
<input type="button" value="pulsar" id="miboton">
Ahora veamos el cdigo Javascript con Mootools para crear el evento click y lanzarlo con fireEvent:
window.addEvent("domready", function(){ $("miboton").addEvent("click", function(){ alert("Evento click en el botn"); }); $("miboton").fireEvent("click"); });
Habra de verse que estamos obligados a utilizar addEvent del evento domready, para asegurarnos que este cdigo se ejecuta cuando el DOM est listo. Luego se puede ver que con addEvent del evento click sobre el objeto $("miboton") (el elemento HTML botn, que tena el id="miboton") generamos el correspondiente evento para cuando se haga clic en el botn.
48
Luego, con $("miboton").fireEvent("click"); lanzamos el evento "click", que ser como si el usuario hubiese hecho clic sobre el botn. Podemos ver el ejemplo en marcha en una pgina aparte.
Importante sobre fireEvent

El mtodo fireEvent sirve para ejecutar cualquier tipo de evento de los que se pueden escribir con los manejadores de eventos normales de Javascript: onclick, onload... Pero ojo, slo podremos lanzar eventos que hayan sido creados o declarados a partir del mtodo addEvent de Mootools y no eventos que se hayan declarado escribindolos con el correspondiente atributo HTML de evento (onclick, onmousedown, etc.) en la propia etiqueta del elemento . Cabe decir adems sobre fireEvent que se puede ejecutar sobre los objetos window y document, con lo que se pueden lanzar eventos sobre la ventana del navegador o sobre el objeto documento, como si el usuario los hubiese producido. Con la excepcin del evento "domready", que realmente slo se ejecuta cuando el DOM est listo.
Segundo ejemplo de fireEvent

Veamos un segundo ejemplo, para acabar de mostrar las posibilidades de los eventos en Mootools que podemos poner en marcha con fireEvent. En este ejemplo queremos mostrar la utilizacin de otros parmetros de fireEvent, a la vez que abrimos las puertas a la creacin de eventos personalizados en nuestras aplicaciones Javascript. Como se haba dicho antes, se pueden indicar otros atributos a fireEvent, uno es un parmetro que se le pasa a la funcin que se encarga de procesar el evento y el otro un retardo para la ejecucin del evento. Adems, en este segundo ejemplo vamos a crear un mtodo personalizado, que no tiene nada que ver con cualquier evento de los que existen en Javascript. El evento lo hemos creado personalizado slo por hacer una prueba y lo hemos llamado "desarrolloweb". Tememos un elemento de la pgina, en este caso un enlace:
<a href="http://www.desarrolloweb.com" id="mienlace">Volver a DesarrolloWeb.com</a>
Y ahora un cdigo Mootools para crear el evento personalizado "desarrolloweb", que creamos como si fuera uno de los eventos normales de Javascript:
$("mienlace").addEvent("desarrolloweb", function(algo){ alert("Este evento me lo he inventado\n" + algo); });
Vemos ahora que la funcin que procesa el evento tiene un parmetro llamado "algo" que se muestra en la caja de alerta. Ahora podemos ejecutar este evento con fireEvent(), de esta manera:
$("mienlace").fireEvent("desarrolloweb", "parametro que le paso a la funcin",1000);
Como se puede ver, se ejecuta el evento personalizado "desarrolloweb", se le pasa un parmetro con una cadena de texto y se hace un retardo de 1 segundo (1000 milisegundos). El ejemplo se puede ver en marcha en una pgina aparte. Como se ha podido ver, con Mootools es fcil codificar eventos y lanzarlos (ponerlos en marcha) desde el propio cdigo javascript, como si hubiera sido el propio usuario el que
49
hubiese producido el evento con sus acciones sobre los elementos de la pgina. Artculo por Miguel Angel Alvarez
Ejemplo prctico de uso de Mootools - Texarea con cuenta de caracteres

Ha llegado el momento de revisar todos los conocimientos adquiridos hasta el momento en el manual de Mootools. Hemos visto bastantes cosas ya sobre el manejo de este framework Javascript, as que estamos en disposicin de crear un primer ejemplo que explota muchas de las funcionalidades que estamos aprendiendo. Este ejemplo nos dar una visin ms global sobre el buen uso de Mootools y su potencia, a la vez que nos ayudar a afianzar los distintos conocimientos que hemos aprendido por separado. Nuestro ejemplo ser la construccin de un campo textarea que tenga al lado un texto donde se muestra el nmero de caracteres que tiene. Lo vamos a construir por medio de programacin orientada a objetos, tal como se debe hacer en Mootools, con lo que podremos reutilizar el cdigo fcilmente para otros proyectos donde queramos utilizar este "textarea inteligente". Otra de las ventajas ser que podremos tener conviviendo varios campos textarea que cuenten sus caracteres en la misma pgina, cuya implementacin no requiera duplicar cdigo Javascript, y sin que interfieran entre si las cuentas de caracteres de los distintos textarea del documento. Podemos ver una pgina con el funcionamiento de este ejemplo en marcha. Insisto, la idea de este primer ejemplo global de Mootools no es estudiar o depurar la funcionalidad de este "textarea contador de caracteres", sino mostrar a los lectores de este manual un uso adecuado del framework, de modo que el lector pueda crear sus propias clases para implementar funcionalidades en el cliente para sus propias pginas.
Crear una clase con Mootools para implementar una funcionalidad

La manera correcta de proceder para hacer un script con Mootools es crear una clase, de programacin orientada a objetos, que implemente las funcionalidades con las que queremos dotar a nuestra pgina. Esa clase podremos instanciarla para crear objetos Mootools que se encarguen de automatizar los procesos dinmicos. As podremos instanciar cualquier nmero de objetos para que realicen estas funcionalidades por si solos y podremos desentendernos de su complejidad y reutilizar el cdigo donde lo deseemos. Las bases para hacer todo esto las hemos aprendido ya en este manual, as que no debera dar mucho problema entender el cdigo y si no es as, simplemente sera releer los artculos en los que se habla de las clases de Mootools . La clase tiene un constructor, a la que tendremos que pasar los parmetros para personalizar el comportamiento de ese objeto y asociarlo con los elementos de la pgina con los que queramos que trabaje. A estas alturas deberamos conocer tambin cmo crear un constructor de la clase. En el constructor inicializaremos todos los componentes de los objetos una vez sean creados.
50
En este caso tendremos que recibir el identificador (id) del textarea a contar caracteres y entonces crearemos toda la estructura para mostrar caracteres y crear los eventos para contarlos cuando el usuario los escriba. En el resto de la clase tendremos que crear los mtodos que estimemos necesarios para implementar las funcionalidades de cuenta de caracteres. As pues, vamos a mostrar ya el cdigo de la clase y luego iremos comentando las diferentes partes.
//creo una clase para conseguir que un textarea tenga un contador de caracteres var TextareaContador = new Class({ //defino un constructor, que recibe el id del textarea initialize: function(idTextarea){ //recupero el elemento textarea con la funcin dolar this.textarea = $(idTextarea); //creo un elemento SPAN para mostrar el contador this.campoContador = new Element ("span", {"class": "estilocontador"}); //inyecto el contador despus del textarea this.campoContador.inject(this.textarea, "after"); //creo un evento para el textarea, keyup, para cuando el usuario suelta la tecla this.textarea.addEvent("keyup", function(){ //simplemente llamo a un mtodo de esta clase que cuenta caracteres this.cuentaCaracteres(); }.bind(this) ); //llamo al mtodo que cuenta caracteres, para inicializar el contador this.cuentaCaracteres(); }, //creo un mtodo para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el nmero de caracteres actual del textarea this.campoContador.set("html", "Nmero caracteres: " + this.textarea.value.length); } });
El cdigo de la clase est comentado para que se pueda saber qu se hace en cada paso. Pero voy a dar una serie de referencias donde podemos entender y aprender todo lo que hemos hecho en el script.
//creo una clase para conseguir que un textarea tenga un contador de caracteres var TextareaContador = new Class({
Ver el artculo que habla sobre las clases.

//defino un constructor, que recibe el id del textarea initialize: function(idTextarea){
Ver el artculo que habla sobre constructores.

//recupero el elemento textarea con la funcin dolar this.textarea = $(idTextarea);
Ver el artculo sobre la funcin dlar.

//creo un elemento SPAN para mostrar el contador this.campoContador = new Element ("span", {"class": "estilocontador"}); //inyecto el contador despus del textarea this.campoContador.inject(this.textarea, "after");
En estas lneas hemos creado un elemento de texto donde mostraremos la cuenta de caracteres. Luego lo hemos colocado en el cdigo de la pgina despus del textarea, con lo que aparecer cerca, posicionado tal como lo indiquemos en el estilo CSS de la clase
"estilocontador". Ver el artculo de construccin de elementos en la pgina. Ver el artculo de inyeccin de elementos en la pgina.
//creo un evento para el textarea, keyup, para cuando el usuario suelta la tecla this.textarea.addEvent("keyup", function(){ //simplemente llamo a un mtodo de esta clase que cuenta caracteres this.cuentaCaracteres(); }.bind(this)
Aqu se est definiendo un evento, que asociamos con el objeto textarea del objeto, para que cuando se escriba algo en el campo se actualice la cuenta de caracteres mostrada al lado del textarea. (El evento "keyup" se activa cuando el usuario pulsa una tecla y luego la suelta, pero slo en el momento de soltar la tecla). Para procesar el evento se crea una funcin que simplemente llama a otro mtodo de la clase donde se realiza la cuenta de caracteres. Ver el artculo donde se habla de eventos. Ver el artculo donde se habla de la funcin bind()
//llamo al mtodo que cuenta caracteres, para inicializar el contador this.cuentaCaracteres();
El constructor termina llamando al mtodo cuentaCaracteres(), con lo que se inicializar el contador de caracteres, por si en el textarea ya hubiera algn texto escrito previamente.
//creo un mtodo para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el nmero de caracteres actual del textarea this.campoContador.set("html", "Nmero caracteres: " + this.textarea.value.length); }
En este mtodo se actualiza el campo de conteo, cambiando su propiedad HTML para mostrar la cuenta actual de caracteres. Ver artculo donde se explica el mtodo set de un elemento de la pgina. Eso ha sido todo el cdigo de la clase TextareaContador. Ahora sera bueno ver el cdigo HTML que tendremos en la pgina para crear dos "textareas inteligentes":
<textarea id="textocontador"></textarea> <br> <br> <textarea id="otro" cols=50 rows=8>Este textarea tiene texto escrito...</textarea>
Slo necesitamos fijarnos en los Ids de los textarea, que utilizaremos para referirnos a ellos a la hora de crear los objetos para que funcione la cuenta de caracteres. Por ltimo veamos el cdigo para instanciar los objetos TextareaContador, una vez que el DOM de la pgina est listo para recibir modificaciones dinmicas por Javascript.
//creo un evento para cuando est listo el DOM de la pgina window.addEvent("domready", function(){ //creo el objeto TextareaContador, pasando el identificador del textarea que se pretende contar caracteres. texto = new TextareaContador("textocontador"); otro = new TextareaContador("otro"); });
Ver el artculo sobre el evento "domready" del objeto window que utilizamos para hacer cosas cuando el DOM est listo. Ver tambin el artculo que habla sobre la instaciacin y trabajo con objetos en Mootools
El cdigo completo de este ejercicio

<html> <head> Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 52
<title>Textarea que cuenta caracteres escritos</title> <script src="mootools-1.2.1-core-yc.js" type="text/javascript"></script> <style type="text/css"> span.estilocontador{ display: block; margin-top: 3px; width: 120px; font-size:8pt; } </style> <script> //creo una clase para conseguir que un textarea tenga un contador de caracteres var TextareaContador = new Class({ //defino un constructor, que recibe el id del textarea initialize: function(idTextarea){ //recupero el elemento textarea con la funcin dolar this.textarea = $(idTextarea); //creo un elemento SPAN para mostrar el contador this.campoContador = new Element ("span", {"class": "estilocontador"}); //inyecto el contador despus del textarea this.campoContador.inject(this.textarea, "after"); //creo un evento para el textarea, keyup, para cuando el usuario suelta la tecla this.textarea.addEvent("keyup", function(){ //simplemente llamo a un mtodo de esta clase que cuenta caracteres this.cuentaCaracteres(); }.bind(this) ); //llamo al mtodo que cuenta caracteres, para inicializar el contador this.cuentaCaracteres(); }, //creo un mtodo para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el nmero de caracteres actual del textarea this.campoContador.set("html", "Nmero caracteres: " + this.textarea.value.length); } }); //creo un evento para cuando est listo el DOM de la pgina window.addEvent("domready", function(){ //creo el objeto TextareaContador, pasando el identificador del textarea que se pretende contar caracteres. texto = new TextareaContador("textocontador"); otro = new TextareaContador("otro"); }); </script> </head> <body> <form> <textarea id="textocontador"></textarea> <br> <br> <br> <textarea id="otro" cols=50 rows=8>Este textarea tiene texto escrito...</textarea> </form> <br> <br> <a href="http://www.desarrolloweb.com">http://www.desarrolloweb.com</a> </body> </html>
Podemos ver el ejemplo en una pgina aparte.
53
Espero que con este ejercicio, asimilando los conocimientos que ya habamos adquirido en el manual de Mootools, podamos entender el proceso completo de implementacin y puesta en marcha de clases tiles para hacer efectos en la pgina. Artculo por Miguel Angel Alvarez
Ejemplo de programacin Mootools: Tip simple

Con todas las explicaciones vistas hasta ahora sobre Mootools estamos en condiciones de hacer ejemplos sencillos, pero con buenas funcionalidades, que hacen uso del framework Javascript, para realizar efectos e interfaces dinmicas sobre pginas web. En este caso vamos a explicar el proceso de construccin de un sistema para la presentacin de tips dinmicos, que hemos simplificado bastante para que sea ms fcil de entender. As que, si has seguido el Manual de Mootools que estamos publicando en DesarrolloWeb.com, debes poder entender el mecanismo que vamos a explicar en este artculo, que nos sirve como prctica de todo lo visto hasta ahora y de ayuda para afianzar nuestros conocimientos y conocer mejor las posibilidades de Mootools.
Qu son los Tip

Tip es una de esas palabras inglesas que ya tenemos incorporadas a nuestro lenguaje. Simplemente son unas pequeas ayudas contextuales, que suelen aparecer en los programas o pginas web para aclarar conceptos o funcionalidades de las aplicaciones. Suelen ser por medio de una informacin emergente que sale al situarse sobre un elemento. Pues eso es lo que vamos a hacer en este artculo, un sistema en Mootools para que podamos asignar fcilmente tips a los elementos de la pgina que nosotros queramos. El sistema lo haremos por medio de clases, de programacin orientada a objetos, para que se pueda utilizar en cualquier elemento de la pgina con tan solo instanciar un objeto. Podemos ver el ejemplo que vamos a realizar en este artculo en una pgina aparte, lo que nos podr dar una idea exacta de lo que es un tip y nuestros objetivos en esta prctica.
La clase Tip
Como decamos, vamos a crear una clase de programacin orientada a objetos que mantenga la infraestructura necesaria para la realizacin de tips de una manera sencilla. Esta clase debe prepararse para que realice todas las labores de creacin del tip y su visualizacin en el momento en que el usuario site el ratn sobre los elementos de la pgina a los que pongamos los tip. La clase es la siguiente. (La hemos comentado para que se pueda entender fcilmente)
var Tip = new Class({ //propiedad tip: null, //constructor initialize: function(enlace, texto){ //el enlace donde se debe mostrar el tip
54
this.enlace = $(enlace); //el texto que habr dentro del tip this.texto = texto; //definimos un evento cuando el ratn pasa sobre el enlace this.enlace.addEvent('mouseover', function(evento){ //la funcin que va a ejecutarse con el evento recibe un parmetro evento que es un objeto event de mootools //hago una comprobacin para saber si el tip no existe como objeto if (!$defined(this.tip)){ //si el tip no estaba definido //creo un elemento DIV donde voy a meter el tip this.tip = new Element("div", {"class": "clasetip"}); //aplico varias caractersticas al elemento HTML this.tip.set({ //el texto del elemento "html": this.texto, //modifico varios estilos css //utilizo las propiedades evento.client.y y evento.client.x para saber la posicin del ratn y mostrar el tip sobre esa posicin. "style": "top:" + (evento.client.y + 10) + "px; left:" + evento.client.x + "px;" }); //inyecto el tip en la pgina this.tip.inject(this.enlace, "after"); } }.bind(this)); //definimos un evento cuando el ratn sale del enlace this.enlace.addEvent('mouseout', function(evento){ //compruebo que el tip estaba definido if ($defined(this.tip)){ //si el tip estaba definido, lo voy a quitar de la pgina this.tip.destroy(); //adems coloco null en la variable tip para dejarlo no definido this.tip = null } }.bind(this)); } });
Es un pequeo pedazo de cdigo fcil de seguir por medio de los comentarios, aunque a veces Mootools resulta un poco crptico, sobretodo para las personas que no tienen mucha experiencia. Los elementos que tienes que identificar son los siguientes: La propiedad "tip", que contendr el objeto Element con la capa que se tiene que mostrar cuando se debe visualizar el tip. El constructor (funcin initialize), que recibe el identificador del elemento al que queremos colocarle un tip y el texto del tip. La creacin del evento 'mouseover', sobre el elemento al que se debe colocar el tip, que sirve para definir acciones cuando el usuario pone el ratn sobre el elemento. Si te fijas, 'mouseover', se define por medio de una funcin. Esa funcin opcionalmente puede recibir algunos parmetros. Uno es el evento que se est recibiendo, que tiene una serie de datos tiles que vamos a utilizar ms tarde en la funcin del evento, en concreto para situar el tip cerca de la posicin actual del ratn. As que con evento.client.y tengo la coordenada y de la situacin del ratn cuando se produjo el evento, y con evento.client.x tengo la coordenada x de la posicin del mismo. Dentro del evento utilizo la funcin del core de Mootools $defined sobre this.tip, para saber si se ha mostrado el tip en un momento dado en la pgina o si no. Porque si estuviera vindose el tip no tendra que volverlo a mostrar, o si se hubiera ocultado, no tendra que intentar volver a ocultarlo. Adems, en el cdigo nos hemos preocupado que this.tip sea null cuando el tip no
est visualizndose. Un detalle: al crear la capa del tip se le asigna una etiqueta div y una clase CSS llamada "clasetip", por medio de este cdigo: this.tip = new Element("div", {"class": "clasetip"}); Esto quiere decir que en algn lugar de la pgina debemos definir una declaracin de estilos para esa clase CSS, que podra ser como esto:
div.clasetip{ padding: 5px; background-color: #ededed; border: 1px solid #cccccc; position: absolute; font-size: 9pt; }
Localiza en el cdigo de la clase tambin el evento 'mouseout' que se ejecuta cuando el usuario retira el ratn sobre un elemento. En ese caso tenemos que destruir el tip y poner la variable this.tip a null, preparada para volver a mostrarse si se produce ms adelante un nuevo evento 'mouseover'. Configurar tips en elementos diversos de la pgina Para utilizar esta clase tan solo necesitamos crear elementos con HTML, los que deseemos que tengan un tip asociado. Por ejemplo:
<a id="enlacecontip" href="http://www.desarrolloweb.com">Enlace</a> <div id="estotambientienetip">Esta capa tambin tiene tip</div>
Luego tendremos que instanciar los tip asociados a estos elementos, con un cdigo como el siguiente: window.addEvent("domready", function(){ var enlaceTip = new Tip("enlacecontip", "Este es el texto del tip..."); var otroTip = new Tip("estotambientienetip", "Otro tip en marcha...."); }); Y con todo esto ya tenemos tips funcionando en cualquier elemento de la pgina donde los necesitemos. Todo el cdigo de este ejemplo de tips simples en Mootools Aqu dejamos el cdigo completo de esta prctica:
<html> <head> <title>tip en Mootools</title> <style type="text/css"> div.clasetip{ padding: 5px; background-color: #ededed; border: 1px solid #cccccc; position: absolute; font-size: 9pt; } </style> <script src="mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script> var Tip = new Class({ //propiedad tip: null,
56
//constructor initialize: function(enlace, texto){ //el enlace donde se debe mostrar el tip this.enlace = $(enlace); //el texto que habr dentro del tip this.texto = texto; //definimos un evento cuando el ratn pasa sobre el enlace this.enlace.addEvent('mouseover', function(evento){ //la funcin que va a ejecutarse con el evento recibe un parmetro evento que es un objeto event de mootools //hago una comprobacin para saber si el tip no existe como objeto if (!$defined(this.tip)){ //si el tip no estaba definido //creo un elemento DIV donde voy a meter el tip this.tip = new Element("div", {"class": "clasetip"}); //aplico varias caractersticas al elemento HTML this.tip.set({ //el texto del elemento "html": this.texto, //modifico varios estilos css //utilizo las propiedades evento.client.y y evento.client.x para saber la posicin del ratn y mostrar el tip sobre esa posicin. "style": "top:" + (evento.client.y + 10) + "px; left:" + evento.client.x + "px;" }); //inyecto el tip en la pgina this.tip.inject(this.enlace, "after"); } }.bind(this)); //definimos un evento cuando el ratn sale del enlace this.enlace.addEvent('mouseout', function(evento){ //compruebo que el tip estaba definido if ($defined(this.tip)){ //si el tip estaba definido, lo voy a quitar de la pgina this.tip.destroy(); //adems coloco null en la variable tip para dejarlo no definido this.tip = null } }.bind(this)); } }); </script> </head> <body> <a id="enlacecontip" href="http://www.desarrolloweb.com">Enlace</a> <script> window.addEvent("domready", function(){ var enlaceTip = new Tip("enlacecontip", "Este es el texto del tip... pulsa el enlace para ir a DesarrolloWeb.com"); }); </script> <br> <br> <br> <div id="estotambientienetip">Esta capa tambin tiene tip</div> <script> window.addEvent("domready", function(){ var otroTip = new Tip("estotambientienetip", "Por ver un poco las posibilidades del sistema, hemos creado otro elemento que tendr tip"); }); </script>
57
</body> </html>
Y tambin un enlace para ver ver el ejemplo en marcha.
Tips mejorados con un plugin Mootools

Un ltimo detalle. Se trata que este sistema de tip lo he creado de manera que sea sencillo para explicar y entender, pero la verdad es que se podra mejorar bastante el sistema para que fuera realmente potente. En este sentido queremos recomendar el estudio de un plugin que viene instalado con Mootools, que sirve para hacer tips de una manera mucho ms verstil y detallista. Por ahora dejamos el enlace a la documentacin de los tips de Mootools, aunque ms adelante sin duda nos pararemos a estudiar la implementacin de estos tips avanzados. Artculo por Miguel Angel Alvarez
Script sencillo con Mootools: fortaleza de una clave

Con lo que hemos visto hasta el momento en el Manual de Mootols publicado en DesarrolloWeb.com, estamos en condiciones de afrontar pequeos scripts que aaden diversos dimanismos en una pgina web. As que, con intencin de repasar los conocimientos adquiridos y afianzarlos por la prctica, estamos haciendo una serie de artculos con ejemplos de uso, simplificados en la medida de lo posible, para que los lectores puedan seguirlos y aprender de paso cmo incorporar Mootools a sus pginas web. En este sentido ya publicamos dos artculos prcticos, simples pero ilustrativos de las posibilidades que tenemos utilizando este framework Javascript: Texarea con cuenta de caracteres y Tip Simple. Ahora vamos a mostrar otro script sencillo para realizar un campo de clave (input de tipo password) que tiene un avisador de la fortaleza de la contrasea escrita. Este sistema, que hemos podido ver en algunas pginas y que queda muy bien, sirve para informar al usuario sobre lo dbil o fuerte que es la clave que ha escrito. Podemos ver el ejemplo que vamos a explicar en una pgina aparte. Como ya sabemos, cualquier ejemplo Mootools tiene una serie de componentes que hay que ver por separado.
Cdigo HTML
El cdigo HTML que necesitaremos para este ejemplo es muy sencillo. Simplemente ser un formulario que tiene un campo INPUT password, donde el usuario debe escribir la clave.
<form> Clave: <input type="password" id="clave" name="clave"> </form>
Hay que fijarse en el atributo id del INPUT, que es el nombre (id="clave") que nos va a servir para acceder al campo desde Mootools.
58
Cdigo CSS
Adems, hemos separado una serie de estilos CSS, que servirn para personalizar la apariencia del mensaje de fortaleza de la clave. Para que sea ms visual y vistoso, podr tener 3 colores distintos. Rojo cuando la clave es dbil, naranja cuando es medianamente segura y verde cuando es una clave con una fortaleza adecuada.
<style type="text/css"> .avisoclave{ margin-left:10px; font-size: 9pt; display: inline; } .clavefloja{ color: #990000; } .clavemedia{ color: #cc8800; } .clavefuerte{ color: #009900; } </style>
Como hemos podido ver, tenemos una clase llamada "avisoclave" que es general, con estilos generales para el mensaje de aviso de fortaleza de la clave, que valdrn en todos los casos. Luego tenemos 3 clases para cada uno de los posibles estados de fuerza o debilidad de la contrasea.
Clase Mootools para generar el aviso de fortaleza de la contrasea

Ahora viene la parte ms bonita, aunque la ms complicada de entender, que es en la que creamos el script Javascript con la clase Mootools que automatizar todo el proceso de visionado del estado de seguridad de la clave. Para ir imaginndola previamente, pensar que la clase Mootools debe contener: Un constructor, que inicialice el objeto que se encargar de mostrar la fortaleza. Este constructor debe situar en la pgina, al lado del campo INPUT password un contenedor para mostrar el mensaje de fuerza o debilidad de la clave. Adems, debe evaluarse por primera vez la clave para mostrar su fortaleza Adems, debe crearse un evento asociado al campo INPUT password para que, cuando el usuario escriba texto en ese campo password, cambie el mensaje que muestra la seguridad de la clave. Tambin tendremos un mtodo en la clase, que se encargar de evaluar lo que el usuario haya escrito en el campo password, para mostrar la fuerza o debilidad de la contrasea. Este mtodo debe recuperar el value del campo INPUT password. Luego, viendo lo que hay en ese INPUT, decidir el nivel de consistencia de la clave Segn el nivel de la clave, debe escribir lo que toque (clave dbil, media o fuerte) en el elemento que se haba generado para mostrar el mensaje de fortaleza de la clave. Adems, segn la fortaleza o debilidad, debe asignar las clases de CSS correspondientes, que se crearon para darle ms visibilidad al mensaje. Una vez que hemos entendido algo los requisitos de este sistema, vamos a ver el cdigo
59
fuente de esta clase Mootools.

var ValidadorClave = new Class({ //creo el constructor initialize: function(miCampoClave){ //obtengo el elemento del campo password this.campoClave = $(miCampoClave); //creo un elemento para mostrar al usuario la fuerza de la clave escrita this.mensajeFuerzaClave = new Element ("div" , {"class": "avisoclave"}); //llamo a un mtodo de esta clase para que muestre la fuerza de la clave this.muestraFuerzaClave(); //inyecto el elemento despus del campo clave this.mensajeFuerzaClave.inject(this.campoClave, "after"); //creo un evento para que, cuando se escriba algo en el campo password, se actualice la fuerza de la clave this.campoClave.addEvent("keyup", function(){ this.muestraFuerzaClave(); }.bind(this)); }, //mtodo para mostrar la fuerza de una clave muestraFuerzaClave: function(){ //recupero el texto escrito en el campo password claveActual = this.campoClave.value; //compruebo la fuerza, a travs de la longitud de la clave if (claveActual.length <= 4){ //escribo en el mensaje de fuerza que la clave es floja (dbil) this.mensajeFuerzaClave.set("html","Clave floja"); //si el mensaje de la fuerza tena la class de CSS "clavemedia", la quito if(this.mensajeFuerzaClave.hasClass("clavemedia")) this.mensajeFuerzaClave.removeClass("clavemedia"); //si el mensaje de la fuerza tena la class de CSS "clavefuerte", la quito if(this.mensajeFuerzaClave.hasClass("clavefuerte")) this.mensajeFuerzaClave.removeClass("clavefuerte"); //aado la class de CSS "clavefloja" para que el texto se muestre con ese estilo this.mensajeFuerzaClave.addClass("clavefloja"); }else{ if (claveActual.length <= 6){ this.mensajeFuerzaClave.set("html","Clave media"); if(this.mensajeFuerzaClave.hasClass("clavefloja")) this.mensajeFuerzaClave.removeClass("clavefloja"); if(this.mensajeFuerzaClave.hasClass("clavefuerte")) this.mensajeFuerzaClave.removeClass("clavefuerte"); this.mensajeFuerzaClave.addClass("clavemedia"); }else{ this.mensajeFuerzaClave.set("html","Clave fuerte"); if(this.mensajeFuerzaClave.hasClass("clavefloja")) this.mensajeFuerzaClave.removeClass("clavefloja"); if(this.mensajeFuerzaClave.hasClass("clavemedia")) this.mensajeFuerzaClave.removeClass("clavemedia"); this.mensajeFuerzaClave.addClass("clavefuerte"); } } } });
El cdigo se ha comentado, para que se pueda entender mejor qu se hace en cada paso. No obstante, no cabe duda que, para entenderlo, debes haber seguido en desarrollo web .com el Manual de programacin con Mootols , al menos los que tratan sobre la creacin de clases y mtodos, constructor, la clase Element y la creacin y manejo de eventos. Quizs no habamos visto todava los mtodos de Element addClass(), hasClass() y removeClass(), que sirven respectivamente para aadir una clase de CSS al elemento de la pgina que reciba ese mtodo, para saber si un elemento tena una clase determinada y para eliminar una class de CSS de un elemento.
Un detalle que cabe sealar es que en este script, para decidir si una clave es o no segura, simplemente miramos la longitud de la clave... pero realmente para saber si la clave es fuerte o dvil habra que ver tambin otras cosas, como si se han combinado maysculas y minsculas, si tiene nmeros y letras, o incluso otros caracteres como espacios, puntos, etc.
Instanciar el objeto para validar la seguridad de la clave

Por ltimo, mostramos el cdigo fuente en Javascript que tendramos que colocar para instanciar el objeto que evala la seguridad de la contrasea y lo asocia al campo INPUT password colocado en el cdigo HTML.
window.addEvent("domready", function(){ var miValidadorClave = new ValidadorClave("clave"); });
Esto hace que, cuando la pgina est lista para recibir instrucciones que van a alterar el DOM, se instancie un objeto de la clase ValidadorClave. Al constructor simplemente se le pasa el id que tiene el campo password que queremos asociar al verificador de la seguridad de la clave. Eso es todo! Esperamos que se haya podido entender... si no, simplemente te recomiendo repasar el manual de Mootools de DesarrolloWeb.com, porque realmente ya se ha explicado todo lo que tendras que saber para construir este sistema de verificacin de la fortaleza de una clave. 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. 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().
62
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.
65
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.
66
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!'); },
67
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>
68
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
69
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: http://www.desarrolloweb.com/manuales/manual-mootools.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 70
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.
73
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
74
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
75

Manual Mootools

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Mootools

Cargado por

Copyright:

Formatos disponibles

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

Devuelve "Array". $type puede devolver los siguientes valores:

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

aleatorio entre esos dos parmetros, incluyndolos. Por ejemplo:

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

document.write ("Ests en Mozilla/Gecko"); } if (window.opera){ 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

Artculo por Miguel Angel Alvarez

Instanciar y trabajar con objetos de clases creadas 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

detener: function(){ this.estado = "Detenido"; } });

Extends: Extendiendo clases 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

Ahora los mamferos se crearan as:

Como se puede ver, la clase guitarra est extendiendo la clase InstrumentoMusical.

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

//el objeto miPortatil queda inalterado alert(miPortatil.hd); //mostrar undefined

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

Seleccionar un elemento con getElement()

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

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