P. 1
Manual Mootools

Manual Mootools

|Views: 119|Likes:
Publicado porMauro Miguel Melo

More info:

Published by: Mauro Miguel Melo on Mar 27, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

03/27/2012

pdf

text

original

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 capítulos)

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 autorización.

1

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

Mootools
Después de trabajar durante unos meses con Mootools, ha llegado el momento de escribir algún artículo 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 páginas web. Lo primero sería decir que Mootools es un framework Javascript, que sirve para crear fácilmente código Javascript independiente del navegador, de una forma rápida y directa. Dicho de otra manera, que tal vez sea más fácil de entender, Mootools es un conjunto de librerías, también llamado API, que proveen clases de programación orientada a objetos en Javascript, para realizar una amplia gama de funcionalidades en páginas web, como trabajo con capas, efectos diversos, Ajax y mucho más. Con Mootools podemos programar todo tipo de scripts en el cliente rápidamente y sin preocuparnos de las distintas particularidades de cada navegador. Mootools está especialmente indicado para programar scripts complejos, que nos costaría mucho más trabajo de realizar si partiésemos de cero. Existen diversos framework en Javascript, la mayoría ni he probado todavía. Podemos ver unos cuantos de ellos en el artículo Listado de distintos Framework Javascript. Mootools es una opción 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 módulos y podemos seleccionar los que vamos a utilizar para incorporarlos en nuestras páginas 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 ejecución. 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 páginas web, como calendarios, editores de texto, etc.

• •

Pero también hay cosas que no me han gustado tanto, como la documentación, que resulta un poco escasa. Realmente tiene una buena documentación, pero la encuentro un poco escueta y falta de explicaciones o ejemplos. También he de decir que me resultó bastante difícil 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 cómo estaban trabajando. No obstante, después 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 introducción hay que decir que Mootools es gratuito y de código abierto, con licencia MIT, que permite usarlo y modificarlo en cualquier caso de uso. En los artículos siguientes voy a ilustrar el uso de Mootools, con el la versión framework 1.11, que es la que estaba en producción en el momento de escribir este texto. Dejo la URL de Mootools para consultas y descargas del Framework. http://mootools.net Artículo 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 autorización. 2

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

Descarga de Mootools
La descarga de Mootools es sencilla, pero incorpora varias opciones que podemos resumir en este artículo. Tenemos dos cosas que elegir cuando hacemos el download de las librerías: Módulos que queremos descargar: El código de Mootools está repartido en varios módulos o librerías, pero nuestras páginas web puede que no realicen todas las acciones que permiten los distintos módulos. Es decir, puede que descarguemos sólo Mootools para realizar efectos con capas, o para invocar fácilmente procesos Ajax. Así que, en la hora de descargar el framework, podemos elegir qué módulos traernos y así liberar a los usuarios que visitan nuestras webs de tiempo de descarga de las librerías y tiempo de interpretación por parte del navgador. Los módulos tienen algunas dependencias unos con otros. Pero la herramienta para descarga es "inteligente" y si seleccionamos un módulo que necesita de otro, lo marca automáticamente para la descarga en el paquete que necesitamos. El módulo Core es necesario para cualquier paquete de librerías Mootools, por lo que siempre se debe descargar y aparece marcado desde el principio. Luego, si por ejemplo marcamos las librerías Element.Event, se marcarán adicionalmente otra serie de librerías que son necesarias para que esta funcione, como Class, Array, Element, etc. Tipo de compresión de la descarga: Además también tenemos que seleccionar el tipo de compresión. Esto es para hacer la descarga de un archivo con las librerías con unas características específicas que lo hacen pesar más o menos. Todos los archivos son de texto, con el código listo para incluir en nuestras páginas, pero en unos están los comentarios al código, otros no tienen saltos de línea o espacios, en otros incluso de han cambiado los nombres de variables internas por otros más cortos, etc. Lo que está claro que cuanta mayor compresión, menos ocupará el archivo y menor será por tanto el tiempo de descarga en nuestra web. Pero cuando estamos desarrollando igual nos conviene una versión con todo el código y la documentación en el propio archivo, para que podamos guiarnos con ella para depurar cualquier fallo. En esta serie de artículos he utilizado la versión 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 librería 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

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 autorización.

3

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

20kb No obstante, hay que remarcar que para nuestros proyectos será mejor descargar Mootools en las versiones más actuales, que vendrá más completo y con mayor depuración del código. Además, desde la propia página de descargas podremos seleccionar los módulos que realmente vamos a necesitar en nuestras aplicaciones. Artículo por Miguel Angel Alvarez

Primer ejemplo con Mootools
Como había dicho en la introducción de este manual, Mootools puede resultar difícil 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 código Javascript compatible con todos los navegadores más 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 páginas 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 sección de Javascipt a fondo. Además, para quien no sepa qué es Mootools y donde descargarlo, será necesario que comience por el principio del manual sobre Mootools. En este ejemplo sólo tenemos que conocer unas cuantas cosas de Mootools. Para empezar, hay que incluir el código Javascript de las librerías de Mootools, esto se hace incluyendo el archivo externo de código Javascript con las librerías del framework, que hemos descargado de la página de Mootools.
<script src="mootools -1.11.js" type="text/javascript"></script>

La función $() En Mootols utilizamos la function $() para recibir un objeto con un elemento de la página. $() recibe como parámetro el identificador del elemento, que se ha indicado con el atributo id de la etiqueta HTML de lo que queremos recibir. Las librerías de Element.js, dentro del paquete llamado NATIVE, contienen varios métodos que podemos invocar sobre los objetos element, para realizar cosas con ellos, analizarlos o alterar su estado. Nosotros vamos a utilizar dos métodos de Element: Método 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.

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 autorización.

4

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

Método setStyle() Para alterar cualquier estilo CSS del elemento. Recibe dos parámetros, 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 código del ejemplo es el siguiente:
<html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"> <title>ejemplo básico 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="Tamaño 200px" onclick="$('texto_presentacion').setStyle('width', '200px');"> value="Pon borde" onclick="$('texto_presentacion').setStyle('border', '1px solid #ff0000');"> value="Tamaño 50%" onclick="$('texto_presentacion').setStyle('width', '50%');">

Veremos que hemos incluido las librerías Mootools en el head de la página, con un archivo externo Javascript, cargado con la etiqueta <script> . También 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 código Javascript que se ejecuta cuando el usuario hace clic sobre el botón. La primera serie de botones alteran la opacidad del elemento.
$('texto_presentacion').setOpacity(0);

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 autorización.

5

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

Con $('texto_presentacion') recibimos un objeto que es el elemento que tenía el id="texto_presentacion". Luego sobre ese objeto invocamos el método setOpacity() pasando por parámetro 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 sólido 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, más o menos complejas, en la página 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 código cross-browser, compatible con todos los navegadores, con un trabajo casi nulo. Dejo de nuevo el enlace para ver el ejemplo en marcha. Artículo 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 sería muy complejo de hacer sin la ayuda del framework como Mootools. Nosotros lo vamos a hacer con una simple ejecución de una sentencia Javascript. Lo primero aclarar que este artículo ya da por entendidos algunos conceptos que hemos visto en el manual de Mootools, por lo que será necesario leer los anteriores capítulos. Ahora voy a poner el enlace al ejemplo en marcha para que podamos verlo en funcionamiento antes de pasar a visualizar el código. El presente ejemplo utiliza el módulo llamado Element.Dimensions.js, que tiene dos métodos que nos van a servir para hacer el desplazamiento: Método scrollTo() Sirve para desplazar un elemento a una nueva posición. Recibe dos parámetros, las
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 autorización. 6

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

coordenadas X e Y a las que queremos desplazar el scroll del elemento. Método getSize() Sirve para obtener las dimensiones de un elemento, así como la posición 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 tamaño 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 devolvería los píxel que se haya desplazado el elemento mielemento en la horizontal. Nos devolvería el desplazamiento vertical que se haya realizado sobre el elemento mielemento. El código 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 rápidamente con Mootools. <br> La verdad es que este framework de javscript funciona muy bien y permite un desarrollo sorprendentemente rápido. <br> En pocos pasos y con absolutamente ningún conocimiento del Framework he conseguido hacer esta página. Me he ayudado de la documentación y de unos ejemplos que he encontrado en la página: http://clientside.cnet.com/wiki/mootorial/ <br> Ahora tendría 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 página 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 tamaño definido, que no permita ver el contenido completo del texto, y unas barras de desplazamiento para hacer el scroll. A continuación hay un script que crea una variable global a la página que contiene la capa que

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 autorización.

7

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

queremos desplazar.
<script> capa_desplazar = $('texto_scroll'); </script>

Luego hay un par de enlaces que son los que, pulsándolos, desplazará automáticamente 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 habíamos creado antes, capa_desplazar, se tiene que ejecutar el método scrollTo(). Este método recibe como primer parámetro 0, porque no queremos desplazarlo horizontalmente. Luego como desplazamiento vertical ponemos el desplazamiento vertical del elemento + 20 píxel. El desplazamiento vertical actual del elemento lo sacamos con capa_desplazar.getSize().scroll.y, tal como habíamos explicado antes en este artículo. El enlace de para desplazar el scroll hacia arriba sería 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 píxel. Espero que se haya entendido el ejemplo. Podemos ir a la documentación de Mootools, del módulo Element.Dimensions.js para obtener la descripción completa de los métodos 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 más práctico. Pero el objetivo no es sino expresar por medio de un código 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 más habituales. Artículo por Miguel Angel Alvarez

Componentes Mootools
Mootools, aparte de ofrecer un nutrido grupo de librerías para realizar efectos interesantes en Javascript, tiene una gentil comunidad de desarrolladores que crean componentes que se pueden utilizar en las páginas web que estemos realizando. Así que podemos beneficiarnos del esfuerzo de desarrollo de otras personas para realizar páginas con efectos impactantes rápidamente.
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 autorización. 8

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

No vamos por ahora a explicar cómo poner en marcha estos componentes, sólo a comentarlos por encima y mostrar ejemplos. Tenemos una sección 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 pestañas Si queremos utilizar en una página web una interfaz de pestañas, se ofrece un componente muy interesante en: MooTabs. Este componente permite diversos tipos de pestañas con variados efectos y transiciones e incluso la obtención por Ajax de los contenidos de las diversas pestañas. La instalación y configuración de las pestañas 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 versión 1.1 no funciona. Popup DHTML Slimbox Con este componente podemos mostrar imágenes cuando un usuario hace un clic en una miniatura. Las imágenes se muestran con una especie de ventana emergente dinámica, que se ajusta a las dimensiones de la imagen. Además, el fondo se queda como grisaceo, en segundo plano. Podemos conocer más del componente y verlo en marcha en su propia página web: http://www.digitalia.be/software/slimbox Pase de diapositivas Hay varios componentes de pase de diapositivas o efectos visuales sobre imágenes que van cambiando. Tal vez el más impactante y con mayores opciones de configuración sea el SmoothGallery. El componente es tan espectacular como lo podría ser una animación en Flash, con la particularidad que sólo utiliza Javascript para su puesta en marcha (y HTML con CSS, por supuesto). Podemos ver la página 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 tendríamos un campo fecha que al pulsarlo se mostraría un calendario del mes y año actuales. Podemos movernos por el calendario cambiando el mes y el año y luego pulsando cualquier día del calendario se seleccionaría esa fecha determinada. Uno de los calendarios más atractivos visualmente que he visto es el que ofrecen en esta
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 autorización. 9

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

dirección: http://www.electricprism.com/aeron/calendar/ Conclusión Como se puede ver, las interfaces y funcionalidades que se pueden hacer con Mootools son tantas como la imaginación 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, están compuestos de varios archivos con distintos códigos que tenemos que saber incluir y utilizar en nuestras páginas. Algunos problemas que he encontrado yo: • • • • A veces existen problemas de versiones, porque los componentes utilizaban una versión distinta de Mootools que la que estamos utilizando nosotros Algunas veces la documentación es escasa. Si da un problema en un navegador es casi imposible revisar el código para tratar de arreglarlo. Una simple declaración 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 más rápidamente cualquier eventualidad, aunque por ahora este artículo simplemente quería mostrar un poco las cosas avanzadas que se pueden realizar con Mootools. Una vez más recuerdo que en la sección de Scripts Mootools de DesarrolloWeb.com iremos publicando los componentes útiles que encontremos con Mootools. Artículo 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 método 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 página tiene un código HTML y además una serie de elementos externos, que se cargan aparte del propio código de la página. Si nuestra página es larga y contiene diversas imágenes, 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 inicialización de esos componentes, para insertarlos en la página, posicionarlos, etc. Por ejemplo, podríamos desear ejecutar acciones Javascript para realizar una carga de datos por Ajax o para generar contenidos dinámicos en la página, insertando elementos como una barra de navegación generada
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 autorización. 10

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

