Manual Mootools

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Manual de Mootools
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com
http://www.desarrolloweb.com
(35 capítulos)
Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 1

© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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

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

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.
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.

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" value="Opacidad 0%" onclick="$('texto_presentacion').setOpacity(0);">
<input type="button" value="Opacidad 25%" onclick="$('texto_presentacion').setOpacity(.25);">
<input type="button" value="Opacidad 100%" onclick="$('texto_presentacion').setOpacity(1);">
<br>
<br>
<input type="button" value="Tamaño 200px" onclick="$('texto_presentacion').setStyle('width', '200px');">
<input type="button" value="Pon borde" onclick="$('texto_presentacion').setStyle('border', '1px solid #ff0000');">
<input type="button" value="Tamaño 50%" onclick="$('texto_presentacion').setStyle('width', '50%');">
</form>
</body>
</html>
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 <div> que tiene el atributo id
para especificar su nombre: id="texto_presentacion".
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);

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.
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

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
Nos devolvería los píxel que se haya desplazado el elemento mielemento en la horizontal.
mielemento.getSize().scroll.y
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>
<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

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.
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.

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

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.
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

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.
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.

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:

'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.
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

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()
$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){

document.write ("Estás en Mozilla/Gecko");

}
if (window.opera){
document.write ("Estás en Opera");
}
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.
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

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: 232,
propiedad2: "texto",
propiedad3: true,
propiedad4: 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.

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.

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.
Constructores en Mootools
En nuestro manual de Mootools ya hemos empezado a conocer cosas sobre el uso de clases.
Hemos creado clases y objetos a partir de ellas, hemos conocido lo que son las propiedades y

los 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";
},

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();
miVehiculo.detener();
Podemos ver el ejemplo en ejecución de esta clase vehículo y su uso en una página aparte.
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.

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:

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
this.parent(nombre);
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.
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();

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.

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.
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.

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.

//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");
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á

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');
}

})
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();

miCasa.desocupar();
miCasa.ocupar();
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().
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.

//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.
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

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.
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")

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.
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>

<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.
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:

<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.
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

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.

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

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.
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

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:

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.
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

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(){

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())
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

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.

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()

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.
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.

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.
$("mielemento").addEvent('click', function() {
alert('Has pulsado "mielemento"...');
});
});

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.
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

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.

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.

Luego, con $("miboton").fireEvent("click"); lanzamos el evento "click", que será como si el

usuario hubiese hecho clic sobre el botón.
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

hubiese producido el evento con sus acciones sobre los elementos de la página.
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.

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

},
//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.
Ver el artículo que habla sobre las clases.

Ver el artículo que habla sobre constructores.

Ver el artículo sobre la función dólar.

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

"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.
}.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()
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.
}
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
//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>

<title>Textarea que cuenta caracteres escritos</title>

<script src="mootools-1.2.1-core-yc.js" type="text/javascript"></script>
span.estilocontador{
display: block;
margin-top: 3px;
width: 120px;
font-size:8pt;
}
</style>
<script>
}.bind(this)
);

},

}
});
//creo un evento para cuando está listo el DOM de la página

//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.

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.
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

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

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:
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:
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>
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,

//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
//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>
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>
var otroTip = new Tip("estotambientienetip", "Por ver un poco las posibilidades del sistema, hemos creado otro
elemento que tendrá tip");
});
</script>

</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.
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.

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.
.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

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.

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.
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.
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á

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().

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/xhtml1-

strict.dtd">
<html>
<head>
<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>
Window.getSize() para mootools 1.2

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/xhtml1-

strict.dtd">
O bien este otro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.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.
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

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.

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 += "Foto de: " + fotos.photos[i].owner_name
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.

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.
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!'); },

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
//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>

Request de Mootools, un envoltorio de XMLHttpRequest.

<p>
<script>
//función que se va a ejecutar cuando esté listo el dom
//añado un evento al enlace para ejecturar al hacer clic

//creo un request
var prueboRequest = new Request({
method: 'get',
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.

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',
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>

Clase Request de Mootools, un envoltorio de XMLHttpRequest. Para Ajax!

<p>
<p>
<div id="cajaactualizacion">
Aquí voy a actualizar el texto!
</div>
<script>
//función a ejecutar cuando esté listo el dom
var nuevoRequest = new Request({
method: 'get',
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.
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

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.
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

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.
//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.

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>
//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();
});
});
</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.


Manual Mootools

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Mootools

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs

Autores del manual

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 1

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 2

Módulos que queremos descargar:

Tipo de compresión de la descarga:

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 3

Artículo por Miguel Angel Alvarez

Primer ejemplo con Mootools

<script src="mootools -1.11.js" type="text/javascript"></script>

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 4

El código del ejemplo es el siguiente:

La primera serie de botones alteran la opacidad del elemento.

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 5

Con $('texto_presentacion') recibimos un objeto que es el elemento que tenía el

$('texto_presentacion').setStyle('border', '1px solid #ff0000');

Dejo de nuevo el enlace para ver el ejemplo en marcha.

Artículo por Miguel Angel Alvarez

Segundo ejemplo con Mootools

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 6

coordenadas X e Y a las que queremos desplazar el scroll del elemento.

El código de este sencillo ejemplo es el siguiente:

<div id="texto_scroll" style="overflow: auto; height: 70px; width: 400px;">

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 7

<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a>

capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);

<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

Espero que se haya entendido el ejemplo. Podemos ir a la documentación de Mootools, del

Dejo de nuevo el enlace al ejemplo en funcionamiento.

Artículo por Miguel Angel Alvarez

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 8

La instalación y configuración de las pestañas es sencilla, pero encontré un problema que

Popup DHTML Slimbox

Calendario o seleccionador de fecha

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 9

Artículo por Miguel Angel Alvarez

Evento domready de Mootools

Cuando tenemos el DOM Ready (DOM listo)

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 10

automáticamente, un calendario o lo que podamos necesitar.

Cómo utilizar el evento domready de mootools

Espero que las explicaciones anteriores se hayan entendido. En resumen, domready es un

Aquí puede verse un ejemplo de uso del evento domready de mootools.

Artículo por Miguel Angel Alvarez

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 11

Podemos ver un ejemplo de funcionamiento de $define() en una página aparte.

var x = new Array(1,2,3);

$type puede devolver los siguientes valores:

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 12

'element' si el parámetro es un elemento DOM (objetos del navegador)

Podemos ver un ejemplo de funcionamiento de $type() en una página aparte.

Artículo por Miguel Angel Alvarez

Core.js de Mootools (parte II)

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 13

aleatorio entre esos dos parámetros, incluyéndolos. Por ejemplo:

Devuelve un número aleatorio del 3 al 7. Podría ser 3, 4, 5, 6 ó 7.

for (i=0; i<100; i++){

Podemos ver este script en marcha en una página aparte.

Podemos ver este script en marcha en una página aparte.

Vamos a verlo en un ejemplo en el que creamos un setTimeout y luego lo eliminamos.

temporizador = setTimeout('alert("hola")', 2000);