automáticamente, un calendario o lo que podamos necesitar. Todos estos componentes que se deben insertar dinámicamente en una página, en teoría, deben ser incluidos cuando el navegador está preparado para recibirlos. Esto es, cuando el DOM (la jerarquía de objetos del navegador a disposición de Javascript para alterar los elementos de la página) 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 página. Pero este evento se ejecuta cuando TODOS los elementos de la página han terminado de cargarse, es decir, la propia página y todo lo que tenga, como imágenes, banners y otro tipo de recursos externos. Así que, si nuestra página tiene, por ejemplo, muchas imágenes muy pesadas, puede que onload tarde demasiado en ejecutarse y hasta entonces no se mostrarían los elementos que se desean insertar dinámicamente. Pero mucho antes que finalice esa carga de elementos externos, la página podría haber estado lista para ejecutar acciones Javascript que alteren el DOM. En concreto, cuando una página termina de cargarse y procesarse, aunque se continúen descargando imágenes o elementos externos, el DOM estará listo para realiza acciones. Cómo 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 página 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 página, sobretodo si la página tiene imágenes 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 código podemos incluir todas las acciones que necesitemos para ejecutarlas sólo en el momento que el DOM esté listo.
Importante: El evento domready sólo se puede utilizar con el objeto window del navegador. Para vuestra referencia, la declaración del evento domready se encuentra dentro del paquete Utilities/DomReady.

Aquí puede verse un ejemplo de uso del evento domready de mootools. Artículo por Miguel Angel Alvarez

Core.js Mootools
Las librerías de Mootools están 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 núcleo de mootools.

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 autorización.

11

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

Esta librería contiene una serie de funciones sencillas, de propósito general, que se utilizan en todo el framework y que nosotros también podemos utilizar para crear aplicaciones Javascript. El core de mootools es requerido por todas las otras librerías 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 necesitaríamos explicar antes algo de programación orientada a objetos. No obstante, estas funciones nos van a servir para ir practicando con aspectos básicos de mootools, al alcance de cualquiera que conozca Javascript de antemano.
Referencias: Podemos aprender Javascript en nuestra sección Javascript a fondo. Además, dejamos el enlace del manual donde se engloba este artículo: programación con el framework mootools.

$defined Esta función sirve para saber si existe una variable o un objeto. La función devuelve true si el parámetro que se le pasa no es null o undefined. Veamos un par de ejemplos:
$defined(null);

Devolvería false.
mivariable = 1; $defined(mivariable);

Devolvería true. Podemos ver un ejemplo de funcionamiento de $define() en una página aparte. $type Esta función 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 número, un boleano, etc. Se le pasa por parámetro 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:

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 autorización.

12

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

'element' si el parámetro es un elemento DOM (objetos del navegador) 'textnode' si el parámetro es un nodo de texto del DOM 'whitespace' si el parámetro es un nodo de espacio en blanco del DOM 'arguments' si el parámetro es un objeto argumento 'object' si el parámetro es un objeto 'string' si el parámetro es una cadena de caracteres 'number'si el parámetro es un número 'boolean' si el parámetro es una variable boleana (true/false) 'function' si el parámetro es una función 'regexp' si el parámetro es una expresión regular 'class' si el parámetro es una clase (de programación orientada a objetos, creada como una nueva clase o extendiendo otra) 'collection' si el parámetro es una colección htmlelements 'array' si el parámetro es un array Para todos los demás casos, o si el parámetro es undefined o null, $type devuelve false (valor boleano) Podemos ver un ejemplo de funcionamiento de $type() en una página aparte. $chk Hace un chequeo de un parámetro 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 parámetro no exista. Esta función 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 ejecutaría el alert de "vale cero o...". Si por ejemplo mivariable hubiése sido null, diría que no existe el valor. En el siguiente artículo seguimos viendo funciones de core.js de mootools. Artículo por Miguel Angel Alvarez

Core.js de Mootools (parte II)
En el artículo anterior del manual de Mootools habíamos presentado las primeras explicaciones sobre las funciones de la librería core.js. Ahora vamos a seguir explicando algunas de las funciones que forman parte del core de mootools. $random Esta función sirve para obtener números aleatorios de una manera sencilla. Recibe dos parámetros, que son un valor mínimo y uno máximo, por ese orden, y devuelve un número
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 autorización. 13

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

aleatorio entre esos dos parámetros, incluyéndolos. Por ejemplo:
$random(3,7);

Devuelve un número aleatorio del 3 al 7. Podría ser 3, 4, 5, 6 ó 7. Por ejemplo este script imprimiría por pantalla 100 números 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 página aparte. $time Devuelve el timestamp actual. Un número entero con los milisegundos que han pasado desde 1970. Se llama sin pasar ningún parámetro.
$time()

Podemos ver este script en marcha en una página aparte. $clear Esta función 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á ningún resultado. Podemos verlo en marcha en una página aparte. Clase Window Además, las librerías core.js implementan unas nuevas propiedades en la clase Window de la jerarquía de objetos del navegador. Estas nuevas propiedades sirven para realizar detección del navegador que está ejecutando los scripts. Por ejemplo, si el navegador que está ejecutando la página 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 ("Estás en Internet Explorer"); } if (window.gecko){

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 autorización.

14

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

document.write ("Estás en Mozilla/Gecko"); } if (window.opera){ document.write ("Estás en Opera"); }

Podemos ver este script en marcha en una página aparte. Vamos a dejar para más adelante otras características del core.js de mootools, porque tenemos que explicar previamente algunos conceptos sobre programación orientada a objetos. También nos detendremos en la utilización de las librerías core.js en casos prácticos, como por ejemplo la detección del navegador, que es un punto interesante para detallar con calma. Artículo por Miguel Angel Alvarez

Clases en Mootools
Mootools es un framework Javascript para realizar programas o scripts con programación orientada a objetos. Provee una serie de utilidades para crear clases de una manera más elaborada que si programásemos sólo con Javascript. A la vez, Mootools dispone una sintaxis particular para la realización de clases, que permite escribir código más útil con menos líneas. 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 programación orientada a objetos. Para ello recomendamos leer la pequeña introducción a programación orientada a objetos que hemos publicado en DesarrolloWeb.com. Dentro de lo que es la programación orientada a objetos ese artículo sólo comenta una pequeña parte, pero aun así nos dará algunas ideas y aclaraciones que ayudarán a entender este manual. Lo cierto es que la programación orientada a objetos no es difícil, pero sí que puede ser delicado al menos al principio. Por supuesto, también 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 básica para crear clases de programación orientada a objetos en Mootools. Una clase se crea de esta manera:
var NombreClase = new Class({ //contenido de la clase (propiedades y métodos) });

Cualquier persona con un poco de experiencia en programación orientada a objetos verá que se crea como si instaciásemos 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
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 autorización. 15

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

métodos. Hay que fijarse también que el contenido de la clase se escribe entre paréntesis 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 separación entre cada una de las propiedades. Además, 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 detrás. Para que no de error de sintaxis estamos obligados a definir los valores de las propiedades. En último caso, si no deseamos asignar ningún valor a la propiedad, siempre podemos colocar null, como hemos hecho nosotros en la propiedad4. Definir métodos 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 método seguido de la función que va a contener el código del método. Utilizamos esta sintaxis para la definición de métodos:
var MiClaseMetodos = new Class ({ metodo1: function(){ alert ("estoy ejecutando el método"); }, metodo2: function(parametro){ alert ("estoy recibiendo un parámetro = " + parametro); } });

En el código anterior se ha creado una nueva clase llamada MiClaseMetodos, que tiene dos métodos: metodo1 y metodo2. Cada uno de los dos métodos es una función, cuyo código se ha definido también dentro de la declaración de la clase. Por una parte, metodo1 es una función que simplemente muestra un mensaje de alerta. Por otra parte, metodo2 es una función que recibe un parámetro y escribe un mensaje de alerta que muestra el valor de ese parámetro. Entre cada método, igual que ocurría entre cada propiedad, debemos colocar una coma.

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 autorización.

16

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

Artículo 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 declaración de una forma y el objeto es un caso o elemento concreto que responde a esa forma. En este artículo vamos a continuar y desarrollar un poco más los ejemplos que vimos en el artículo 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 paréntesis. Para la clase que habíamos declarado en el ejemplo de las propiedades, la clase MiClasePropiedades, podríamos crear instancias de esta de la siguiente manera:
miObjeto = new MiClasePropiedades();

Podemos crear infinitos objetos a partir de una clase, cada uno sería una instancia de la clase o un ejemplar de esa clase.
miSegundoObjeto = new MiClasePropiedades(); otroObjeto = new MiClasePropiedades();

Para la clase que habíamos definido en el ejemplo de los métodos, se crearían 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 métodos de objetos Podemos acceder a los métodos o mejor dicho, invocar a los métodos de los objetos a partir del nombre del objeto, el operador punto, el nombre del método que queremos ejecutar y los parétesis (como si llamásemos a una función). Para el ejemplo que vimos a la hora de explicar los métodos en Mootools, llamaríamos al primer método de la siguiente manera.

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 autorización.

17

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

miObjeto.metodo1();

Dentro de los paréntesis indicamos los parámetros que debe recibir el método, si es que el método se declaró para recibir parámetros.
miObjeto.metodo2("valor del parámetro");

Ejemplos de creación de clases con propiedades y métodos Ahora vamos a ver el código Javascript completo de los ejemplos que hemos utilizado para explicar tanto las propiedades y métodos. La clase que muestra la creación 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 creación y utilización de métodos con Mootools:
var MiClaseMetodos = new Class ({ metodo1: function(){ alert ("estoy ejecutando el método"); }, metodo2: function(parametro){ alert ("estoy recibiendo un parámetro = " + parametro); } }); miObjeto = new MiClaseMetodos(); miObjeto.metodo1(); miObjeto.metodo2("valor del parámetro");

Veamos en una página aparte este script en funcionamiento. Más adelante en este manual veremos casos más prácticos de clases y objetos, pero por ahora estas notas servirán para ir haciéndose una idea de cómo funciona todo el tema de programación orientada a objetos en Mootools. Artículo 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
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 autorización. 18

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

los métodos, pero todavía 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 método especial de declarase. En este artículo también veremos la creación de una clase completa, con funcionalidades que nos servirán para afianzar los conocimientos adquiridos. Qué es un constructor Un constructor en programación orientada a objetos se encarga de resumir la tarea de inicialización 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 parámetros que se podrán utilizar para inicializar el objeto. Declaración de un constructor en Mootools Un constructor de una clase Mootools se declara como si fuera un método corriente, pero con un nombre fijo: “initialize”. Dicho método será una función que puede recibir parámetros. Dentro de la función se podrán realizar diversas acciones, siendo lo más corriente la asignación 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. Habría que remarcar aquí la utilización de “this”, que en líneas generales sirve para referenciar al objeto sobre el que se está invocando el método. Como hemos dicho, un constructor se ejecuta cuando se está creando un objeto, durante el proceso de instanciación. 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 creación, tendrán 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 vehículo cualquiera. Tendrá dos propiedades: estado (“Detenido” o “En marcha”) y color, configurable por medido del constructor. Además crearemos dos métodos en la clase para poner en marcha o parar el vehículo.
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 autorización. 19

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

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 parámetro, que es el color del vehículo. El color recibido por parámetro 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 parámetro. Con esto vemos que, aparte de definir las propiedades de la clase a la hora de declarar sus componentes, también se pueden crear propiedades a medida que se ejecutan los métodos. Como el constructor siempre se ejecuta al crear el objeto, podemos estar seguros que todos los objetos creados tendrán la propiedad “color”, asignada al valor de color definido en el parámetro. Luego vemos dos métodos que simplemente actualizan la propiedad “estado”, para marcar si el vehículo está en marcha o detenido. Podríamos 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 aparecería “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 podríamos dar al objeto creado, para mostrar el estado, y para cambiarlo con los métodos 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 ejecución de esta clase vehículo y su uso en una página aparte. Artículo por Miguel Angel Alvarez

Extends: Extendiendo clases con Mootools
Una de las ventajas de la programación orientada a objetos es la creación de clases extendiendo las clases que ya tenemos. Por ese método podemos crear clases que heredan las propiedades y métodos (es decir, los atributos y funcionalidades) de otras clases. Todo esto tiene como ventaja que podremos reutilizar código y hacer cosas más complejas basándonos en trabajos realizados anteriormente, por nosotros o por otros programadores.
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 autorización. 20

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

En este artículo del manual de Mootools de DesarrolloWeb.com vamos a ver cómo extender clases, utilizando Extends. Qué es la extensión de clases Para comprender los mecanismos o las ventajas de la extensión de clases podemos verlo con un ejemplo típico. Por ejemplo, pensemos en los animales. Si tuviéramos que modelizar en programación orientada a objetos la clase animal, le asignaríamos unas propiedades y métodos cualesquiera que necesitásemos. Otro día podríamos querer definir la clase mamífero (es un animal que tiene unas características específicas). Entonces tendríamos la posibilidad de reescribir todo el comportamiento definido para los animales y añadirle todo el comportamiento o características de los mamíferos. Pero eso no sería totalmente óptimo, porque con ello estaríamos reescribiendo el mismo código que se había programado ya para los animales. Estaríamos haciendo el trabajo dos veces y eso es algo que la programación orientada a objetos trata de evitar. La programación orientada a objetos permite la herencia o extensión de clases que en estos casos nos viene como anillo al dedo. Debido a que un mamífero es un animal que tiene unas particularidades especiales, lo interesante es definir los mamíferos como una extensión de los animales. Es decir, hacer una clase mamífero que herede las propiedades y métodos de los animales. Con ello sólo tendríamos que definir los comportamientos y características propias de los mamíferos, apoyándonos en el trabajo realizado anteriormente para la modelización de los animales. Así mismo, si definiésemos la clase reptil, pues también podríamos ayudarnos extendiendo la clase animal. Es decir, modelizaríamos el reptil a partir del animal (extendiendo la clase animal) y añadiendo los métodos y propiedades de los reptiles. El esquema de herencia se puede llevar hasta donde sea necesario. Si algún día necesitamos definir la clase perro, pues podríamos hacerlo extendiendo la clase mamífero. O si definimos la clase Dogo Alemán podríamos hacerlo a través de extender la clase perro. Etc etc… Esto tiene varias ventajas. Una es la reutilización de código, como ya hemos dicho. Otra ventaja sería la encapsulación. 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 cómo funcionan los perros, ni como funcionan los mamíferos, ni los animales, porque todas esas clases fueron creadas como un paquete que se comprobó que funcionaba correctamente. Pero si algún día detectamos que una de nuestras clases funciona mal, o se le desea añadir una funcionalidad, simplemente tenemos que editarla y automáticamente 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 creación del código. Ahora que ya tenemos unas ideas básicas sobre la herencia, vamos a continar este artículo de desarrolloweb .com, con unas explicaciones para aprender a implementarla en Mootools. Extends en Mootools 1.2 La versión de Mootools 1.2 tiene una manera nueva de realizar la extensión de clases, es decir, clases que heredan propiedades y métodos 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:

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 autorización.

21

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

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 gestación... 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 atención 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 métodos y/o propiedades específicas de los mamíferos, 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 tenía su propio constructor, pero como los mamíferos son más complejos que los animales, tenemos que redefinir el constructor para realizar la inicialización completa de los mamíferos. En el constructor, no obstante, se puede aprovechar el constructor de la clase de la que se hereda. Es decir, en el constructor del mamífero podemos hacer uso del constructor del animal, para incializar las características de los animales. Para ello utilizamos esta línea de código: 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 código no tiene por qué ser escrita de nuevo.
this.parent(nombre);

Cabe decir que el mencionado parent se puede utilizar en cualquier método que se haya reescrito en la case que hereda. Por ejemplo, la clase "Mamifero" en este ejemplo refefine el método "tenerHijo" y dentro del código de este método, como se puede ver, también se hace uso de parent para llamar al método "tenerHijo" pero de la clase de la que hereda ("Animal"). Para utilizar esta clase "Mamifero" podríamos utilizar este código:
var miMamifero = new Mamifero("perro", "hembra", 9); miMamifero.tenerHijo();

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 autorización.

22

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

Este ejemplo se puede ver en marcha. Con esto ya sabemos extender clases en Mootools, pero para completar este artículo de desarrolloweb.com, vamos a presentar otro ejemplo de herencia, que nos va a venir bien para seguir aprendiendo sobre programación orientada a objetos. Cómo 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 versión 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 programación orientada a objetos. En Mootools existe la instrucción extend, que se aplica sobre clases para extender o generar una clase a partir de otra. Para la clase que comentábamos antes de los animales, podríamos tener:
var Animal = new Class({ //propiedades y métodos de los animales });

Ahora los mamíferos se crearían así:
var Mamifero = Animal.extend({ //propiedades y métodos de los mamíeros });

Después de este código, el mamífero sería la suma de las propiedades y métodos de los animales (esas propiedades y métodos estarían heredadas de los animales) y las propiedades y métodos propios de los mamíferos. Ejemplo completo de herencia o extensión 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. Haríamos 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, percusión, viento, etc) y lo introduce en una propiedad del objeto llamada tipo. Luego podríamos 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.

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 autorización.

23

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

A la clase guitarra le hemos incorporado un constructor que recibe un parámetro que es el número de cuerdas que va a tener la guitarra. En dicho constructor estamos haciendo una línea que cabría explicar:
this.parent("instrumento de cuerda");

Con esta línea estamos llamando al método initialize de la clase padre que se está extendiendo (el constructor de la clase InstrumentoMusical) pasándole "instrumento de cuerda" como parámetro. Luego las guitarras creadas tendrán como siempre tipo de instrumento el valor "instrumento de cuerda". Además hemos hecho un métido llamado sonar en la clase guitarra que hace que la guitarra suene. Posteriormente podríamos crear la clase batería, que es otro instrumento musical compuesto por varios elementos de percusión.
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 batería tiene sus propias particularidades, pero se basa en la clase InstrumentoMusical para funcionar. Igual que ocurría con la guitarra, extiende la clase InstrumentoMusical. Luego la batería tiene un método sonar, que hace ruido, pero este es diferente del de la guitarra. Para utilizar estas dos clases podríamos 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 página aparte. Artículo por Miguel Angel Alvarez

Otras formas de extender clases y objetos
En el artículo Extend: Extendiendo clases con Mootools explicamos qué es la extensión de clases, para crear clases nuevas, a partir de otras ya creadas, a las que se le añaden características y funcionalidades nuevas. En este caso vamos a seguir viendo modos de trabajo con Mootools a la hora de extender clases.

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 autorización.

24

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

Extender un objeto con las características y funcionalidades de otro Vamos a aprender a utilizar la función $extend() del core de Mootools, para extender un objeto con otro. Con $extend() indicamos como parámetros dos objetos y entonces conseguimos que el objeto del primer parámetro se extienda con las funcionalidades y propiedades del objeto del segundo parámetro. 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 Portátil. Ambos tienen propiedades y métodos, 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 métodos de miPortatil $extend(miOrdenador, miPortatil);

Con esto he conseguido que el objeto miOrdenador adquiera las propiedades y métodos de miPortatil. Después de este paso todas las propiedades y métodos de ambos objetos estarán presentes en miOrdenador y miPortatil quedará inalterado. Además la propiedad cpu de miOrdenador será igual al valor que había en el objeto miPortatil. Podríamos ejecutar estas líneas para comprobar los valores de los parámetros y la presencia de los distintos métodos.
//el campo CPU, repetido, toma el valor del objeto del segundo parámetro 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 método de miPortatil queda también en miOrdenador. miOrdenador.cargaBateria();

Como señalábamos, miPortatil no será alterado, eso lo podemos comprobar tratando de mostrar la propiedad hd, que no debería estar en ese objeto.

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 autorización.

25

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

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

Veamos el ejemplo en marcha en una página aparte. Extender una clase a través de un objeto Entre las posibilidades de extend y la extensión de clases en mootools, se pueden añadir propiedades y métodos de un objeto a una clase de mootools. Esto es un poco extraño, puesto que no se entiende muy bien para qué puede servir extender clases con objetos, ya que además son cosas distintas, pero el caso es que se puede y he decidido poner un ejemplo, por si en algún 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 métodos del objeto miPortatil.
var OrdenadorPortatil = Ordenador.extend(miPortatil);

Con ello tenemos la clase OrdenadorPortatil, que tiene las propiedades y métodos de la clase Ordenador, más los que había en el objeto miPortatil. Podemos probar ahora el funcionamiento de esta clase OrdenadorPortatil a partir de este código:
miOrdenador2 = new OrdenadorPortatil(); alert(miOrdenador2.cpu); alert(miOrdenador2.hd); alert(miOrdenador2.pantalla); miOrdenador2.procesar("algo");

Podemos ver el ejemplo en marcha en una página aparte. Artículo 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 método de Class, por tanto es un método 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, añadiendo nuevas propiedades o métodos. 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 añadirle un número 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 número de plazas, así como los métodos de ocupar y desocupar los asientos. Con implement no se crean nuevas clases, sino que se modifican. La clase coche habrá
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 autorización. 26

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

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 comparación con extend. Mientras que con extend lo que se creaban eran nuevas clases que extendían las anteriores, con implement lo que estamos es modificando esas mismas clases. Por si no ha quedado todavía claro, con extend creábamos nuevas clases "hijo" que heredaban propiedades y métodos 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 típico en el que nos puede servir de mucha ayuda el método implement. Imaginemos que tenemos la clase "Animal". Luego con extend hemos creado, a partir de la clase animal, las clases "Mamíferos" y "Anfibios". Ahora, extendiendo la clase "Mamíferos" 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 añadir una característica o funcionalidad específica a la clase "Animal", para que todos los animales de la jerarquía de herencia tengan esa nueva funcionalidad o característica. Podríamos extender la clase "animal" y crear un "AnimalExtendido", pero esto no modificaría las clases que heredan de "Animal", a no ser que modificásemos el código de todas las clases que dependen de "Animal" para hacer que, en vez de extender "Animal", extendiesen "AnimalExtendido". Esa solución, que sería poco atractiva, por tener que retocar el código de una serie de clases, se puede solucionar con implement. Con Implement podríamos modificar directamente la clase "Animal" y con ello conseguiríamos que cambiase esta y todas las clases que tenga por debajo en la jerarquía de herencia. Es decir, implementando esas nuevas funcionalidades o características a "Animal" estaríamos automáticamente incorporándolas a los "Mamíferos", "Anfibios", "Perros", "Ranas"… Veamos un ejemplo de Implement en un código Javascript con Mootools: Podemos tener una clase llamada "Casa", con un código 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'); }

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 autorización.

27

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

})

Esta clase "Casa" tiene una propiedad "abierta" que en principio vale "false". Además con el constructor initialize se crean dos nuevas propiedades que son el número de habitaciones y baños. Luego se han creado dos métodos uno para abrir() la casa y otro para cerrar() la misma. Ahora vamos a ver como se podría utilizar implement para añadir nuevas propiedades y métodos.
Casa.implement({ ocupantes: 0, ocupar: function(){ if (this.abierta){ if (this.ocupantes < this.num_habitaciones){ this.ocupantes++; alert("He ocupado una habitación"); }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 habitación libre"); }else{ alert("No hay ocupantes en la casa"); } }else{ alert("La casa está cerrada, no puedo salir"); } } });

Vemos que se ha añadido una propiedad llamada "ocupantes", que contiene el número de ocupantes de la casa, inicialmente siempre igual a cero. Luego se han añadido con implement dos métodos, ocupar() y desocupar(). El método ocupar primero comprueba si la casa está abierta y luego si queda espacio en las habitaciones. Si es así añade uno al número de ocupantes. El método desocupar() simplemente mira si la casa está abierta y si hay ocupantes y en ese caso resta uno a los ocupantes. Después del implement, la clase "Casa" simplemente tendrá esas nuevas propiedades y métodos, pero seguirá siendo la misma clase "Casa", simplemente modificada. Podríamos 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 autorización. 28

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

miCasa.desocupar(); miCasa.ocupar();

Podemos ver el ejemplo en marcha en una página aparte. Sólo señalar un pequeño detalle, que puede ser una tontería el comentar, pero para que quede claro. En extend podíamos utilizar parent() para hacer referencia a la clase padre que estábamos 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(). Artículo por Miguel Angel Alvarez

Función $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 todavía, aunque no tenía sentido explicarla sin haber explicado antes la creación de clases y objetos con Mootools. Esta función, $merge(), sirve para crear un objeto a partir de la fusión de otros objetos. Recibe varios parámetros, en número indeterminado, pero dos como mínimo, que deben ser objetos. $merge() devuelve un nuevo objeto, que es la combinación de todos esos objetos recibidos por parámetro. Además, deja los objetos iniciales (los enviados por parámetro) inalterados y sin referenciar en el nuevo objeto resultante de la fusión de objetos. Cómo funciona la fusión de $merge() Simplemente se crea un objeto totalmente nuevo, que tiene todas las propiedades y métodos de los objetos iniciales. Además, si una propiedad o método se repite en nombre, ocurre que el elemento del último objeto fusionado es el que prevalece. Veamos un primer ejemplo sencillo, de la fusión 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 ejecución de este código en una página 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 cómo queda dicho objeto "comida" y cómo los objetos iniciales han quedado inalterados.
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 autorización. 29

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

//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 código de este segundo ejemplo en una página aparte. Artículo por Miguel Angel Alvarez

Element en Mootools. Método $()
Mootools tiene un módulo llamado Element, que debemos conocer y dominar para poder trabajar con el framework y tener a mano cualquiera de los componentes de la página. En nuestro Manual de Mootools hemos visto una serie de artículos para aprender a manejar otros módulos 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 más complejos. Así que, aunque nos hayamos saltado algunos temas de la documentación de Mootools, vamos a empezar a explicar Element. Ya volveremos atrás más adelante para incluir explicaciones de otras partes de Mootools. Element es el módulo de Mootools que contiene la mayoría de funciones para alterar cosas de
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 autorización. 30

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

la página. La mayoría de los métodos de Element sirven para alterar propiedades de los elementos que visualizamos en nuestro navegador, como pueden ser atributos CSS, código HTML, inyectar código, obtener propiedades, construirlos o destruirlos, etc. La mayoría de los métodos de la clase Element son sencillos de entender, pero debemos comenzar por un par de métodos que pueden requerir algunas explicaciones adicionales, que sirven para seleccionar elementos de la página. Función dólar $() Esta función se ha incluido dentro de los métodos del objeto Window. Por ello, podremos acceder a ella directamente desde cualquier parte del código Javascript de la página. Con $() se efectúan un par de operaciones: 1. Obtener un objeto Element a partir de cualquier elemento de la página, pasando a $() el identificador del elemento que queramos recuperar. 2. En el caso que se esté viendo la página en Internet Explorer, $() realiza una segunda función, que consiste en aplicar al elemento seleccionado todos los métodos 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 página. No hay más!. Pero bueno, como está en la documentación de Mootools, hemos querido también mencionar que en el caso del navegador Internet Explorer, de manera transparente para nosotros, se aplican todos los métodos de Element a ese objeto al invocar a $(), porque hasta entonces no estarían disponibles. Otros navegadores como Firefox, Opera o Safari tienen disponibles desde el principio cualquiera de los métodos de Element (siempre que hayamos incluido el framework Mootools y el módulo Element) en cualquiera de los componentes de la página.

Veamos un ejemplo de uso del método $() Primero veamos un elemento cualquiera de una página 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 cómo 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 métodos de Element. Aun no hemos visto explicaciones sobre los distintos métodos, pero podemos mostrar un código 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 método setStyle() de la clase Element, podemos cambiar las propiedades CSS del elemento. Podemos ver el ejemplo en marcha en una página aparte. El método dólar también 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 código que parece un poco redundante, pero que tiene una razón de ser que explicaré luego:
mielemento = document.getElementById("mibloque"); mielemento = $(mielemento); mielemento.setStyle("font-size", "150%"); Con mielemento

= document.getElementById("mibloque")
31

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 autorización.

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

obtenemos una referencia al bloque DIV de antes, pero a través del método getElementById() del objeto document. Este método 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 línea de código anterior. Esto es necesario hacerlo, porque hasta que no hagamos la invocación al método $(), 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 código 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. Además, es una manera más rápida de hacer el document.getElementById(), que podemos conocer anteriormente de Javascript. Artículo por Miguel Angel Alvarez

Element en Mootools. Método $$()
En el capítulo anterior del Manual de Mootools vimos las primeras nociones sobre el módulo Element, que son muy interesantes para comenzar a tocar partes divertidas y útiles de Mootools. Ahora vamos a continuar con el método 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. Función doble dólar $$() Esta función forma parte del módulo Element, aunque se ha creado, igual que la función $() vista en el capítulo anterior, como un método de Window, por lo que se encuentra siempre disponible. Sirve para obtener referencias a un grupo variable de elementos de la página. Acepta una serie de posibles parámetros de entrada -que veremos luego- para especificar grupos de elementos y devuelve siempre un array con las referencias a los elementos, independientemente del número de elementos seleccionados. El método $$ se puede utilizar de esta manera:
elementos_parrafo = $$("p");

Esto selecciona todas las etiquetas P de la página y devuelve un array con las referencias a todos estos párrafos. En el código anterior guardamos el Array de Elements devuelto una variable que hemos llamado elementos_parrafo. Como decíamos, elementos_parrafo será un array de objetos Element, independientemente del número de párrafos que tuviese nuestra página. Ejemplo completo de uso de $$() Para entender esto, lo más fácil es ver un ejemplo de uso del método $$() para ver cómo funciona.
<p> Esto es un párrafo </p> <p> Esto es un segundo párrafo </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 autorización. 32

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

<p> Sigo con un tercer párrafo! </p> <script> elementos_parrafo = $$("p"); //alert($type(elementos_parrafo)); Nos mostraría 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 código HTML con tres párrafos. A continuación tenemos un script en Javascript que hace uso de Mootools para recoger esos párrafos y tratarlos. En nuestro ejemplo hacemos uso del método $$(“p”) para obtener un array con los objetos Element correspondientes a todos los párrafos. A continuación tenemos un bucle que recorre cada uno de los elementos del array y va cambiando el estilo de los mismos, en concreto el tamaño de la fuente. Entonces, para cada párrafo le coloca un tamaño de fuente mayor. Como se puede ver, con elementos_parrafo[i] estamos accediendo a cada una de las etiquetas HTML de párrafo. Podemos ver el ejemplo en marcha en una página aparte. Posibles parámetros de selección de elementos con $$() Los posibles parámetros 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 selección de elementos de la página:
elementos = $$("p","a");

Esto seleccionaría todos los párrafos de la página 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 líneas seleccionaríamos los elementos con identificadores “p1” y “p3”. En la primera línea creamos el array con los elementos, extraídos con document.getElementById(), y en la segunda línea 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 teníamos 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 $$, especificándolos como tres parámetros consecutivos. Ahora veamos un ejemplo con selectores. Tenemos este código HTML:
<div id="x">Este div es de identificador id=x</div>

Y luego este script:
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 autorización. 33

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

<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 código 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 código Javascript:
<script> elementos_titular = $$(".titular"); //alert($type(elementos_parrafo)); Nos mostraría 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 página 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 selección de elementos por selectores de clase CSS debemos tener el módulo Selectors cargado en Mootools. Artículo por Miguel Angel Alvarez

Construir elementos en la página con Mootools
Con el objetivo de continuar nuestro aprendizaje de Mootools, ahora vamos a ver cómo se podrían crear elementos dinámicamente en la página web. Este artículo se encaja en el Manual de Mootools, que estamos publicando en DesarrolloWeb.com. En capítulos anteriores ya comenzamos a explicar las características del módulo Element, que sirve para trabajar con los elementos de la página. Cuando nos referimos a los elementos de la página, abarcamos cualquier tipo de contenido de ésta. Por ejemplo, los párrafos son elementos, las imágenes o cualquier otra cosa que coloquemos con etiquetas HTML. Las listas, por ejemplo, también son elementos. La propia lista es un elemento (etiqueta UL u lo), pero también son elementos cada uno de los item de la lista (etiqueta LI). Así pues, podemos entender la página 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 dinámica. Esto incluye, modificar sus propiedades, crearlos, borrarlos, etc. Para

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 autorización.

34

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

trabajar con un elemento de la página tan solo tenemos que poder referirnos a él y para ello utilizábamos su identificador (atributo id). Para conseguir una instancia de la clase Element de un elemento de la página a partir de un identificador utilizábamos la función dólar, relatada en el artículo anterior. Así que después de esta introducción a lo que son los elementos de la página, vamos ya con los objetivos a cubrir en este artículo de desarrollo web.com. No son otros que crear elementos dinámicamente, como respuesta a ejecución de sentencias Javascript. En adelante veremos también cómo insertarlos en la página, 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 creación de un elemento nuevo, a la vez que nos ofrece herramientas para su inicialización. El constructor es muy sencillo y recibe dos parámetros, como podemos ver a continuación: miElemento = new Element(etiqueta, caracteristicas); Los parámetros del constructor son los siguientes: Etiqueta: es el nombre de una etiqueta HTML. Por ejemplo si ponemos “p” estaremos creando un elemento tipo párrafo, o si colocamos “img” estaremos creando un elemento o etiqueta imagen. Características: son una lista de características de la etiqueta o elemento que se está creando. Estas características son opcionales. Por ejemplo, podemos construir elementos de esta manera: Construyo un elemento párrafo, etiqueta P:
var nuevoElemento = new Element ("p");

Construyo un elemento enlace, etiqueta A, y aparte le doy una serie de características 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 ningún lugar de la página. Para incluirlo en la página tendremos que insertar el elemento, o inyectarlo, como prefiramos decirlo. Todo esto lo veremos en un par de ejemplos en el siguiente artículo. Artículo 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 autorización.

35

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

Ejemplo de construcción de un elemento e inyección en la página
En el artículo anterior de nuestro Manual de Mootools publicado en DesarrolloWeb.com vimos cómo trabajar con el constructor de Element. Ahora vamos a aprender a poner en práctica la construcción de elementos y la inserción de los mismos en algún lugar de la página. Esto lo veremos con un par de ejemplos. Para conocer mejor de antemano los objetivos del artículo podemos entrar a ver el resultado de los ejemplos en marcha. Veamos un primer ejemplo de construcción de un elemento con Mootools y la posterior inserción del mismo en la página:
//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 página nuevoElemento.inject($("micapa")); Nota: Para la realización de este sencillo ejemplo de uso del la clase Element de Mootools, hemos tenido que introducir otros dos métodos de Element, que aun no habíamos relatado en el manual de Mootools de desarrolloweb.com: el método set() y el método 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 métodos. Tener en cuenta también que hemos utilizado una de las funciones explicadas con anterioridad, la función dólar de Mootools $().

Con las anteriores líneas de código hemos hecho 3 cosas: Primero creamos un nuevo elemento, en este caso una etiqueta DIV. Luego he una llamada al método 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 página. Para ello tengo que utilizar el método inject() indicando como parámetro 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 tenía este HTML (fíjate que el div tiene un id=”micapa” para referirme a él):
<div id="micapa">Crear Elementos con Mootools</div>

Pues después de la ejecución de estas sentencias de creación e inyección del nuevo elemento, me quedará la página con el siguiente código HTML:
<div id="micapa"> Crear Elementos con Mootools <div>Este texto lo meto directamente desde Javascript</div> </div>

Como vemos, con el método inject() de la clase Element se inserta el objeto que recibe el método, dentro del objeto Element que se indica como parámetro. Aunque inject() puede insertar los elementos en otros lugares, como veremos en el siguiente ejemplo. Ahora vamos a mostrar un segundo ejemplo, un poco más elaborado. Se trata de insertar
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 autorización. 36

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

nuevos elementos a una lista que hay en la página. Es muy parecido al ejemplo anterior, con la salvedad que ahora vamos a utilizar algunas características 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 línea de código construyo un elemento LI (un elemento de lista). En este caso hemos utilizado el segundo parámetro del constructor de Element para especificar algunas características 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 línea se inyecta el elemento recién creado dentro de otro elemento con id=”lista”, pero en la parte de encima (por cambiar un poco, hemos utilizado un segundo parámetro del método inject() para decir “top”, con lo que conseguiremos que el elemento sea introducido arriba del todo de la lista). Si teníamos un código HTML como este:
<ul id="lista"> <li>Elemento de lista 1</li> <li>Otro elemento de lista</li> </ul>

Después de la ejecución de estas líneas de código 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 artículo de desarrollo web .com en el siguiente link: Ver el ejemplo en marcha. Artículo por Miguel Angel Alvarez

Seleccionar un elemento con getElement()
Seguimos con el Manual de Mootools de DesarrolloWeb.com. En artículos precedentes estuvimos brindando las nociones más básicas del módulo Element y vamos a continuar con ello. Debe haber quedado claro hasta el momento el uso de las funciones dólar $() y doble dólar $$ (), porque las vamos a utilizar constantemente en este manual. Si no es así, conviene repasar
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 autorización. 37

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

el uso de esas funciones en los artículos Método $() y Método $$(). Vimos que con esas funciones se podía acceder rápidamente a elementos de la página a través de sus identificadores (atributo id del elemento HTML). Ahora vamos a ver cómo acceder a elementos de la página que están 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 método getElement(), de cualquier objeto de la clase Element. El método getElement() pertenece a la clase Element, así pues, tenemos que invocarlo sobre una instancia de la clase Element, es decir, un elemento de la página. Los elementos podemos conseguirlos a través del método $(). $("id_de_un_elemento_cualquiera").getElement("div"); getElement() recibe como parámetro el nombre de una etiqueta HTML y devuelve el primer espécimen de esa etiqueta que haya dentro del elemento donde fue invocado getElement(). Esta explicación 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 terminarán de aclarar este asunto. Imaginemos que tenemos un código 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 párrafo. Pongo un <a href="#">enlace dentro del párrafo</a> </p> </div> <p>Pongo otro párrafo fuera del div</p> </body>

Como vemos tenemos un cuerpo de la página, englobado en la etiqueta BODY y dentro del mismo varios elementos o etiquetas HTML. Vamos ahora a trabajar con esta página, 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 función:

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 autorización.

38

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

function seleccionarParrafoEnDiv(){ miParrafo = $("capadiv").getElement("p"); miParrafo.set("html", "Meto otro texto en el párrafo"); }

Esto lo que hace es seleccionar el primer párrafo (etiqueta P) que hay dentro del elemento con id="capadiv". Podemos ver en el código HTML anterior que había una capa DIV con ese identificador:
<div id="capadiv>

Dentro contiene varias otras etiquetas, entre ellas un párrafo Así pues, seleccionamos ese primer párrafo con la sentencia:
miParrafo = $("capadiv").getElement("p");

Luego, con la siguiente línea alteramos alguna de las propiedades de ese párrafo. Vemos que para alterarlo utilizamos el método set() de Element, que recibe dos parámetros. El primero es lo que queremos alterar y el segundo es el nuevo contenido.
miParrafo.set("html", "Meto otro texto en el párrafo");

La ejecución de la línea anterior forzará a que el contenido del párrafo sea "Meto otro texto en el párrafo". Ahora veamos una segunda función que también 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 página. Luego con la siguiente línea cambiamos ese elemento UL para asignarle nuevos estilos CSS. El método set() de la clase Element, como hemos podido comprobar y tal como habíamos 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 página aparte. Artículo por Miguel Angel Alvarez

Seleccionar elementos de la página con getElements()
En el capítulo anterior del manual de Mootools vimos cómo podríamos seleccionar un elemento en concreto de la página. En este nuevo artículo de DesarrolloWeb.com veremos cómo seleccionar todos los elementos de una misma etiqueta, por ejemplo, todos los enlaces, todos los párrafos, etc. Para ello utilizaremos el método getElements() de la clase Element de

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 autorización.

39

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

Mootools. Antes de continuar con este artículo conviene haber leído el texto anterior, en el que comentamos la función 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 línea como la anterior seleccionaría todas las etiquetas de párrafo ("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 código HTML para seleccionar elementos dentro de él, que será el mismo que en el artículo anterior de este manual. Veamos este código:
function seleccionarLiEnDiv(){ todosLiEnDiv = $("capadiv").getElements("li"); todosLiEnDiv.each(alterarLi); }

Esta función, en la primera línea, 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 línea, estamos utilizando un método propio de Mootools llamado each(). Nos viene bien explicar con detalle este método each, porque todavía no lo habíamos utilizado ni explicado anteriormente en desarrollo web .com. each() forma parte del core de Mootools y también 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 función que se le pase por parámetro. Dicho de otra manera, para cada elemento del array todosLiEnDiv vamos a llamar a la función alterarLi, pasando como parámetro cada uno de los elementos del array. La función que se invoca con each para cada elemento del array recibe como parámetro el valor del elemento actual. Así pues, podemos ver cómo sería esa función alterarLi.
function alterarLi(elemento){ elemento.set("style", "margin: 15px; background-color: #999999"); }

Como vemos, recibe por parámetro el elemento actual y simplemente, se llama al ya conocido método 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 teníamos en el array que nos devolvió getElements(). Ahora veamos otra función interesante para ilustrar el funcionamiento de getElements().
function seleccionarEnlaces(){

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 autorización.

40

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

}

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 página. Con $ (document.body) tenemos una referencia al cuerpo de la página o etiqueta BODY. Siguiendo el ejemplo, tiene que quedar claro que en la variable todosEnlaces tenemos un array con todos los enlaces de la página. Ahora con todosEnlaces.each() hacemos llamadas a una función pasando cada uno de los elementos del array. En este caso, la propia función está expresada dentro del parámetro que recibe each. En esa función recibimos como parámetro cada uno de los elementos del array y dentro, simplemente, llamamos a otro método de la clase Element, appendText(), que sirve para añadir un texto al elemento. El resultado de ejecutar esta función será la alteración de texto de todos los enlaces de la página, agregando al final la cadena " click aquí". El ejemplo en funcionamiento se puede ver en una página aparte. (hemos combinado los ejemplos de este artículo y el anterior, para tener en un sólo código los usos de las funciones getElement() y getElements()) Artículo por Miguel Angel Alvarez

Más métodos de la clase Element de Mootools
En nuestro manual de Mootools hemos presentado ya unos cuantos capítulos sobre el trabajo con la clase Element de Mootols. Todos estos artículos explican las bases del tratamiento dinámico de cualquier elemento de la página web. Hemos visto varias maneras de seleccionar elementos de la página y alterar algunas de sus características principales. La clase Element es una de las más completas de Mootools, que contiene decenas de métodos para realizar acciones sobre el contenido de la página. La idea es seguir viendo métodos de Element, por lo menos algunos de los más útiles, para adquirir una soltura mayor con el framework. Como venimos haciendo en los artículos de desarrolloweb.com, acompañaremos las explicaciones con algunos ejemplos. Métodos getProperty() y setProperty() Estos dos métodos de Element nos sirven para obtener y modificar el valor de una propiedad de un elemento de la página. 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 método getProperty() vamos a extraer el valor de una de sus propiedades, en
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 autorización. 41

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

este caso el valor del atributo title.
$('mienlace').getProperty('title')

Esto nos devolverá el valor del atributo title. Si quisiéramos obtener el valor del atributo href haríamos 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. Métodos addClass() y removeClass() Otros de los métodos más interesantes de la clase Element son los que permiten añadir una clase a un elemento (una clase de estilos CSS -class-) y eliminarla. El método addClass() añade una clase de estilos CSS a un elemento, si es que no la tuviera ya. En el momento que se añade una clase se alteran los estilos del elemento para mostrar las nuevas características CSS que tenga esa clase nueva. Imaginemos que tenemos un elemento como este:
<div id=mielemento>Contenidos de un elemento al que voy a añadir y quitar clases de CSS (CSS class)</div>

Y una declaración 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, haríamos algo como esto:
$('mielemento').addClass('miclase');

Por su parte, el método 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 parámetro. Ahora, si queremos quitarle la clase miclase a ese elemento haríamos algo como esto:
$('mielemento').removeClass('miclase')

Podemos ver una página en marcha basada en este ejemplo. En el siguiente artículo vamos a continuar viendo otros métodos de la clase Element de Mootools.

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 autorización.

42

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

Artículo por Miguel Angel Alvarez

Más funcionalidades de Element
Continuamos con las explicaciones de la clase Element, enmarcadas en el Manual de Mootools que estamos publicando en DesarrolloWeb.com. A continuación vamos a ver otros métodos interesantes de la clase Element. Método empty() Este método sirve para eliminar los contenidos que haya dentro de un elemento de la página. 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 quisiéramos borrar todo lo que hay dentro del DIV haríamos esto:
$('mielemento').empty();

Esto no borrará la capa "mielemento" pero sí todo lo que había dentro. Podemos ver le ejemplo en funcionamiento en una página aparte. Método 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 además el propio elemento, debemos utilizar el método 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 página haríamos algo como esto:
$('mielemento').destroy();

Esto nos borrará todo el elemento, es decir, él mismo y todo lo que tuviera dentro. Podemos ver una página con el ejemplo en marcha. Método clone()
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 autorización. 43

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

Ahora vamos a ver un método de Element que permite clonar cualquier elemento que tengamos en la página. Este método 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 habíamos visto antes. Pero con esto no obtenemos ningún resultado, porque el elemento imagen simplemente está en una variable Javascript de la página y no se está visualizando en el navegador, a no ser que la inyectemos por algún lado.
clonada.inject($('miimagen'), 'after');

Con esto la hemos insertado dentro de la página, justo después de la imágen clonada previamente.
Nota: ya explicamos cómo inyectar elementos en la página en un artículo anterior publicado por desarrolloweb en este manual. Léase el artículo: inyección de un elemento en la página.

Podemos ver un ejemplo basado en este código para mostrar el funcionamiento del método clone(). Como hemos dicho en otras ocasiones, la clase Element es la más rica en funcionalidades de Mootools y aun quedan muchas cosas que habría que conocer. Sin embargo, para ir avanzando el manual de Mootools de desarrollo web .com y por el momento, este artículo 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 aplicarán conocimientos que hemos relatado sobre Element, y también cosas nuevas que nos hemos dejado en el tintero. Artículo 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 dinámicos 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 cómo se realizan eventos, pero aun no hemos ofrecido explicaciones detalladas sobre cómo crearlos. Ha llegado el momento de ponernos en la tarea de conocer los eventos, para crearlos y empezar a hacer scripts más 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 página.

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 autorización.

44

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

Para ello, los elementos de la página, que se modelizan a través de la clase Element, tienen un método llamado addEvent(), que recibe el tipo de evento y la función que debe ejecutarse como respuesta al mismo. Lo veremos con detalle en este artículo.
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 página. Si no sabemos qué son los eventos y cuáles tenemos disponibles, recomendamos la lectura de nuestros manuales de Javascript, concretamente los artículos del manual de Javascript II que tratan sobre eventos: Eventos en Javascript y los artículos siguientes del manual.

Definir un evento sobre un elemento de la página
Suponemos que tenemos un elemento cualquiera de la página, al que queremos asignar un evento.
<div id="mielemento">Este elemento</div>

Ahora, con Javascript podemos definir el siguiente código para asignar un evento a este elemento:
$("mielemento").addEvent('click', function() { alert('Has pulsado "mielemento"...'); });

Como se puede ver, se accede al elemento a través de la función dólar ($). Luego sobre ese elemento se invoca el método addEvent, al que le pasamos dos parámetros. '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 función que se debe invocar para realizar la ejecución de acciones relacionadas con la puesta en marcha del evento. Esta serie de funciones se pueden definir a continuación en el mismo código, abriendo las llaves de la función y luego colocando todas las sentencias a ejecutar cuando se ejecute el evento. Podemos ver el ejemplo en marcha en una página donde tenemos todos los ejemplos sobre eventos que vamos a ver en este artículo.
Nota: También debemos decir que lo correcto es añadir el evento (es decir, llamar al método addEvent) cuando se ha cargado ya el DOM de la página y está listo para recibir acciones. Así que lo correcto es utilizar el evento domready de window, como se puede ver en este código. window.addEvent('domready', function() { $("mielemento").addEvent('click', function() { alert('Has pulsado "mielemento"...'); }); });

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 autorización.

45

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

Otro ejemplo de creación de eventos en Mootools
Para que se pueda entender mejor este sistema para la definición de eventos de usuario en Mootools, vamos a poner otro código para la ejecución de otro evento sobre otro tipo de elemento de la página. 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 selección 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 cómo 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 código funcionando en este enlace. Ya hemos podido comenzar a crear eventos con Mootools, con addEvent(), ahora vamos a pasar a utilizar una función realmente útil en Mootools, bind(), pero lo explicaremos en el siguiente artículo. Artículo por Miguel Angel Alvarez

Utilización de bind() en los eventos Mootools
Hay un metodo que se utiliza constantemente a la hora de definir eventos en Mootools. Se trata del método bind(), que pertenece a la librería Native - Function de Mootools. Para los que lleguen a este artículo del Manual de Mootools de DesarrolloWeb.com, decirles que deben leer antes el artículo anterior, en el que da una primera introducción a los eventos de Element.

Para qué sirve Bind() en funciones Mootools
Bind() es un método de funciones Mootools que permite cambiar el ámbito de la variable this cuando se invoca una función. Como sabemos 'this' es una variable que apunta al objeto que recibe una llamada a un método. Dicho de otra manera, this es una referencia al objeto sobre el que se está ejecutando un método. Los que dominen, aunque sea ligeramente, la programación 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
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 autorización. 46

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

objeto, se invoca a una función distinta, donde el ámbito de la variable this ya no existe. Así que en un evento no tendríamos acceso a la variable this, con lo que no podríamos acceder al objeto que ha recibido el evento. Con bind() en una función podemos definir el valor de la variable this dentro de esa función. Dicho valor, que se ha de cargar en this durante la ejecución de la función, se debe escribir en la propia declaración de la función.
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 función, la variable contenido_para_this se podrá acceder a través de la variable this.

Definición de un evento con bind
Ahora, por lo que respecta a eventos, como decía anteriormente en este texto publicado en desarrollo web .com, al codificarse en una función distinta, hay veces que tendremos que utilizar bind(), para decirle a la función 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 ratón 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 función, después de la llave de cierre, se ha colocado el método bind() pasando como parámetro una variable, $("mienlace"), que es una referencia al enlace que recibe este evento. Luego, en el código de la función, se puede apreciar cómo 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 declaración de estilo css para ponerle un color de fondo. Ahora vamos a ver un evento similar, para ejecutar acciones cuando se retira el ratón del enlace:
$("mienlace").addEvent('mouseout', function() { this.set("style", "background-color: transparent;"); }.bind($("mienlace")) );

Este ejemplo se puede ver en marcha en una página aparte. Así pues, hemos aprendido a utilizar la función 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 más ejemplos sobre bind() mucho más utiles y fundamentales, con lo que se podrá practicar sobre este asunto. Artículo 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 autorización.

47

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

Más sobre Eventos en Mootools. Método fireEvent
En nuestro Manual de Mootools hemos explicado ya algunas de las claves del trabajo con eventos. Pero todavía hay algunos detalles que se deben comentar y mostrar ejemplos de código para dominar el sistema de eventos. En general, ya vimos como asociar un evento a un elemento de la página y también cómo utilizar el método bind() para conseguir cambiar el ámbito de la variable this cuando se está codificando el comportamiento de un evento. Ahora veremos cómo podemos disparar un evento de un elemento de la página, automáticamente, sin necesidad que el usuario produzca el evento.

Método fireEvent de Element.Event
El método fireEvent() sirve para ejecutar un evento de un elemento, es decir, lanzar un evento que pertenece a un elemento de la página, sin que el usuario haya tenido que realizar nada con ese elemento. Este método se invoca sobre el elemento de la página del que se quiere ejecutar el evento (un botón o elemento de formulario, un enlace, una capa DIV o lo que sea) y recibe varios parámetros. • • Tipo de evento: el nombre del evento que se desea lanzar. Parámetros para el evento: uno o varios parámetros que se tienen que pasar a la función que ejecuta el evento. Si es más de un parámetro, se tienen que indicar en un array. Retardo: número de milisegundos que se tiene que ejecutar el evento.

Aquí tenemos el primer ejemplo de este artículo de DesarrolloWeb.com de los dos que vamos a ver sobre el método fireEvent, en el que vamos a tener un botón HTML. Luego crearemos un evento "click" para ese botón y lo invocaremos con fireEvent. Este sería el botón:
<input type="button" value="pulsar" id="miboton">

Ahora veamos el código 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 botón"); }); $("miboton").fireEvent("click"); });

Habría de verse que estamos obligados a utilizar addEvent del evento domready, para asegurarnos que este código se ejecuta cuando el DOM está listo. Luego se puede ver que con addEvent del evento click sobre el objeto $("miboton") (el elemento HTML botón, que tenía el id="miboton") generamos el correspondiente evento para cuando se haga clic en el botón.

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 autorización.

48

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

Luego, con $("miboton").fireEvent("click"); lanzamos el evento "click", que será como si el usuario hubiese hecho clic sobre el botón. Podemos ver el ejemplo en marcha en una página aparte.

Importante sobre fireEvent
El método 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, sólo podremos lanzar eventos que hayan sido creados o declarados a partir del método addEvent de Mootools y no eventos que se hayan declarado escribiéndolos con el correspondiente atributo HTML de evento (onclick, onmousedown, etc.) en la propia etiqueta del elemento . Cabe decir además 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 excepción del evento "domready", que realmente sólo 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 utilización de otros parámetros de fireEvent, a la vez que abrimos las puertas a la creación de eventos personalizados en nuestras aplicaciones Javascript. Como se había dicho antes, se pueden indicar otros atributos a fireEvent, uno es un parámetro que se le pasa a la función que se encarga de procesar el evento y el otro un retardo para la ejecución del evento. Además, en este segundo ejemplo vamos a crear un método personalizado, que no tiene nada que ver con cualquier evento de los que existen en Javascript. El evento lo hemos creado personalizado sólo por hacer una prueba y lo hemos llamado "desarrolloweb". Tememos un elemento de la página, en este caso un enlace:
<a href="http://www.desarrolloweb.com" id="mienlace">Volver a DesarrolloWeb.com</a>

Y ahora un código 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 función que procesa el evento tiene un parámetro 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 función",1000);

Como se puede ver, se ejecuta el evento personalizado "desarrolloweb", se le pasa un parámetro con una cadena de texto y se hace un retardo de 1 segundo (1000 milisegundos). El ejemplo se puede ver en marcha en una página aparte. Como se ha podido ver, con Mootools es fácil codificar eventos y lanzarlos (ponerlos en marcha) desde el propio código javascript, como si hubiera sido el propio usuario el que

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 autorización.

49

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

hubiese producido el evento con sus acciones sobre los elementos de la página. Artículo por Miguel Angel Alvarez

Ejemplo práctico 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 disposición de crear un primer ejemplo que explota muchas de las funcionalidades que estamos aprendiendo. Este ejemplo nos dará una visión más 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 construcción de un campo textarea que tenga al lado un texto donde se muestra el número de caracteres que tiene. Lo vamos a construir por medio de programación orientada a objetos, tal como se debe hacer en Mootools, con lo que podremos reutilizar el código fácilmente 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 página, cuya implementación no requiera duplicar código Javascript, y sin que interfieran entre si las cuentas de caracteres de los distintos textarea del documento. Podemos ver una página 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 páginas.

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 programación orientada a objetos, que implemente las funcionalidades con las que queremos dotar a nuestra página. Esa clase podremos instanciarla para crear objetos Mootools que se encarguen de automatizar los procesos dinámicos. Así podremos instanciar cualquier número de objetos para que realicen estas funcionalidades por si solos y podremos desentendernos de su complejidad y reutilizar el código donde lo deseemos. Las bases para hacer todo esto las hemos aprendido ya en este manual, así que no debería dar mucho problema entender el código y si no es así, simplemente sería releer los artículos en los que se habla de las clases de Mootools . La clase tiene un constructor, a la que tendremos que pasar los parámetros para personalizar el comportamiento de ese objeto y asociarlo con los elementos de la página con los que queramos que trabaje. A estas alturas deberíamos conocer también cómo crear un constructor de la clase. En el constructor inicializaremos todos los componentes de los objetos una vez sean creados.

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 autorización.

50

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

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 métodos que estimemos necesarios para implementar las funcionalidades de cuenta de caracteres. Así pues, vamos a mostrar ya el código 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 función dolar this.textarea = $(idTextarea); //creo un elemento SPAN para mostrar el contador this.campoContador = new Element ("span", {"class": "estilocontador"}); //inyecto el contador después 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 método de esta clase que cuenta caracteres this.cuentaCaracteres(); }.bind(this) ); //llamo al método que cuenta caracteres, para inicializar el contador this.cuentaCaracteres(); }, //creo un método para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el número de caracteres actual del textarea this.campoContador.set("html", "Número caracteres: " + this.textarea.value.length); } });

El código 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 artículo que habla sobre las clases.
//defino un constructor, que recibe el id del textarea initialize: function(idTextarea){

Ver el artículo que habla sobre constructores.
//recupero el elemento textarea con la función dolar this.textarea = $(idTextarea);

Ver el artículo sobre la función dólar.
//creo un elemento SPAN para mostrar el contador this.campoContador = new Element ("span", {"class": "estilocontador"}); //inyecto el contador después del textarea this.campoContador.inject(this.textarea, "after");

En estas líneas hemos creado un elemento de texto donde mostraremos la cuenta de caracteres. Luego lo hemos colocado en el código de la página después del textarea, con lo que aparecerá cerca, posicionado tal como lo indiquemos en el estilo CSS de la clase
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 autorización. 51

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

"estilocontador". Ver el artículo de construcción de elementos en la página. Ver el artículo de inyección de elementos en la página.
//creo un evento para el textarea, keyup, para cuando el usuario suelta la tecla this.textarea.addEvent("keyup", function(){ //simplemente llamo a un método 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 sólo en el momento de soltar la tecla). Para procesar el evento se crea una función que simplemente llama a otro método de la clase donde se realiza la cuenta de caracteres. Ver el artículo donde se habla de eventos. Ver el artículo donde se habla de la función bind()
//llamo al método que cuenta caracteres, para inicializar el contador this.cuentaCaracteres();

El constructor termina llamando al método cuentaCaracteres(), con lo que se inicializará el contador de caracteres, por si en el textarea ya hubiera algún texto escrito previamente.
//creo un método para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el número de caracteres actual del textarea this.campoContador.set("html", "Número caracteres: " + this.textarea.value.length); }

En este método se actualiza el campo de conteo, cambiando su propiedad HTML para mostrar la cuenta actual de caracteres. Ver artículo donde se explica el método set de un elemento de la página. Eso ha sido todo el código de la clase TextareaContador. Ahora sería bueno ver el código HTML que tendremos en la página para crear dos "textareas inteligentes":
<textarea id="textocontador"></textarea> <br> <br> <textarea id="otro" cols=50 rows=8>Este textarea tiene texto escrito...</textarea>

Sólo 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 código para instanciar los objetos TextareaContador, una vez que el DOM de la página está listo para recibir modificaciones dinámicas por Javascript.
//creo un evento para cuando está listo el DOM de la página 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 artículo sobre el evento "domready" del objeto window que utilizamos para hacer cosas cuando el DOM está listo. Ver también el artículo que habla sobre la instaciación y trabajo con objetos en Mootools

El código 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 autorización. 52

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

<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 función dolar this.textarea = $(idTextarea); //creo un elemento SPAN para mostrar el contador this.campoContador = new Element ("span", {"class": "estilocontador"}); //inyecto el contador después 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 método de esta clase que cuenta caracteres this.cuentaCaracteres(); }.bind(this) ); //llamo al método que cuenta caracteres, para inicializar el contador this.cuentaCaracteres(); }, //creo un método para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el número de caracteres actual del textarea this.campoContador.set("html", "Número caracteres: " + this.textarea.value.length); } }); //creo un evento para cuando está listo el DOM de la página 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 página aparte.

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 autorización.

53

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

Espero que con este ejercicio, asimilando los conocimientos que ya habíamos adquirido en el manual de Mootools, podamos entender el proceso completo de implementación y puesta en marcha de clases útiles para hacer efectos en la página. Artículo por Miguel Angel Alvarez

Ejemplo de programación 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 dinámicas sobre páginas web. En este caso vamos a explicar el proceso de construcción de un sistema para la presentación de tips dinámicos, que hemos simplificado bastante para que sea más fácil 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 artículo, que nos sirve como práctica 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 pequeñas ayudas contextuales, que suelen aparecer en los programas o páginas web para aclarar conceptos o funcionalidades de las aplicaciones. Suelen ser por medio de una información emergente que sale al situarse sobre un elemento. Pues eso es lo que vamos a hacer en este artículo, un sistema en Mootools para que podamos asignar fácilmente tips a los elementos de la página que nosotros queramos. El sistema lo haremos por medio de clases, de programación orientada a objetos, para que se pueda utilizar en cualquier elemento de la página con tan solo instanciar un objeto. Podemos ver el ejemplo que vamos a realizar en este artículo en una página aparte, lo que nos podrá dar una idea exacta de lo que es un tip y nuestros objetivos en esta práctica.

La clase Tip
Como decíamos, vamos a crear una clase de programación orientada a objetos que mantenga la infraestructura necesaria para la realización de tips de una manera sencilla. Esta clase debe prepararse para que realice todas las labores de creación del tip y su visualización en el momento en que el usuario sitúe el ratón sobre los elementos de la página a los que pongamos los tip. La clase es la siguiente. (La hemos comentado para que se pueda entender fácilmente)
var Tip = new Class({ //propiedad tip: null, //constructor initialize: function(enlace, texto){ //el enlace donde se debe mostrar el tip

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 autorización.

54

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

this.enlace = $(enlace); //el texto que habrá dentro del tip this.texto = texto; //definimos un evento cuando el ratón pasa sobre el enlace this.enlace.addEvent('mouseover', function(evento){ //la función que va a ejecutarse con el evento recibe un parámetro evento que es un objeto event de mootools //hago una comprobación 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 características 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 posición del ratón y mostrar el tip sobre esa posición. "style": "top:" + (evento.client.y + 10) + "px; left:" + evento.client.x + "px;" }); //inyecto el tip en la página this.tip.inject(this.enlace, "after"); } }.bind(this)); //definimos un evento cuando el ratón 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 página this.tip.destroy(); //además coloco null en la variable tip para dejarlo no definido this.tip = null } }.bind(this)); } });

Es un pequeño pedazo de código fácil de seguir por medio de los comentarios, aunque a veces Mootools resulta un poco críptico, 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 (función initialize), que recibe el identificador del elemento al que queremos colocarle un tip y el texto del tip. La creación del evento 'mouseover', sobre el elemento al que se debe colocar el tip, que sirve para definir acciones cuando el usuario pone el ratón sobre el elemento. Si te fijas, 'mouseover', se define por medio de una función. Esa función opcionalmente puede recibir algunos parámetros. Uno es el evento que se está recibiendo, que tiene una serie de datos útiles que vamos a utilizar más tarde en la función del evento, en concreto para situar el tip cerca de la posición actual del ratón. Así que con evento.client.y tengo la coordenada y de la situación del ratón cuando se produjo el evento, y con evento.client.x tengo la coordenada x de la posición del mismo. Dentro del evento utilizo la función del core de Mootools $defined sobre this.tip, para saber si se ha mostrado el tip en un momento dado en la página o si no. Porque si estuviera viéndose el tip no tendría que volverlo a mostrar, o si se hubiera ocultado, no tendría que intentar volver a ocultarlo. Además, en el código nos hemos preocupado que this.tip sea null cuando el tip no
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 autorización. 55

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

está visualizándose. Un detalle: al crear la capa del tip se le asigna una etiqueta div y una clase CSS llamada "clasetip", por medio de este código: this.tip = new Element("div", {"class": "clasetip"}); Esto quiere decir que en algún lugar de la página debemos definir una declaración de estilos para esa clase CSS, que podría ser como esto:
div.clasetip{ padding: 5px; background-color: #ededed; border: 1px solid #cccccc; position: absolute; font-size: 9pt; }

Localiza en el código de la clase también el evento 'mouseout' que se ejecuta cuando el usuario retira el ratón 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 más adelante un nuevo evento 'mouseover'. Configurar tips en elementos diversos de la página 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 también tiene tip</div>

Luego tendremos que instanciar los tip asociados a estos elementos, con un código 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 página donde los necesitemos. Todo el código de este ejemplo de tips simples en Mootools Aquí dejamos el código completo de esta práctica:
<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,

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 autorización.

56

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

//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 ratón pasa sobre el enlace this.enlace.addEvent('mouseover', function(evento){ //la función que va a ejecutarse con el evento recibe un parámetro evento que es un objeto event de mootools //hago una comprobación 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 características 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 posición del ratón y mostrar el tip sobre esa posición. "style": "top:" + (evento.client.y + 10) + "px; left:" + evento.client.x + "px;" }); //inyecto el tip en la página this.tip.inject(this.enlace, "after"); } }.bind(this)); //definimos un evento cuando el ratón 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 página this.tip.destroy(); //además 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 también 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>

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 autorización.

57

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

</body> </html>

Y también 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 podría 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 más versátil y detallista. Por ahora dejamos el enlace a la documentación de los tips de Mootools, aunque más adelante sin duda nos pararemos a estudiar la implementación de estos tips avanzados. Artículo 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 pequeños scripts que añaden diversos dimanismos en una página web. Así que, con intención de repasar los conocimientos adquiridos y afianzarlos por la práctica, estamos haciendo una serie de artículos con ejemplos de uso, simplificados en la medida de lo posible, para que los lectores puedan seguirlos y aprender de paso cómo incorporar Mootools a sus páginas web. En este sentido ya publicamos dos artículos prácticos, 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 contraseña escrita. Este sistema, que hemos podido ver en algunas páginas y que queda muy bien, sirve para informar al usuario sobre lo débil o fuerte que es la clave que ha escrito. Podemos ver el ejemplo que vamos a explicar en una página aparte. Como ya sabemos, cualquier ejemplo Mootools tiene una serie de componentes que hay que ver por separado.

Código HTML
El código 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.

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 autorización.

58

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

Código CSS
Además, hemos separado una serie de estilos CSS, que servirán para personalizar la apariencia del mensaje de fortaleza de la clave. Para que sea más visual y vistoso, podrá tener 3 colores distintos. Rojo cuando la clave es débil, 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 valdrán en todos los casos. Luego tenemos 3 clases para cada uno de los posibles estados de fuerza o debilidad de la contraseña.

Clase Mootools para generar el aviso de fortaleza de la contraseña
Ahora viene la parte más bonita, aunque la más 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 imaginándola 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 página, al lado del campo INPUT password un contenedor para mostrar el mensaje de fuerza o debilidad de la clave. Además, debe evaluarse por primera vez la clave para mostrar su fortaleza Además, 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. También tendremos un método 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 contraseña. Este método debe recuperar el value del campo INPUT password. Luego, viendo lo que hay en ese INPUT, decidir el nivel de consistencia de la clave Según el nivel de la clave, debe escribir lo que toque (clave débil, media o fuerte) en el elemento que se había generado para mostrar el mensaje de fortaleza de la clave. Además, según la fortaleza o debilidad, debe asignar las clases de CSS correspondientes, que se crearon para darle más visibilidad al mensaje. Una vez que hemos entendido algo los requisitos de este sistema, vamos a ver el código

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 autorización.

59

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

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 método de esta clase para que muestre la fuerza de la clave this.muestraFuerzaClave(); //inyecto el elemento después 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)); }, //método 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 través de la longitud de la clave if (claveActual.length <= 4){ //escribo en el mensaje de fuerza que la clave es floja (débil) this.mensajeFuerzaClave.set("html","Clave floja"); //si el mensaje de la fuerza tenía la class de CSS "clavemedia", la quito if(this.mensajeFuerzaClave.hasClass("clavemedia")) this.mensajeFuerzaClave.removeClass("clavemedia"); //si el mensaje de la fuerza tenía la class de CSS "clavefuerte", la quito if(this.mensajeFuerzaClave.hasClass("clavefuerte")) this.mensajeFuerzaClave.removeClass("clavefuerte"); //añado 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 código 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 programación con Mootols , al menos los que tratan sobre la creación de clases y métodos, constructor, la clase Element y la creación y manejo de eventos. Quizás no habíamos visto todavía los métodos de Element addClass(), hasClass() y removeClass(), que sirven respectivamente para añadir una clase de CSS al elemento de la página que recibía ese método, para saber si un elemento tenía una clase determinada y para eliminar una class de CSS de un elemento.
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 autorización. 60

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

Un detalle que cabe señalar 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 dévil habría que ver también otras cosas, como si se han combinado mayúsculas y minúsculas, si tiene números y letras, o incluso otros caracteres como espacios, puntos, etc.

Instanciar el objeto para validar la seguridad de la clave
Por último, mostramos el código fuente en Javascript que tendríamos que colocar para instanciar el objeto que evalúa la seguridad de la contraseña y lo asocia al campo INPUT password colocado en el código HTML.
window.addEvent("domready", function(){ var miValidadorClave = new ValidadorClave("clave"); });

Esto hace que, cuando la página 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 tendrías que saber para construir este sistema de verificación de la fortaleza de una clave. Artículo por Miguel Angel Alvarez

window.getSize en Mootools
Hacemos un pequeño inciso en el manual de Mootools para explicar un detalle que es importante para tratar con la función window.getSize(), que sirve para que el navegador nos devuelva varios valores, como las dimensiones de área disponible donde se muestran las páginas web o los distintos scrolls o desplazamientos realizados o posibles en la página completa. Conocer el área de trabajo disponible del navegador nos puede servir para estructurar los espacios disponibles para la maquetación o para mostrar elementos en posiciones específicas o con tamaños definidos, que variarían según la medida de la ventana del navegador y la configuración de elementos de la interfaz que tenga el usuario.
Atención: 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 definición de pantalla 800x600, que depende de la configuración del usuario), sino la parte donde se muestran las páginas, dentro de la ventana del navegador, después de quitar toda la interfaz de menús y botones del browser.

Obtener las dimensiones de Window en Mootools 1.1 ACTUALIZADO: Estas explicaciones que vienen a continuación son para Mootools versión 1.1. Resulta que en la versión 1.2 del framework ha cambiado un poco la función getSize(), creemos que a mejor. Explicaré al final del artículo cómo hacer esto mismo para Mootools 1.2. Para obtener los datos en Mootools de las dimensiones de la ventana del navegador hay una función, como decimos, llamada getSize(). Dicho método depende del objeto window, que está
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 autorización. 61

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

extendido por el framework Mootools en el archivo Window.Size.js. (mirar la documentación de Mootools) para saber acerca de Window.Size.js, aunque lo vamos a explicar algunas cosas en este artículo. Window.Size.js incorpora varios métodos al objeto window del navegador. El que nos interesa es window.getSize(), que devuelve lo mismo que el método 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 mostrarán las páginas. 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 tamaños en horizontal y vertical. Cada uno de esos tamaños significa: • • • Scroll: El desplazamiento que se ha hecho en la página, con las barras de desplazamiento horizontales y verticales respectivamente. Size: El tamaño del área útil de la ventana del navegador, destinado a mostrar la página web. scrollSize: El tamaño de la página completa, que puede ser o no mayor que el área disponible para mostrarla. Si es mayor quiere decir que para mostrar toda la página se tendrán que mover las barras de desplazamiento horizontales o verticales.

Para que quede claro, pongo una imagen esquemática sobre los valores de getSize().

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 autorización.

62

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

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 ("Tamaño 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 página aparte. Window.getSize() para mootools 1.2
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 autorización. 63

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

Actualizado (19/08/2008): Tal como hemos explicado en las anteriores líneas, con Mootools se ha implementado un método 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 método getSize(). Mootools tiene una serie de métodos, implementados en window y en la clase Element, que sirven para obtener dimensiones de elementos de la página o de la propia ventana del navegador. Ahora, para obtener el área disponible de espacio para la página, utilizamos window.getSize(). Para obtener el scroll realizado sobre la página tenemos el método window.getScroll() y para saber cuan grande es el área de la página (lo que se ve más la parte que queda fuera, pero que podemos ver haciendo scroll -desplazando con las barras de desplazamiento-), utilizamos window.getScrollSize(). Estos tres métodos tienen como respuesta un objeto que contiene dos propiedades x e y, con las coordenadas o tamaños 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 tamaño en pixels horizontal del área donde se muestra la página. //en dimension.y tenemos el tamaño en pixels del área en vertical.

Doctype adecuado para getSize() en Mootools Atención a este pequeño gran detalle: dependiendo de la declaración Doctype que hayamos puesto en la página la función 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 ningún problema, aunque seguramente funcione también 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 fácil encontrar la solución. Artículo por Miguel Angel Alvarez

API Panoramio + ejemplo de JSON con Mootools
En este artículo queremos presentar el API de Panoramio, por el que podemos obtener fotografías de lugares del mundo que los usuarios de Panoramio han enviado al servidor. Todas las fotos están localizadas geográficamente, por lo que se pueden utilizar para ilustrar páginas
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 autorización. 64

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

web de lugares del mundo o para añadir información gráfica 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 parámetros, que se envían por GET en la propia URL, con los que especificar las fotos que queremos obtener. Podemos especificar el lugar geográfico donde se deben buscar fotos, el tamaño 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 página del API, donde se explica en español la configuración de la URL para recibir las fotos: API de Panoramio Por ejemplo, para recibir 10 fotos de la ciudad de León, en España, de tamaño medio, ordenadas por popularidad, podríamos 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 configuración de la URL. Los datos recibidos están generados en JSON, una especificación de un lenguaje con una notación de objetos de Javascript. JSON permite escribir con código fuente, fácilmente 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 más información de JSON en español en la propia página de especificación de JSON. La complicación 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 página web. Para ello conviene dejarse ayudar por algún sistema que permita procesar los JSON de una manera cómoda. Existen diversos sistemas para procesar objetos JSON en diferentes lenguajes para desarrolladores del web, como Javascript, PHP, ASP, Action Script, etc. Incluso hay librerías que nos facilitan la tarea a unas pocas líneas de código. 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 código de objetos JSON y procesarlo, de modo que podamos utilizarlo en nuestros propios scripts Javascript. Todo el procesamiento del JSON lo basamos en un método 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 también puede servir de ejemplo de utilización de JSON en Mootools.

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 autorización.

65

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

Lo malo es que todo esto tiene cierta dificultad, que no voy a tratar en este artículo, por falta de tiempo. Pero espero que se pueda entender algo. Cabe decir que estamos publicando un manual de Mootools en DesarrolloWeb.com donde podréis aprender algo de Mootools con lo que entender un poco más todas estas cosas y donde esperamos en breve explicar temas avanzados que nos hagan dominar este ejemplo y perfeccionarlo más aún. En la página web he colocado una capa donde mostraré las fotos recibidas del API de Panoramio.
<div id="muestrafotos"></div>

Por ahora la capa está vacía, pero la llenaré una vez recibidas y procesadas las imágenes. Para ello utilizo este código:
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 decía, la complicación está en entender el Json.Remote, que espero poder explicarlo en un futuro próximo. 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 código, 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 ningún navegador. El problema es que Ajax da un "Permiso denegado" al intentar acceder a un archivo remoto. La solución pasaría por llamar a un archivo en local, publicado en nuestro propio servidor, que contenga el código 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 código JSON con los objetos de las fotos que he consultado en Panoramio y luego guardado con la opción guardar como del navegador. Con ello he obtenido el listado de las fotos y las he colocado en nuestro servidor para hacer pruebas.

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 autorización.

66

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

Lo malo de este sistema es que las fotos no se actualizan, sino que siempre son las mismas que obtuve el día que guardé el archivo get_panoramas.txt. La solución a esto podría ser obtener ese archivo por medio del servidor, con programación PHP y luego guardarlo en nuestro servidor antes de procesarlo con Mootools. O simplemente lo podría obtener con PHP y procesarlo directamente con este lenguaje en el servidor, que también tiene librerías de soporte a JSON. Espero que todos estos problemas no desanimen y sirvan para aprender. Intentaré más adelante dar nuevas claves o trucos para el trabajo con el API de Panoramio. Artículo 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 través de la realización de un sencillo ejemplo. El ejercicio consiste en crear un enlace que, al pulsarlo, realizará una conexión 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 artículo vamos a dar por sabidas muchas cosas de Mootools, pero esperamos que con unos mínimos conocimientos se pueda seguir el ejemplo. La versión 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 conexión Ajax tenemos que instanciar un objeto de la clase Request, que se crea indicando una serie de opciones y eventos, que nos servirán para configurar la conexión y especificar las acciones a realizar durante el proceso de ejecución de la conexión. 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. Código HTML Antes que nada, veamos el código HTML que necesitaríamos 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 conexión Ajax con Request de Mootools Ahora veamos qué se debería hacer para configurar una conexión 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!'); },

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 autorización.

67

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

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 conexión se envían una serie de opciones: method: Sirve para definir que el método de conexión. 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 conexión, que se ejecutará cuando se inicie la conexión con el archivo. La función escrita a continuación del onRequest contiene el código que de va a ejecutar al inicio de la conexión Ajax. En nuestro ejemplo es un simple alert() de Javascript. onSuccess: Esto sirve para especificar un evento, que se ejecutará en caso que la conexión se realice con éxito. A continuación se debe escribir el código de la función que se ejecutará al desatarse el evento, que tiene la particularidad de recibir dos parámetros. El primero es el código HTML del archivo traído por Ajax. El segundo contendrá la respuesta XML del Request. En nuestro ejemplo la función simplemente muestra en una caja de alert() de Javascript el contenido del código HTML. onFailure: Con este otro evento definimos qué hacer en el caso que la conexión con Ajax haya dado un error. También debemos fijarnos en el último .send(), que es un método que se llama sobre el objeto Request creado. Este método sirve para poner en marcha la conexión Ajax. Asociar esa conexión a un evento de clic en el enlace Hasta ahora tenemos un enlace HTML y una instaciación de un objeto de la clase Request. Pero tenemos que conectar estos dos elementos, para que al pulsar el enlace se cree la conexión. Para ello tenemos que añadir un evento al enlace y debemos realizarlo así en Mootools:
//función que se va a ejecutar cuando esté listo el dom window.addEvent('domready', function(){ //añado 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 conexión Ajax con Mootools completo El código 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>

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 autorización.

68

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

Request de Mootools, un envoltorio de XMLHttpRequest. <p> <a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a> <script> window.addEvent('domready', function(){ //función que se va a ejecutar cuando esté listo el dom //añado 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 página 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 páginas distintas. Una es la que tiene el código fuente del ejercicio y otra página que es la que se conecta por Ajax para mostrar sus contenidos. El archivo con el código 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 conexión realizada en el Request funcione. Ambos archivos deben estar en el mismo directorio. Además, para que funcione correctamente la conexión 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 página con código del ejemplo en un navegador, al intentar hacer la conexión http por Ajax, nos dará un error. Si abrimos directamente el archivo no se podrá realizar la conexión 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 publicación y accedemos a ellos a través 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 página. Artículo 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 autorización.

69

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

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 traídos por Ajax se muestren en la misma página, pero en el propio cuerpo de la página y no en una caja de alerta. El ejemplo es bien parecido, así que antes de leer esto, debemos haber leído el anterior taller de Ajax con Mootools. Como decía, la idea es realizar una conexión 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 página., sin recargarla, por supuesto. Así que, de la conexión que hacemos con el objeto de la clase Request, lo único que cambia es lo que va a pasar en caso que la conexión se realice con éxito (Evento onSuccess). Antes de continuar, si se desea, puede verse en ejemplo en marcha. Código HTML El HTML que necesitaremos para el ejemplo debe contener además 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 continuación es que tenemos un DIV llamado "cajaactualizacion", que es donde mostraremos el contenido del archivo. Código Javascript relativo al Ajax con Mootools El código es exactamente igual, pero se ha utilizado una función 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 decía, lo único que debemos entender, de manera adicional a lo que ya vimos en el ejemplo del artículo anterior, es esto:
$('cajaactualizacion').set('html',texto);

Simplemente se está haciendo una llamada a un método del elemento $('cajaactualizacion'), que es el DIV donde se iban a escribir los resultados de la conexión Ajax. A este $ ('cajaactualizacion') le pasamos el método set, pasando a su vez los parámetros "html", para decir que queremos cambiar el innerHTML de la capa, y luego la variable texto, que contiene el texto del archivo traído por Ajax. El código 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 autorización. 70

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

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(){ //función 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 página aparte. Atentos a las otras explicaciones y recomendaciones adicionales tratadas en el artículo anterior!, que hay cosas que no hemos comentado aquí por haberse dado por entendidas. Artículo por Miguel Angel Alvarez

Averiguar la posición del ratón al hacer clic
Un rápido ejemplo de uso de Mootools para saber la posición del ratón 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 posición del ratón Las cosas como las que queremos hacer en este artículo, averiguar la localización del mouse en la página, 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 más sencillo de cara a la programación de scripts del lado del cliente. Si queremos saber la posición del ratón en un momento dado, tenemos que definir un evento para ejecutar código en ese momento. En nuestro ejemplo queremos saber la posición del ratón en el momento de hacer clic sobre un elemento de la página.
Referencia: Tenemos un manual de Mootools para explicar el funcionamiento del framework Javascript.

El código Mootools
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 autorización. 71

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

Así que en este artículo vamos a realizar un evento y dentro de ese evento vamos a crear el código para mostrar las coordenadas del lugar donde se encuentra el ratón. 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 código Mootools para crear el evento:
$("elementocualquiera").addEvent('click', function(event) { alert("Posición del ratón\nx: " + event.page.x + "\ny: " + event.page.y); });

Al asignar un evento a un elemento en Mootools, se asocia una función a ese evento. En la propia función se recibe como parámetro 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 posición del ratón 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 posición del ratón. Ver el ejemplo en una página aparte. Recuerda que tenemos un manual de Mootools para poder entender bien los procesos explicados en este artículo concernientes a Mootools. Artículo por Miguel Angel Alvarez

Enviar un formulario por Ajax con Mootools
En nuestro Manual de Mootools hemos aprendido las cosas más básicas para empezar a trabajar con este framework Javascript y hacer cómodamente algunas cosas que sin él sería mucho más difícil. Una de las facilidades que podemos utilizar de Mootools es la realización de scripts Ajax, sin tener que complicarnos con las particularidades de los distintos navegadores. En este artículo 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 cómo podemos enviarlo con Ajax utilizando el menor número de líneas de código posibles. Luego complicaremos el ejemplo, para añadir efectos y otras cosas interesantes, pero lo vamos a dejar para próximos artículos, por no complicarnos ahora, que esto es una mera introducción al envío de formularios con Ajax. En desarrollo web .com iremos publicando nuevos artículos 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
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 autorización. 72

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

marcha.
Referencia: en artículos anteriores ya hemos visto otros ejemplos de Ajax con Mootools. Consultar el artículo Ajax con Mootools.

Código HTML Pasamos directamente a mostrar el código 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 sólo dos campos de texto y un botón de submit. Cabe destacar que el formulario se envía a la página recibe-formulario.php y que se va a enviar por POST. Código Javascript para enviar el formulario por Ajax Ahora vamos a ver el código Javascript, utilizando Mootools, que requeriría la pagina para utilizar Ajax en el envío 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 documentación del propio framework.
window.addEvent('domready', function() { //Vamos a recibir el elemento formulario elementoFormulario = $("miformulario"); //Vamos a añadir un evento al formulario para cuando se envíe elementoFormulario.addEvent('submit', function(e) { //primero voy a parar el evento para que no se envíe como lo haría normalmente e.stop(); //Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax //Luego definimos qué hacer cuando se envía 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); } }); //Envío el formulario this.send(); }); });

Básicamente lo que se hace es crear un evento para ejecutar cuando el formulario se envíe (evento submit). El evento lo programamos para que se detenga el proceso habitual de submit y a continuación codificamos el envío con Ajax.

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 autorización.

73

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

Para enviar un formulario con Ajax desde Mootools, lo único que tenemos que hacer es ejecutar el método send() del elemento formulario:
formulario.send();

Pero claro, antes tenemos que decirle qué queremos hacer cuando se complete el envío y cómo mostrar la respuesta recibida después de ello. Para ello tenemos que definir otro evento onComplete, que asociamos al envío "send". El evento onComplete recibe un parámetro 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 programación del lado del servidor, como PHP, .NET, ASP, o lo que queramos. Este código Javascript se podría ampliar mucho con tantos efectos o utilidades como necesitemos, como mostrar una imagen de carga. Repito que tenemos planificada la publicación de artículos adicionales sobre este tema en desarrolloweb .com, donde veremos con detalle más adelante estos usos. Código PHP para procesar el formulario La respuesta de procesar el formulario se genera en el script que lo recibe. Si nos fijamos en el código 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 más 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 página mediante PHP se recibirá como respuesta de la solicitud Ajax. Todo el código del ejemplo de procesamiento de formulario en Ajax Veamos todo el código junto.
<html> <head> <title>Ejemplo de envío 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 añadir un evento al formulario para cuando se envíe elementoFormulario.addEvent('submit', function(e) { //primero voy a parar el evento para que no se envíe como lo haría normalmente e.stop(); //Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax //Luego definimos qué hacer cuando se envía 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

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 autorización.

74

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

onComplete: function(respuesta) { //escribo la respuesta en la capa "resultado" $("resultado").set('html', respuesta); } }); //Envío 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 código funcion faltaría el script PHP para procesar el formulario, que estaría en un archivo aparte, en el mismo directorio que el código HTML.
Nota: Para que el ejemplo funcione tenemos que ponerlo en un servidor web, porque el envío se realiza por http y porque la página PHP debe ser interpretada y procesada por el servidor web.

Podemos ver este ejemplo en marcha en una página aparte. Artículo 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 autorización.

75

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->