MOOTOOLS

MOOTOOLS
El uso del framework puede resultar difcil para las

personas que nunca han trabajado con l o con otro
framework Jaascript! "o obstante# para poder utili$ar
Mootools debemos tener antes un conocimiento medio de
Jaascript!
En este ejemplo s%lo tenemos que conocer unas cuantas cosas
de Mootools!
&ara empe$ar# ha' que incluir el c%di(o Jaascript de las
libreras de Mootools# esto se hace inclu'endo el archio
e)terno de c%di(o Jaascript con las libreras del
framework# que hemos descar(ado de la p*(ina de Mootools!
+script src,-mootools ./!00!js-
t'pe,-te)t1jaascript-2+1script2
La funci%n 345
En Mootols utili$amos la function 345 para recibir un
objeto con un elemento de la p*(ina! 345 recibe como
par*metro el identificador del elemento# que se ha indicado
con el atributo id de la etiqueta 6TML de lo que queremos
recibir!
7amos a utili$ar dos mtodos de Element8
Mtodo setOpacit'45
Es para alterar la transparencia de un elemento! 9ecibe un
alor entre : ' / siendo : transparente ' / totalmente
opaco!
Mtodo setSt'le45
&ara alterar cualquier estilo ;SS del elemento! 9ecibe dos
par*metros# el primero el nombre del estilo ' el se(undo el
alor del estilo!
El ejemplo es el si(uiente8
+html2
+head2
+title2ejemplo b*sico con mootools+1title2
+script src,-libreria<mootools!js-
+script2
window!addEent4=domread'=# function45>
opaco<actual , :?
capa<transicion , null?
car(ado , true?
@5?
+1script2
+1head2
+bod'2
+di id,-te)to<presentacion-26ola# esto es un te)to para
hacer una prueba+1di2
+br2
+form2
+input t'pe,-button- alue,-Opacidad :A- onclick,-3
4=te)to<presentacion=5!setOpacit'4:5?-2
+input t'pe,-button- alue,-Opacidad BCA- onclick,-3
4=te)to<presentacion=5!setOpacit'4!BC5?-2
+input t'pe,-button- alue,-Opacidad C:A- onclick,-3
4=te)to<presentacion=5!setOpacit'4!C5?-2
+input t'pe,-button- alue,-Opacidad DCA- onclick,-3
4=te)to<presentacion=5!setOpacit'4!DC5?-2
+input t'pe,-button- alue,-Opacidad /::A- onclick,-3
4=te)to<presentacion=5!setOpacit'4/5?-2
+br2
+br2
+input t'pe,-button- alue,-TamaEo B::p)- onclick,-3
4=te)to<presentacion=5!setSt'le4=width=# =B::p)=5?-2
+input t'pe,-button- alue,-&on borde- onclick,-3
4=te)to<presentacion=5!setSt'le4=border=# =/p) solid
Fff::::=5?-2
+input t'pe,-button- alue,-TamaEo C:A- onclick,-3
4=te)to<presentacion=5!setSt'le4=width=# =C:A=5?-2
+1form2
+1bod'2
+1html2
7eremos que hemos incluido las libreras Mootools en el
head de la p*(ina# con un archio e)terno Jaascript#
car(ado con la etiqueta +script2!
Tambin debemos fijarnos que tenemos una capa# creada con
un +di2 que tiene el atributo id para especificar su
nombre8 id,-te)to<presentacion-!
La primera serie de botones alteran la opacidad del
elemento!
34=te)to<presentacion=5!setOpacit'4:5?
;on 34=te)to<presentacion=5 recibimos un objeto que es el
elemento que tena el id,-te)to<presentacion-! Lue(o sobre
ese objeto inocamos el mtodo setOpacit'45 pasando por
par*metro el alor de opacidad!

34=te)to<presentacion=5!setSt'le4=width=# =B::p)=5?
Esto altera el atributo ;SS width ' lo cambia por el alor
B::p)# con lo que la capa te)to<presentacion tendr* un
ancho de B:: pi)el!
34=te)to<presentacion=5!setSt'le4=border=# =/p) solid
Fff::::=5?
;on esto aleramos el atributo ;SS border# ' le pasamos un
nueo alor que indica que ten(a un borde s%lido de / pi)el
' con color rojo!
34=te)to<presentacion=5!setSt'le4=width=# =C:A=5?
;on esto Gltimo cambiamos de nueo el atributo width para
poner una anchura de C:A# es decir# la mitad del espacio
disponible donde est* el elemento!
&ara continuar# amos a er un se(undo ejemplo para hacer
un scroll en una capa por Jaascript! Este sistema de
scroll o despla$amiento sera mu' complejo de hacer sin la
a'uda del framework como Mootools!
El presente ejemplo utili$a dos mtodos que nos an a
serir para hacer el despla$amiento8
Mtodo scrollTo45
Sire para despla$ar un elemento a una nuea posici%n!
9ecibe dos par*metros# las coordenadas H e I a las que
queremos despla$ar el scroll del elemento!
Mtodo (etSi$e45
Sire para obtener las dimensiones de un elemento# as como
la posici%n actual del scroll o despla$amiento que se ha'a
reali$ado sobre el mismo! Jeuele un objeto con una serie
de propiedades que son las informaciones sobre tamaEo '
despla$amiento del elemento! Entre las propiedades tiene la
que nos interesa# que se llama scroll ' a su e$# scroll
tiene dos propiedades que son las H e I del scroll que se
ha'a reali$ado! Ejemplo8
mielemento!(etSi$e45!scroll!)
"os deolera los p)el que se ha'a despla$ado el elemento
mielemento en la hori$ontal!
mielemento!(etSi$e45!scroll!'
"os deolera el despla$amiento ertical que se ha'a
reali$ado sobre el elemento mielemento!
El c%di(o de este sencillo ejemplo es el si(uiente8
+html2
+head2
+title2Ejemplo B con Mootools+1title2
+script src,-mootools!js-
+1head2
+bod'2
+di id,-te)to<scroll- st'le,-oerflow8 auto? hei(ht8 D:p)?
width8 K::p)?-2
+di st'le,-width8/::A?-2
6ola# esto es un te)to que o' a poner de prueba
+br2
Lhora tendra que intentar ir poco a poco para conocer
todo el funcionamiento en detalle!
+1di2
+1di2
+br2
+script2
capa<despla$ar , 34=te)to<scroll=5?
+1script2
+a href,-jaascript8capa<despla$ar!scrollTo4:#
capa<despla$ar!(etSi$e45!scroll!' M B:5?-2Lbajo+1a2 11 +a
href,-jaascript8capa<despla$ar!scrollTo4:#
capa<despla$ar!(etSi$e45!scroll!' . B:5?-2Lrriba+1a2
+1bod'2
+1html2
6emos creado una capa con un te)to ' una serie de estilos
;SS para que ten(a un tamaEo definido# que no permita er
el contenido completo del te)to# ' unas barras de
despla$amiento para hacer el scroll!
L continuaci%n ha' un script que crea una ariable (lobal a
la p*(ina que contiene la capa que queremos despla$ar!
+script2
capa<despla$ar , 34=te)to<scroll=5?
+1script2
Lue(o ha' un par de enlaces que son los que# puls*ndolos#
despla$ar* autom*ticamente el te)to arriba o abajo!
capa<despla$ar!(etSi$e45!scroll!' M B:5?-2Lbajo+1a2
;on -jaascript8- metido en un href de un enlace# estamos
indicando que se tiene que ejecutar esa sentencia
jaascript al pulsar el link! I la sentencia es8
capa<despla$ar!scrollTo4:#
capa<despla$ar!(etSi$e45!scroll!' M B:5?
Eso indica que en la ariable de la capa que habamos
creado antes# capa<despla$ar# se tiene que ejecutar el
mtodo scrollTo45! Este mtodo recibe como primer par*metro
:# porque no queremos despla$arlo hori$ontalmente! Lue(o
como despla$amiento ertical ponemos el despla$amiento
ertical del elemento M B: p)el! El despla$amiento
ertical actual del elemento lo sacamos con
capa<despla$ar!(etSi$e45!scroll!'# tal como habamos
e)plicado antes en este artculo!
El enlace de para despla$ar el scroll hacia arriba sera
mu' similar al que acabamos de er!
capa<despla$ar!(etSi$e45!scroll!' . B:5?-2Lrriba+1a2
La Gnica diferencia es que ahora hacemos un scrollTo45 a
cero en la hori$ontal ' a el scroll actual . B: p)el!
Espero que se ha'a entendido el ejemplo! &odemos ir a la
documentaci%n de Mootools# del m%dulo Element!Jimensions!js
para obtener la descripci%n completa de los mtodos que
hemos utili$ado!
Jejo de nueo el enlace al ejemplo en funcionamiento!
6asta aqu en este manual hemos isto un par de ejemplos
mu' simples sobre Mootools# este se(undo un poco m*s
pr*ctico! &ero el objetio no es sino e)presar por medio de
un c%di(o la sencille$ con la que se pro(rama con Mootools
para conse(uir efectos que de otra manera nos hubiera
costado mucho trabajo pro(ramar! I todo compatible con los
nae(adores m*s habituales!
Espero que este se(undo ejemplo ha'a ilustrado un poco m*s
lo que es Mootools ' al(unas cosas que permite hacer con
pocas lneas de c%di(o! &ara encontrar nueos ejemplos
puedes echar un ista$o tambin al Taller de Mootools!
Jiersos desarrolladores ofrecen componentes reali$ados con
Mootools para utili$ar en p*(inas web!
&or Mi(uel Ln(el Llare$
Ltenci%n8 ;ontenido e)clusio de JesarrolloNeb!com! "o
reproducir! ;op'ri(ht!
Mootools# aparte de ofrecer un nutrido (rupo de libreras
para reali$ar efectos interesantes en Jaascript# tiene una
(entil comunidad de desarrolladores que crean componentes
que se pueden utili$ar en las p*(inas web que estemos
reali$ando! Ls que podemos beneficiarnos del esfuer$o de
desarrollo de otras personas para reali$ar p*(inas con
efectos impactantes r*pidamente!
"o amos por ahora a e)plicar c%mo poner en marcha estos
componentes# s%lo a comentarlos por encima ' mostrar
ejemplos! Tenemos una secci%n de JesarrolloNeb!com donde
amos a ir colocando distintos scripts# plu(ins '
componentes reali$ados con mootools8 Scripts Mootools!
9eferencia8 Ouien desee aprender Mootools# recomendamos la
lectura del Manual de Mootools que estamos publicando en
JesarrolloNeb!com!
Pnterfa$ de pestaEas
Si queremos utili$ar en una p*(ina web una interfa$ de
pestaEas# se ofrece un componente mu' interesante en8
MooTabs!
Este componente permite diersos tipos de pestaEas con
ariados efectos ' transiciones e incluso la obtenci%n por
Lja) de los contenidos de las diersas pestaEas!
La instalaci%n ' confi(uraci%n de las pestaEas es sencilla#
pero encontr un problema que identifico como
incompatibilidad entre las ersiones mootools /!/ ' la
/!//# porque si no utili$as la ersi%n /!/ no funciona!
&opup J6TML Slimbo)
;on este componente podemos mostrar im*(enes cuando un
usuario hace un clic en una miniatura! Las im*(enes se
muestran con una especie de entana emer(ente din*mica# que
se ajusta a las dimensiones de la ima(en! Ldem*s# el fondo
se queda como (risaceo# en se(undo plano!
&odemos conocer m*s del componente ' erlo en marcha en su
propia p*(ina web8 http811www!di(italia!be1software1slimbo)
&ase de diapositias
6a' arios componentes de pase de diapositias o efectos
isuales sobre im*(enes que an cambiando! Tal e$ el m*s
impactante ' con ma'ores opciones de confi(uraci%n sea el
SmoothQaller'!
El componente es tan espectacular como lo podra ser una
animaci%n en Rlash# con la particularidad que s%lo utili$a
Jaascript para su puesta en marcha 4' 6TML con ;SS# por
supuesto5!
&odemos er la p*(ina del componente donde tiene diersos
demo con distintas funcionalidades ' confi(uraciones8
http811smooth(aller'!jondesi(n!net1
;alendario o seleccionador de fecha
Otro componente mu' Gtil es un calendario para seleccionar
fechas# que permite esco(er una fecha determinada
isualmente! "osotros tendramos un campo fecha que al
pulsarlo se mostrara un calendario del mes ' aEo actuales!
&odemos moernos por el calendario cambiando el mes ' el
aEo ' lue(o pulsando cualquier da del calendario se
seleccionara esa fecha determinada!
Sno de los calendarios m*s atractios isualmente que he
isto es el que ofrecen en esta direcci%n8
http811www!electricprism!com1aeron1calendar1
;onclusi%n
;omo se puede er# las interfaces ' funcionalidades que se
pueden hacer con Mootools son tantas como la ima(inaci%n
nos permita concebir!
Lo que est* claro por mi e)periencia hasta estos momentos
es que se necesitan bastantes conocimientos de Jaascript#
6TML ' ;SS para poner en marcha los componentes# pues
aunque muchos de ellos funcionan de manera modular# est*n
compuestos de arios archios con distintos c%di(os que
tenemos que saber incluir ' utili$ar en nuestras p*(inas!
Ll(unos problemas que he encontrado 'o8
L eces e)isten problemas de ersiones# porque los
componentes utili$aban una ersi%n distinta de Mootools que
la que estamos utili$ando nosotros
Ll(unas eces la documentaci%n es escasa!
Si da un problema en un nae(ador es casi imposible reisar
el c%di(o para tratar de arre(larlo!
Sna simple declaraci%n de estilos ;SS te puede tirar al
traste todas las pruebas ' hacerte perder horas de tu
precioso tiempo!
Esto es lo que eo 'o que tienen al(unos de los componentes
con los que he trabajado! Espero que este manual nos a'ude
a solucionar m*s r*pidamente cualquier eentualidad# aunque
por ahora este artculo simplemente quera mostrar un poco
las cosas aan$adas que se pueden reali$ar con Mootools!
Sna e$ m*s recuerdo que en la secci%n de Scripts Mootools
de JesarrolloNeb!com iremos publicando los componentes
Gtiles que encontremos con Mootools!
El eento domread' de Mootools lo podemos asociar al objeto
window# para hacer cosas cuando el JOM est* listo 4Jom
9ead'5!
El framework Jaascript Mootools define un eento que amos
a utili$ar infinidad de eces a lo lar(o del Manual de
Mootools! Este mtodo se puede asociar al objeto window#
para ejecutar acciones cuando el JOM ha sido car(ado por
completo ' est* listo para poder hacer cualquier tipo de
acciones con l!
;uando tenemos el JOM 9ead' 4JOM listo5
Tueno# sabemos que una p*(ina tiene un c%di(o 6TML ' adem*s
una serie de elementos e)ternos# que se car(an aparte del
propio c%di(o de la p*(ina! Si nuestra p*(ina es lar(a '
contiene diersas im*(enes# scripts# declaraciones de
estilos u otros elementos que ten(an cierto peso# puede
tardar un buen tiempo hasta que todo ha terminado de
car(arse!
En las aplicaciones web que tienen componentes del lado del
cliente# que se ejecutan mediante Jaascript# muchas eces
se tienen que crear funciones de iniciali$aci%n de esos
componentes# para insertarlos en la p*(ina# posicionarlos#
etc! &or ejemplo# podramos desear ejecutar acciones
Jaascript para reali$ar una car(a de datos por Lja) o para
(enerar contenidos din*micos en la p*(ina# insertando
elementos como una barra de nae(aci%n (enerada
autom*ticamente# un calendario o lo que podamos necesitar!
Todos estos componentes que se deben insertar din*micamente
en una p*(ina# en teora# deben ser incluidos cuando el
nae(ador est* preparado para recibirlos! Esto es# cuando
el JOM 4la jerarqua de objetos del nae(ador a disposici%n
de Jaascript para alterar los elementos de la p*(ina5 est*
car(ado por completo en el nae(ador ' listo para ser
alterado!
Ouien cono$ca las bases de Jaascript sabr* que e)iste un
eento -onload-# que sire para ejecutar acciones cuando se
termina la car(a de la p*(ina! &ero este eento se ejecuta
cuando TOJOS los elementos de la p*(ina han terminado de
car(arse# es decir# la propia p*(ina ' todo lo que ten(a#
como im*(enes# banners ' otro tipo de recursos e)ternos!
Ls que# si nuestra p*(ina tiene# por ejemplo# muchas
im*(enes mu' pesadas# puede que onload tarde demasiado en
ejecutarse ' hasta entonces no se mostraran los elementos
que se desean insertar din*micamente!
&ero mucho antes que finalice esa car(a de elementos
e)ternos# la p*(ina podra haber estado lista para ejecutar
acciones Jaascript que alteren el JOM! En concreto# cuando
una p*(ina termina de car(arse ' procesarse# aunque se
continGen descar(ando im*(enes o elementos e)ternos# el JOM
estar* listo para reali$a acciones!
;%mo utili$ar el eento domread' de mootools
Espero que las e)plicaciones anteriores se ha'an entendido!
En resumen# domread' es un eento que se ejecuta cuando la
p*(ina est* lista para reali$ar acciones que afecten al
JOM# es decir# cuando el JOM est* listo! Jebe quedar claro
que el JOM puede estar listo mucho antes que se terminen de
car(ar todos los elementos de la p*(ina# sobretodo si la
p*(ina tiene im*(enes o elementos e)ternos que ocupen mucho
espacio en b'tes!
Entonces# para ejecutar acciones cuando el JOM est* listo
en Mootools se hace esto8
window!addEent4=domread'=# function45 >
11aqu las acciones que quieras reali$ar cuando el JOM
est listo
alert 4-Lhora el JOM est* listo-5?
@5?
Eso es todo! Simplemente con este c%di(o podemos incluir
todas las acciones que necesitemos para ejecutarlas s%lo en
el momento que el JOM est listo!
Pmportante8 El eento domread' s%lo se puede utili$ar
con el objeto window del nae(ador! &ara uestra
referencia# la declaraci%n del eento domread' se
encuentra dentro del paquete Stilities1Jom9ead'!
Lqu puede erse un ejemplo de uso del eento domread' de
mootools!
;omen$amos la descripci%n del framework mootools comentando
el core# librera de funciones que forman parte del nGcleo
de mootools!
Las libreras de Mootools est*n diididas en arios
paquetes# los cuales podemos necesitar o no para
determinados pro'ectos! En este caso amos a e)plicar el
paquete core!js# que contiene funciones que forman parte
del nGcleo de mootools!
Esta librera contiene una serie de funciones sencillas# de
prop%sito (eneral# que se utili$an en todo el framework '
que nosotros tambin podemos utili$ar para crear
aplicaciones Jaascript! El core de mootools es requerido
por todas las otras libreras del framework! Se puede
utili$ar de manera independiente# pero no tiene mucho
sentido porque no ofrecen mucha utilidad por si solas!
El core de mootools contiene diersas funciones# aunque de
momento no las amos a er todas# porque para poder
e)plicarlas necesitaramos e)plicar antes al(o de
pro(ramaci%n orientada a objetos! "o obstante# estas
funciones nos an a serir para ir practicando con aspectos
b*sicos de mootools# al alcance de cualquiera que cono$ca
Jaascript de antemano!
9eferencias8 &odemos aprender Jaascript en nuestra
secci%n Jaascript a fondo! Ldem*s# dejamos el enlace
del manual donde se en(loba este artculo8
pro(ramaci%n con el framework mootools!
3defined
Esta funci%n sire para saber si e)iste una ariable o un
objeto! La funci%n deuele true si el par*metro que se le
pasa no es null o undefined! 7eamos un par de ejemplos8
3defined4null5?
Jeolera false!
miariable , /?
3defined4miariable5?
Jeolera true!
&odemos er un ejemplo de funcionamiento de 3define45 en
una p*(ina aparte!
3t'pe
Esta funci%n se utili$a para saber el tipo de una ariable#
es decir# el tipo de dato que contiene la ariable# por
ejemplo# si es un objeto# un nGmero# un boleano# etc! Se le
pasa por par*metro una ariable ' deuele un strin( que
identifica el tipo de la misma!
&or ejemplo8
cadena , -sol-?
3t'pe4cadena5?
Jeuele -strin(-!
numero , B0?
3t'pe4numero5?
Jeuele -number-!
ar ) , new Lrra'4/#B#05?
3t'pe4)5?
Jeuele -Lrra'-!
3t'pe puede deoler los si(uientes alores8
=element= si el par*metro es un elemento JOM 4objetos del
nae(ador5
=te)tnode= si el par*metro es un nodo de te)to del JOM
=whitespace= si el par*metro es un nodo de espacio en
blanco del JOM
=ar(uments= si el par*metro es un objeto ar(umento
=object= si el par*metro es un objeto
=strin(= si el par*metro es una cadena de caracteres
=number=si el par*metro es un nGmero
=boolean= si el par*metro es una ariable boleana
4true1false5
=function= si el par*metro es una funci%n
=re(e)p= si el par*metro es una e)presi%n re(ular
=class= si el par*metro es una clase 4de pro(ramaci%n
orientada a objetos# creada como una nuea clase o
e)tendiendo otra5
=collection= si el par*metro es una colecci%n htmlelements
=arra'= si el par*metro es un arra'
&ara todos los dem*s casos# o si el par*metro es undefined
o null# 3t'pe deuele false 4alor boleano5
&odemos er un ejemplo de funcionamiento de 3t'pe45 en una
p*(ina aparte!
3chk
6ace un chequeo de un par*metro ' deuele un boleano que
puede ser8
7erdadero8 en caso que el alor recibido por 3chk45 e)ista#
pudiendo tener el alor cero!
Ralso8 en el caso que el alor recibido por par*metro no
e)ista!
Esta funci%n es Gtil para permitir alores i(uales a cero
en el alor a ealuar su e)istencia! Ejemplo8
ar miariable,:?
if 43chk4miariable55
alert 4-ale cero o cualquier otro alor-5?
else
alert 4-no e)iste el alor-5?
En este caso se ejecutara el alert de -ale cero o!!!-! Si
por ejemplo miariable hubise sido null# dira que no
e)iste el alor!
En el si(uiente artculo se(uimos iendo funciones de
core!js de mootools!
;ontinuan las e)plicaciones de la librera core de
Mootools# que forma el nGcleo del framework!
En el artculo anterior del manual de Mootools habamos
presentado las primeras e)plicaciones sobre las funciones
de la librera core!js!
Lhora amos a se(uir e)plicando al(unas de las funciones
que forman parte del core de mootools!
3random
Esta funci%n sire para obtener nGmeros aleatorios de una
manera sencilla! 9ecibe dos par*metros# que son un alor
mnimo ' uno m*)imo# por ese orden# ' deuele un nGmero
aleatorio entre esos dos par*metros# inclu'ndolos! &or
ejemplo8
3random40#D5?
Jeuele un nGmero aleatorio del 0 al D! &odra ser 0# K#
C# U % D!
&or ejemplo este script imprimira por pantalla /:: nGmeros
aleatorios entre el 0 ' el D!
for 4i,:? i+/::? iMM5>
aleatorio , 3random40#D5?
document!write 4aleatorio5?
document!write 4-+br2-5?
@
&odemos er este script en marcha en una p*(ina aparte!
3time
Jeuele el timestamp actual! Sn nGmero entero con los
milise(undos que han pasado desde /VD:! Se llama sin pasar
nin(Gn par*metro!
3time45
3clear
Esta funci%n sire para eliminar un setTimeout o un
interal! Sn setTimeout sire para ejecutar instrucciones
Jaascript con un retardo ' con 3clear podemos liberar
ejecuciones que se ha'an planificado para un futuro!
7amos a erlo en un ejemplo en el que creamos un setTimeout
' lue(o lo eliminamos!
tempori$ador , setTimeout4=alert4-hola-5=# B:::5?
tempori$ador , 3clear4tempori$ador5?
;on estas dos sentencias el resultado ser* que el nae(ador
no presentar* nin(Gn resultado! &odemos erlo en marcha en
una p*(ina aparte!
;lase Nindow
Ldem*s# las libreras core!js implementan unas nueas
propiedades en la clase Nindow de la jerarqua de objetos
del nae(ador! Estas nueas propiedades siren para
reali$ar detecci%n del nae(ador que est* ejecutando los
scripts!
&or ejemplo# si el nae(ador que est* ejecutando la p*(ina
es Pnternet E)plorer# se crea la propiedad window!ie ' se
le asi(na el alor true! Si el nae(ador es Rirefo)# se
crea con alor true la propiedad window!(ecko!
&or ejemplo# se pueden utili$ar las propiedades de la
si(uiente manera8
if 4window!ie5>
document!write 4-Est*s en Pnternet E)plorer-5?
@
if 4window!(ecko5>
document!write 4-Est*s en Mo$illa1Qecko-5?
@
if 4window!opera5>
document!write 4-Est*s en Opera-5?
@
7amos a dejar para m*s adelante otras caractersticas del
core!js de mootools# porque tenemos que e)plicar
preiamente al(unos conceptos sobre pro(ramaci%n orientada
a objetos! Tambin nos detendremos en la utili$aci%n de las
libreras core!js en casos pr*cticos# como por ejemplo la
detecci%n del nae(ador# que es un punto interesante para
detallar con calma!
Jescripci%n ' e)plicaciones sobre las clases en Mootools!
;%mo crear clases de pro(ramaci%n orientada a objetos con
el Rramework Mootools!
Mootools es un framework Jaascript para reali$ar pro(ramas
o scripts con pro(ramaci%n orientada a objetos! &roee una
serie de utilidades para crear clases de una manera m*s
elaborada que si pro(ram*semos s%lo con Jaascript! L la
e$# Mootools dispone una sinta)is particular para la
reali$aci%n de clases# que permite escribir c%di(o m*s Gtil
con menos lneas! Todo esto lo tenemos que conocer# 'a que
cuando pro(ramamos utili$ando Mootools en realidad ' por
decirlo de al(una manera# estamos pro(ramando en sinta)is
Mootools en lu(ar de sinta)is Jaascript!
Je momento# para se(uir estas e)plicaciones# ha' que
conocer al menos las bases de la pro(ramaci%n orientada a
objetos! &ara ello recomendamos leer la pequeEa
introducci%n a pro(ramaci%n orientada a objetos que hemos
publicado en JesarrolloNeb!com! Jentro de lo que es la
pro(ramaci%n orientada a objetos ese artculo s%lo comenta
una pequeEa parte# pero aun as nos dar* al(unas ideas '
aclaraciones que a'udar*n a entender este manual! Lo cierto
es que la pro(ramaci%n orientada a objetos no es difcil#
pero s que puede ser delicado al menos al principio!
&or supuesto# tambin conendr* haber se(uido hasta este
punto nuestro manual de Mootools!
;lases en Mootools
;uando creamos una clase en Mootools tenemos que hacerlo
creando un nueo objeto de la clase ;lass! La clase ;lass#
tiene la arquitectura b*sica para crear clases de
pro(ramaci%n orientada a objetos en Mootools!
Sna clase se crea de esta manera8
ar "ombre;lase , new ;lass4>
11contenido de la clase 4propiedades ' mtodos5
@5?
;ualquier persona con un poco de e)periencia en
pro(ramaci%n orientada a objetos er* que se crea como si
instaci*semos un objeto de la clase ;lass! ;on ello hacemos
una nuea clase a partir de ;lass! Jentro colocamos el
contenido de la clase# tanto sus propiedades como sus
mtodos! 6a' que fijarse tambin que el contenido de la
clase se escribe entre parntesis ' entre llaes!
Jefinir propiedades de las clases
L 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 llaes# colocando una
coma de separaci%n entre cada una de las propiedades!
Ldem*s# debemos especificar directamente el alor de las
propiedades# con esta sinta)is8
ar Mi;lase&ropiedades , new ;lass 4>
propiedad/8 B0B#
propiedadB8 -te)to-#
propiedad08 true#
propiedadK8 null

@5?
;omo se puede er# se ha definido una nuea clase con
nombre Mi;lase&ropiedades ' con K propiedades con distintos
alores! Lsimismo coniene fijarse que las propiedades an
separadas por una coma# menos la Gltima que no debemos
ponerla por no tener nin(una otra propiedad detr*s!
&ara que no de error de sinta)is estamos obli(ados a
definir los alores de las propiedades! En Gltimo caso# si
no deseamos asi(nar nin(Gn alor a la propiedad# siempre
podemos colocar null# como hemos hecho nosotros en la
propiedadK!
Jefinir mtodos de clases en Mootools
Los metodos o funcionalidades asociadas a las clases# se
pueden definir de manera similar a como se definen
propiedades! Es decir# dentro de las llaes que declaran
los contenidos de la clase# con el nombre del mtodo
se(uido de la funci%n que a a contener el c%di(o del
mtodo! Stili$amos esta sinta)is para la definici%n de
mtodos8
ar Mi;laseMetodos , new ;lass 4>

metodo/8 function45>
alert 4-esto' ejecutando el mtodo-5?
@#
metodoB8 function4parametro5>
alert 4-esto' recibiendo un par*metro , - M
parametro5?
@
@5?
En el c%di(o anterior se ha creado una nuea clase llamada
Mi;laseMetodos# que tiene dos mtodos8 metodo/ ' metodoB!
;ada uno de los dos mtodos es una funci%n# cu'o c%di(o se
ha definido tambin dentro de la declaraci%n de la clase!
&or una parte# metodo/ es una funci%n que simplemente
muestra un mensaje de alerta! &or otra parte# metodoB es
una funci%n que recibe un par*metro ' escribe un mensaje de
alerta que muestra el alor de ese par*metro!
Entre cada mtodo# i(ual que ocurra entre cada propiedad#
debemos colocar una coma!
Lhora eamos la creaci%n de objetos a partir de clases de
Mootools ' la utili$aci%n de esos objetos para acceder a
sus propiedades e inocar sus mtodos!
Pnstanciar objetos es el proceso de (enerar un ejemplar de
una clase# es decir# la clase es como una declaraci%n de
una forma ' el objeto es un caso o elemento concreto que
responde a esa forma!
En este artculo amos a continuar ' desarrollar un poco
m*s los ejemplos que imos en el artculo anterior del
manual de Mootools8 ;lases en Mootools!
Los objetos se crean a partir de una clase! ;on el nombre
del objeto 4o la ariable que a a contener ese objeto que
deseamos crear5# se(uido de un si(no i(ual ' lue(o la
palabra new se(uida del nombre de la clase ' unos
parntesis!
&ara la clase que habamos declarado en el ejemplo de las
propiedades# la clase Mi;lase&ropiedades# podramos crear
instancias de esta de la si(uiente manera8
miObjeto , new Mi;lase&ropiedades45?
&odemos crear infinitos objetos a partir de una clase# cada
uno sera una instancia de la clase o un ejemplar de esa
clase!
miSe(undoObjeto , new Mi;lase&ropiedades45?
otroObjeto , new Mi;lase&ropiedades45?
&ara la clase que habamos definido en el ejemplo de los
mtodos# se crearan objetos de la si(uiente manera8
miObjetoJeOtra;lase , new Mi;laseMetodos45?
Lcceder a propiedades de objetos
&ara acceder a propiedades de los objetos utili$amos el
nombre del objeto# se(uido del operador punto -!- ' el
nombre de la propiedad!
miObjeto!propiedad/
Esta propiedad es como una ariable que contiene un alor
que est* dentro del objeto ' es particular a este!
Llamar mtodos de objetos
&odemos acceder a los mtodos o mejor dicho# inocar a los
mtodos de los objetos a partir del nombre del objeto# el
operador punto# el nombre del mtodo que queremos ejecutar
' los partesis 4como si llam*semos a una funci%n5! &ara el
ejemplo que imos a la hora de e)plicar los mtodos en
Mootools# llamaramos al primer mtodo de la si(uiente
manera!
miObjeto!metodo/45?
Jentro de los parntesis indicamos los par*metros que debe
recibir el mtodo# si es que el mtodo se declar% para
recibir par*metros!
miObjeto!metodoB4-alor del par*metro-5?
Ejemplos de creaci%n de clases con propiedades ' mtodos
Lhora amos a er el c%di(o Jaascript completo de los
ejemplos que hemos utili$ado para e)plicar tanto las
propiedades ' mtodos!
La clase que muestra la creaci%n ' uso de propiedades8
ar Mi;lase&ropiedades , new ;lass 4>
propiedad/8 B0B#
propiedadB8 -te)to-#
propiedad08 true#
propiedadK8 null
@5?
miObjeto , new Mi;lase&ropiedades45?
alert4miObjeto!propiedad/5?
&odemos er este ejemplo en marcha en el si(uiente enlace!
Lhora eamos la clase que muestra la creaci%n ' utili$aci%n
de mtodos con Mootools8
ar Mi;laseMetodos , new ;lass 4>
metodo/8 function45>
alert 4-esto' ejecutando el mtodo-5?
@#
metodoB8 function4parametro5>
alert 4-esto' recibiendo un par*metro , - M
parametro5?
@
@5?
miObjeto , new Mi;laseMetodos45?
miObjeto!metodo/45?
miObjeto!metodoB4-alor del par*metro-5?
7eamos en una p*(ina aparte este script en funcionamiento!
M*s adelante en este manual eremos casos m*s pr*cticos de
clases ' objetos# pero por ahora estas notas serir*n para
ir hacindose una idea de c%mo funciona todo el tema de
pro(ramaci%n orientada a objetos en Mootools!
Ou es un constructor ' como se crear constructores a las
clases de Mootools! Se(uimos e)plicando acerca del trabajo
con clases en Mootools!
En nuestro manual de Mootools 'a hemos empe$ado a conocer
cosas sobre el uso de clases! 6emos creado clases ' objetos
a partir de ellas# hemos conocido lo que son las
propiedades ' los mtodos# pero todaa nos queda mucho
camino para recorrer antes que consi(amos dominar las
clases en Mootools!
Lhora le toca el turno a los constructores# que en Mootools
tienen un mtodo especial de declarase! En este artculo
tambin eremos la creaci%n de una clase completa# con
funcionalidades que nos serir*n para afian$ar los
conocimientos adquiridos!
Ou es un constructor
Sn constructor en pro(ramaci%n orientada a objetos se
encar(a de resumir la tarea de iniciali$aci%n de los
objetos! Ll definir una clase podemos declarar un
constructor# opcionalmente! Si e)iste ste# en el momento
de instanciar un objeto a partir de esa clase# se reali$ar*
una llamada al constructor para iniciali$ar las propiedades
del objeto creado!
Ll constructor se le pueden pasar par*metros que se podr*n
utili$ar para iniciali$ar el objeto!
Jeclaraci%n de un constructor en Mootools
Sn constructor de una clase Mootools se declara como si
fuera un mtodo corriente# pero con un nombre fijo8
Winitiali$eX! Jicho mtodo ser* una funci%n que puede
recibir par*metros! Jentro de la funci%n se podr*n reali$ar
diersas acciones# siendo lo m*s corriente la asi(naci%n de
alores a las propiedades del objeto!
7eamos un ejemplo de clase con su constructor8
ar ;lase;onstructor , new ;lass4>
propiedad/8 null#
initiali$e8 function45>
this!propiedad/ , /?
@
@5?
;omo se puede er# el objeto se ha creado con una
propiedad# definida en la lista de propiedades con alor
null! Lue(o# en el constructor se actuali$a el alor de la
propiedad ' se le asi(na /!
6abra que remarcar aqu la utili$aci%n de WthisX# que en
lneas (enerales sire para referenciar al objeto sobre el
que se est* inocando el mtodo! ;omo hemos dicho# un
constructor se ejecuta cuando se est* creando un objeto#
durante el proceso de instanciaci%n! &or lo tanto# WthisX
serir* para hacer referencia al objeto que se est*
constru'endo!
Jado el constructor que hemos creado# todos los objetos de
la clase ;lase;onstructor# en el momento de su creaci%n#
tendr*n el alor de propiedad/ , /!
Otro ejemplo de constructor
Se(uimos las e)plicaciones con este otro ejemplo de clase
reali$ada con mootools# que tiene un constructor! El nombre
de la clase es W7ehiculoX ' hemos simplificado e ideali$ado
bastante el funcionamiento de un ehculo cualquiera!
Tendr* dos propiedades8 estado 4WJetenidoX o WEn marchaX5 '
color# confi(urable por medido del constructor! Ldem*s
crearemos dos mtodos en la clase para poner en marcha o
parar el ehculo!
ar 7ehiculo , new ;lass4>
estado8 -Jetenido-#

initiali$e8 function4color5>
this!color , color?
@#

arrancar8 function45>
this!estado , -En marcha-?
@#

detener8 function45>
this!estado , -Jetenido-?
@
@5?
7emos que la clase W7ehiculoX tiene en principio una
propiedad# de nombre WestadoX ' que el alor de la
propiedad# en el momento de declararla se ha marcado como
WJetenidoX!
Lue(o emos en constructor# en el que se recibe un
par*metro# que es el color del ehculo! El color recibido
por par*metro se asi(na a this!color! ;on ello se (enera
una propiedad nuea en el objeto# llamada WcolorX al que se
le asi(na el color recibido en el par*metro!
;on esto emos que# aparte de definir las propiedades de la
clase a la hora de declarar sus componentes# tambin se
pueden crear propiedades a medida que se ejecutan los
mtodos! ;omo el constructor siempre se ejecuta al crear el
objeto# podemos estar se(uros que todos los objetos creados
tendr*n la propiedad WcolorX# asi(nada al alor de color
definido en el par*metro!
Lue(o emos dos mtodos que simplemente actuali$an la
propiedad WestadoX# para marcar si el ehculo est* en
marcha o detenido!
&odramos crear un objeto de la clase W7ehiculoX de la
si(uiente manera8
ar mi7ehiculo , new 7ehiculo4-rojo-5?
Este objeto tendr* como propiedad WcolorX el alor WrojoX!
&or tanto# si mostramos en una caja de alerta la propiedad#
nos aparecera WrojoX8
alert 4mi7ehiculo!color5?
&odemos crear otro objeto de la clase W7ehiculoX con color
Wa$ulX# de esta manera8
ar mi7ehiculo , new 7ehiculo4-a$ul-5?
7eamos al(unos usos simples que podramos dar al objeto
creado# para mostrar el estado# ' para cambiarlo con los
mtodos arrancar ' detener!
ar mi7ehiculo , new 7ehiculo4-rojo-5?
alert 4mi7ehiculo!color5?
alert 4mi7ehiculo!estado5?
mi7ehiculo!arrancar45?
mi7ehiculo!detener45?
&odemos er el ejemplo en ejecuci%n de esta clase ehculo
' su uso en una p*(ina aparte!
7amos a er como reali$ar herencia de clases 4pro(ramaci%n
orientada a objetos5 en Mootools! ;%mo e)tender clases#
utili$ando E)tends!
Sna de las entajas de la pro(ramaci%n orientada a objetos
es la creaci%n de clases e)tendiendo las clases que 'a
tenemos! &or ese mtodo podemos crear clases que heredan
las propiedades ' mtodos 4es decir# los atributos '
funcionalidades5 de otras clases! Todo esto tiene como
entaja que podremos reutili$ar c%di(o ' hacer cosas m*s
complejas bas*ndonos en trabajos reali$ados anteriormente#
por nosotros o por otros pro(ramadores!
En este artculo del manual de Mootools de
JesarrolloNeb!com amos a er c%mo e)tender clases#
utili$ando E)tends!
Ou es la e)tensi%n de clases
&ara comprender los mecanismos o las entajas de la
e)tensi%n de clases podemos erlo con un ejemplo tpico!
&or ejemplo# pensemos en los animales! Si tuiramos que
modeli$ar en pro(ramaci%n orientada a objetos la clase
animal# le asi(naramos unas propiedades ' mtodos
cualesquiera que necesit*semos!
Otro da podramos querer definir la clase mamfero 4es un
animal que tiene unas caractersticas especficas5!
Entonces tendramos la posibilidad de reescribir todo el
comportamiento definido para los animales ' aEadirle todo
el comportamiento o caractersticas de los mamferos! &ero
eso no sera totalmente %ptimo# porque con ello estaramos
reescribiendo el mismo c%di(o que se haba pro(ramado 'a
para los animales! Estaramos haciendo el trabajo dos eces
' eso es al(o que la pro(ramaci%n orientada a objetos trata
de eitar!
La pro(ramaci%n orientada a objetos permite la herencia o
e)tensi%n de clases que en estos casos nos iene como
anillo al dedo! Jebido a que un mamfero es un animal que
tiene unas particularidades especiales# lo interesante es
definir los mamferos como una e)tensi%n de los animales!
Es decir# hacer una clase mamfero que herede las
propiedades ' mtodos de los animales! ;on ello s%lo
tendramos que definir los comportamientos '
caractersticas propias de los mamferos# apo'*ndonos en el
trabajo reali$ado anteriormente para la modeli$aci%n de los
animales!
Ls mismo# si definisemos la clase reptil# pues tambin
podramos a'udarnos e)tendiendo la clase animal! Es decir#
modeli$aramos el reptil a partir del animal 4e)tendiendo
la clase animal5 ' aEadiendo los mtodos ' propiedades de
los reptiles!
El esquema de herencia se puede llear hasta donde sea
necesario! Si al(Gn da necesitamos definir la clase perro#
pues podramos hacerlo e)tendiendo la clase mamfero! O si
definimos la clase Jo(o Llem*n podramos hacerlo a tras
de e)tender la clase perro! Etc etcY
Esto tiene arias entajas! Sna es la reutili$aci%n de
c%di(o# como 'a hemos dicho! Otra entaja sera la
encapsulaci%n! Jado que sabemos que la clase perro funciona
tal cual queremos# pues podemos crear todas clases con
distintas las ra$as de perros sin preocuparnos de c%mo
funcionan los perros# ni como funcionan los mamferos# ni
los animales# porque todas esas clases fueron creadas como
un paquete que se comprob% que funcionaba correctamente!
&ero si al(Gn da detectamos que una de nuestras clases
funciona mal# o se le desea aEadir una funcionalidad#
simplemente tenemos que editarla ' autom*ticamente ese
cambio se trasladar* a todas las clases que la e)tiendan!
;on la herencia# como se puede entender# (anamos en
reusabilidad# facilidad de mantenimiento ' creaci%n del
c%di(o! Lhora que 'a tenemos unas ideas b*sicas sobre la
herencia# amos a continar este artculo de
desarrolloweb !com# con unas e)plicaciones para aprender a
implementarla en Mootools!
E)tends en Mootools /!B
La ersi%n de Mootools /!B tiene una manera nuea de
reali$ar la e)tensi%n de clases# es decir# clases que
heredan propiedades ' mtodos de otras clases!
Tenemos que crear la clase que a a heredar como cualquier
otra clase 4con el correspondiente new ;lass5# ' dentro de
la propia clase especificaremos que se desea e)tender otra
clase con la palabra E)tends8 ' el nombre de la clase de la
que pretendemos heredar!
&or ejemplo# tenemos aqu una clase -Lnimal- de ejemplo8
ar Lnimal , new ;lass4>
initiali$e8 function4nombre5>
this!nombre , nombre?
@#
tener6ijo8 function45>
alert4-Se produce un nueo - M this!nombre5?
@
@5?
I ahora amos a hacer una clase llamada -Mamifero- que
hereda de -Lnimal-!
ar Mamifero , new ;lass4>
E)tends8 Lnimal#
initiali$e8 function4nombre# se)o# semanas<(estacion5
>
this!parent4nombre5?
this!se)o , se)o?
this!semanasQestacion , semanas<(estacion?
@#
tener6ijo8 function45>
if 4this!se)o , -hembra-5>
alert4-&asan - M this!semanasQestacion M - semanas
de (estaci%n!!! ' lle(a el parto-5?
this!parent45?
@
@#
@5?
;omo se puede er# creamos la clase como cualquier otra#
con la palabra new ;lass
ar Mamifero , new ;lass4>
!!!!
@5?
Lhora tenemos que prestar atenci%n al uso de la palabra
E)tends8 para indicar la clase de la que queremos heredar!
E)tends8 Lnimal#
Eso quiere decir que amos a e)tender la clase Lnimal#
definida anteriormente! Ll final llea una coma porque
amos a se(uir definiendo mtodos '1o propiedades
especficas de los mamferos# que son las que an a
e)tender la clase -Lnimal- para crear la clase e)tendida
-Mamifero-!
Lhora en este ejemplo amos a redefinir el constructor! La
clase -Lnimal- 'a tena su propio constructor# pero como
los mamferos son m*s complejos que los animales# tenemos
que redefinir el constructor para reali$ar la
iniciali$aci%n completa de los mamferos!
En el constructor# no obstante# se puede aproechar el
constructor de la clase de la que se hereda! Es decir# en
el constructor del mamfero podemos hacer uso del
constructor del animal# para inciali$ar las caractersticas
de los animales! &ara ello utili$amos esta lnea de c%di(o8
this!parent4nombre5? Este parent es una llamada al
constructor de la clase padre# es decir# de la clase que
estamos heredando! ;on ello podemos hacer uso del
constructor definido anteriormente para la clase -Lnimal-#
de modo que esa parte del c%di(o no tiene por qu ser
escrita de nueo!
;abe decir que el mencionado parent se puede utili$ar en
cualquier mtodo que se ha'a reescrito en la case que
hereda! &or ejemplo# la clase -Mamifero- en este ejemplo
refefine el mtodo -tener6ijo- ' dentro del c%di(o de este
mtodo# como se puede er# tambin se hace uso de parent
para llamar al mtodo -tener6ijo- pero de la clase de la
que hereda 4-Lnimal-5!
&ara utili$ar esta clase -Mamifero- podramos utili$ar este
c%di(o8
ar miMamifero , new Mamifero4-perro-# -hembra-# V5?
miMamifero!tener6ijo45?
Este ejemplo se puede er en marcha!
;on esto 'a sabemos e)tender clases en Mootools# pero para
completar este artculo de desarrolloweb!com# amos a
presentar otro ejemplo de herencia# que nos a a enir bien
para se(uir aprendiendo sobre pro(ramaci%n orientada a
objetos!
;%mo se reali$a un e)tend en Mootools /!/
Lhora amos a er unas notas sobre e)tend en Mootools /!/#
'a que la herencia se implementa de una manera distinta en
esta ersi%n del framework Jaascript! Lhora bien# incluso
utili$ando Mootools /!B endr* bien echar un ista$o a este
ejemplo para dar un impulso a nuestros conocimientos# de
cara a dominar la pro(ramaci%n orientada a objetos!
En Mootools e)iste la instrucci%n e)tend# que se aplica
sobre clases para e)tender o (enerar una clase a partir de
otra!
&ara la clase que coment*bamos antes de los animales#
podramos tener8
ar Lnimal , new ;lass4>
11propiedades ' mtodos de los animales
@5?
Lhora los mamferos se crearan as8
ar Mamifero , Lnimal!e)tend4>
11propiedades ' mtodos de los mameros
@5?
Jespus de este c%di(o# el mamfero sera la suma de las
propiedades ' mtodos de los animales 4esas propiedades '
mtodos estaran heredadas de los animales5 ' las
propiedades ' mtodos propios de los mamferos!
Ejemplo completo de herencia o e)tensi%n de clases en
Mootools
7amos a hacer un ejemplo sencillo de herencia en Mootools!
En el ejemplo amos a tener una clase que serir* de punto
de partida# llamada PnstrumentoMusical# que modeli$a
cualquier instrumento musical! Lue(o tendremos arios
instrumentos musicales que crearemos e)tendiendo la clase
PnstrumentoMusical!
6aramos la clase PnstrumentoMusical de la si(uiente forma8
ar PnstrumentoMusical , new ;lass4>
initiali$e8 function4tipo5>
this!tipo , tipo?
@
@5?
;omo emos simplemente hemos creado un constructor# que
recibe el tipo de instrumento 4si es de cuerda# percusi%n#
iento# etc5 ' lo introduce en una propiedad del objeto
llamada tipo!
Lue(o podramos crear la clase (uitarra de esta manera8
ar Quitarra , PnstrumentoMusical!e)tend4>

initiali$e8 function4cuerdas5>
this!parent4-instrumento de cuerda-5?
this!num;uerdas , cuerdas?
@#

sonar8 function45>
alert4-tran tran tran-5?
@
@5?
;omo se puede er# la clase (uitarra est* e)tendiendo la
clase PnstrumentoMusical!
L la clase (uitarra le hemos incorporado un constructor que
recibe un par*metro que es el nGmero de cuerdas que a a
tener la (uitarra! En dicho constructor estamos haciendo
una lnea que cabra e)plicar8
this!parent4-instrumento de cuerda-5?
;on esta lnea estamos llamando al mtodo initiali$e de la
clase padre que se est* e)tendiendo 4el constructor de la
clase PnstrumentoMusical5 pas*ndole -instrumento de cuerda-
como par*metro! Lue(o las (uitarras creadas tendr*n como
siempre tipo de instrumento el alor -instrumento de
cuerda-!
Ldem*s hemos hecho un mtido llamado sonar en la clase
(uitarra que hace que la (uitarra suene!
&osteriormente podramos crear la clase batera# que es
otro instrumento musical compuesto por arios elementos de
percusi%n!
ar Tateria , PnstrumentoMusical!e)tend4>
initiali$e8 function4numeroElementos5>
this!parent4-instrumento de percusion-5?
this!numeroElementos , numeroElementos?
@#

sonar8 function45>
for 4i,/? i+,this!numeroElementos? iMM5>
alert 4-Sonando elemento - M i5?
@
@
@5?
La batera tiene sus propias particularidades# pero se basa
en la clase PnstrumentoMusical para funcionar! P(ual que
ocurra con la (uitarra# e)tiende la clase
PnstrumentoMusical!
Lue(o la batera tiene un mtodo sonar# que hace ruido#
pero este es diferente del de la (uitarra!
&ara utili$ar estas dos clases podramos hacer al(o como
esto8
ar miQuitarra , new Quitarra4U5?
alert4miQuitarra!tipo5?
miQuitarra!sonar45?
ar miTateria , new Tateria405?
alert4miTateria!tipo5?
miTateria!sonar45?
&odemos er el ejemplo en marcha en una p*(ina aparte!
;on la funci%n 3e)tend45 del core de Mootools# podemos
e)tender unos objetos con las propiedades ' mtodos de
otros objetos! Tambin mostramos c%mo crear clases a partir
de e)tender otras clases con objetos!
En el artculo E)tend8 E)tendiendo clases con Mootools
e)plicamos qu es la e)tensi%n de clases# para crear clases
nueas# a partir de otras 'a creadas# a las que se le
aEaden caractersticas ' funcionalidades nueas! En este
caso amos a se(uir iendo modos de trabajo con Mootools a
la hora de e)tender clases!
E)tender un objeto con las caractersticas '
funcionalidades de otro
7amos a aprender a utili$ar la funci%n 3e)tend45 del core
de Mootools# para e)tender un objeto con otro! ;on
3e)tend45 indicamos como par*metros dos objetos ' entonces
conse(uimos que el objeto del primer par*metro se e)tienda
con las funcionalidades ' propiedades del objeto del
se(undo par*metro!
Tenemos estas dos clases de las que hemos creado dos
objetos8
ar Ordenador , new ;lass4>
cpu8 -Pntel KZU-#
hd8 -/Z: Mb-#

procesar8 function4)5>
alert4-&rocesando - M )5?
@
@5?
miOrdenador , new Ordenador45?
ar &ortatil , new ;lass4>
cpu8 -&entium-#
pantalla8 -Z::)U::-#

car(aTateria8 function45>
alert4-;ar(ando bateria-5?
@
@5?
mi&ortatil , new &ortatil45?
Son los objetos miOrdenador# de la clase Ordenador! I
mi&ortatil# de la clase &ort*til! Lmbos tienen propiedades
' mtodos# siendo que al(una propiedad 4cpu5 est* repetida
en uno ' en el otro# pero con alores distintos!
Lhora podemos hacer uso de 3e)tend45 de esta manera8
11e)tiendo el objeto miOrdenador con las propiedades '
mtodos de mi&ortatil
3e)tend4miOrdenador# mi&ortatil5?
;on esto he conse(uido que el objeto miOrdenador adquiera
las propiedades ' mtodos de mi&ortatil! Jespus de este
paso todas las propiedades ' mtodos de ambos objetos
estar*n presentes en miOrdenador ' mi&ortatil quedar*
inalterado! Ldem*s la propiedad cpu de miOrdenador ser*
i(ual al alor que haba en el objeto mi&ortatil!
&odramos ejecutar estas lneas para comprobar los alores
de los par*metros ' la presencia de los distintos mtodos!
11el campo ;&S# repetido# toma el alor del objeto del
se(undo par*metro
alert4miOrdenador!cpu5?
alert4miOrdenador!hd5?
11el campo pantalla# que era de mi&ortatil# queda ahora
dentro de miOrdenador!
alert4miOrdenador!pantalla5?
miOrdenador!procesar4-al(o-5?
11el mtodo de mi&ortatil queda tambin en miOrdenador!
miOrdenador!car(aTateria45?
;omo seEal*bamos# mi&ortatil no ser* alterado# eso lo
podemos comprobar tratando de mostrar la propiedad hd# que
no debera estar en ese objeto!
11el objeto mi&ortatil queda inalterado
alert4mi&ortatil!hd5? 11mostrar* undefined
7eamos el ejemplo en marcha en una p*(ina aparte!
E)tender una clase a tras de un objeto
Entre las posibilidades de e)tend ' la e)tensi%n de clases
en mootools# se pueden aEadir propiedades ' mtodos de un
objeto a una clase de mootools! Esto es un poco e)traEo#
puesto que no se entiende mu' bien para qu puede serir
e)tender clases con objetos# 'a que adem*s son cosas
distintas# pero el caso es que se puede ' he decidido poner
un ejemplo# por si en al(Gn momento a al(uien le sire de
utilidad!
&ara continuar con el ejemplo de clases anterior# amos
crear una nuea clase a partir de la clase Ordenador# que
se ha e)tendido con las propiedades ' mtodos del objeto
mi&ortatil!
ar Ordenador&ortatil , Ordenador!e)tend4mi&ortatil5?
;on ello tenemos la clase Ordenador&ortatil# que tiene las
propiedades ' mtodos de la clase Ordenador# m*s los que
haba en el objeto mi&ortatil!
&odemos probar ahora el funcionamiento de esta clase
Ordenador&ortatil a partir de este c%di(o8
miOrdenadorB , new Ordenador&ortatil45?
alert4miOrdenadorB!cpu5?
alert4miOrdenadorB!hd5?
alert4miOrdenadorB!pantalla5?
miOrdenadorB!procesar4-al(o-5?
;on implement podemos implementar nueas caractersticas '
funcionalidades en las clases de Mootools# modificando la
propia clase en e$ de creando nueas clases!
;ontinuamos el Manual de Mootools con e)plicaciones sobre
el implement de las clases de Mootools! Pmplement es un
mtodo de ;lass# por tanto es un mtodo que tendr*
cualquier nuea clase que creemos con Mootools 49ecordemos
que cualquier clase creada con Mootools en realidad es un
objeto de la clase ;lass5! Pmplement sire para modificar
una clase creada anteriormente# aEadiendo nueas
propiedades o mtodos!
&ara e)plicar el funcionamiento de implement podemos
utili$ar un ejemplo! Pma(inemos que tenemos la clase coche!
El coche puede tener color# modelo ' motor# lue(o a un
coche podemos arrancarlo ' pararlo# moerlo ' detenerlo!
&ero ahora ima(inemos que necesitamos complicar un poco la
clase coche# para aEadirle un nGmero de pla$as para
pasajeros ' la posibilidad de llenar o aciar dichas pla$as
con personas! Entonces lo que haremos ser* implementar en
la clase coche# 'a creada anteriormente# la propiedad de
nGmero de pla$as# as como los mtodos de ocupar '
desocupar los asientos!
;on implement no se crean nueas clases# sino que se
modifican! La clase coche habr* cambiado# porque ahora
tiene nueas propiedades ' funcionalidades# pero no se
habr* creado nin(una clase a partir de coche# sino que es
la misma clase coche la que se ha alterado!
&ara entender mejor implemet tenemos que erlo en
comparaci%n con e)tend! Mientras que con e)tend lo que se
creaban eran nueas clases que e)tendan las anteriores#
con implement lo que estamos es modificando esas mismas
clases! &or si no ha quedado todaa claro# con e)tend
cre*bamos nueas clases -hijo- que heredaban propiedades '
mtodos de clases -padre-# mientras que con implement no se
crea nin(una clase nuea -hijo-# sino que se modifica la
clase ori(inal que se est* implementando!
9eferencia8 Tenemos e)plicaciones de E)tend en el
manual de Mootools!
[&ara qu casos puede serir implement\
7o' a dar un ejemplo tpico en el que nos puede serir de
mucha a'uda el mtodo implement! Pma(inemos que tenemos la
clase -Lnimal-! Lue(o con e)tend hemos creado# a partir de
la clase animal# las clases -Mamferos- ' -Lnfibios-!
Lhora# e)tendiendo la clase -Mamferos- hemos creado la
clase -&erro- ' -Qato-! E)tendiendo -Lnfibios- hemos creado
la clase -9ana- ' -Salamandra-!
En una estructura de herencia como la que he relatado por
poner un ejemplo# ahora ima(inemos que queremos aEadir una
caracterstica o funcionalidad especfica a la clase
-Lnimal-# para que todos los animales de la jerarqua de
herencia ten(an esa nuea funcionalidad o caracterstica!
&odramos e)tender la clase -animal- ' crear un
-LnimalE)tendido-# pero esto no modificara las clases que
heredan de -Lnimal-# a no ser que modific*semos el c%di(o
de todas las clases que dependen de -Lnimal- para hacer
que# en e$ de e)tender -Lnimal-# e)tendiesen
-LnimalE)tendido-!
Esa soluci%n# que sera poco atractia# por tener que
retocar el c%di(o de una serie de clases# se puede
solucionar con implement! ;on Pmplement podramos modificar
directamente la clase -Lnimal- ' con ello conse(uiramos
que cambiase esta ' todas las clases que ten(a por debajo
en la jerarqua de herencia! Es decir# implementando esas
nueas funcionalidades o caractersticas a -Lnimal-
estaramos autom*ticamente incorpor*ndolas a los
-Mamferos-# -Lnfibios-# -&erros-# -9anas-Y
7eamos un ejemplo de Pmplement en un c%di(o Jaascript con
Mootools8
&odemos tener una clase llamada -;asa-# con un c%di(o como
el que si(ue8
ar ;asa , new ;lass4>
abierta8 false#

initiali$e8 function4habitaciones# banos5>
this!num<habitaciones , habitaciones?
this!num<banos , banos?
@#

abrir8 function45>
this!abierta , true?
alert4=casa abierta=5?
@#

cerrar8 function45>
this!abierta , false?
alert4=casa cerrada=5?
@
@5
Esta clase -;asa- tiene una propiedad -abierta- que en
principio ale -false-! Ldem*s con el constructor
initiali$e se crean dos nueas propiedades que son el
nGmero de habitaciones ' baEos! Lue(o se han creado dos
mtodos uno para abrir45 la casa ' otro para cerrar45 la
misma!
Lhora amos a er como se podra utili$ar implement para
aEadir nueas propiedades ' mtodos!
;asa!implement4>
ocupantes8 :#

ocupar8 function45>
if 4this!abierta5>
if 4this!ocupantes + this!num<habitaciones5>
this!ocupantesMM?
alert4-6e ocupado una habitaci%n-5?
@else>
alert4-"o ha' espacio para mi en la casa-5?
@
@else>
alert4-La casa est* cerrada# no puedo entrar-5?
@
@#

desocupar8 function45>
if 4this!abierta5>
if 4this!ocupantes 2 :5>
this!ocupantes..?
alert4-6e salido de la casa ' dejado una
habitaci%n libre-5?
@else>
alert4-"o ha' ocupantes en la casa-5?
@
@else>
alert4-La casa est* cerrada# no puedo salir-5?
@
@
@5?
7emos que se ha aEadido una propiedad llamada -ocupantes-#
que contiene el nGmero de ocupantes de la casa#
inicialmente siempre i(ual a cero!
Lue(o se han aEadido con implement dos mtodos# ocupar45 '
desocupar45! El mtodo ocupar primero comprueba si la casa
est* abierta ' lue(o si queda espacio en las habitaciones!
Si es as aEade uno al nGmero de ocupantes! El mtodo
desocupar45 simplemente mira si la casa est* abierta ' si
ha' ocupantes ' en ese caso resta uno a los ocupantes!
Jespus del implement# la clase -;asa- simplemente tendr*
esas nueas propiedades ' mtodos# pero se(uir* siendo la
misma clase -;asa-# simplemente modificada!
&odramos poner en marcha la clase casa de la si(uiente
manera8
ar mi;asa , new ;asa4B#/5?
mi;asa!ocupar45?
mi;asa!abrir45?
mi;asa!desocupar45?
mi;asa!ocupar45?
mi;asa!ocupar45?
mi;asa!ocupar45?
mi;asa!desocupar45?
mi;asa!ocupar45?
S%lo seEalar un pequeEo detalle# que puede ser una tontera
el comentar# pero para que quede claro! En e)tend podamos
utili$ar parent45 para hacer referencia a la clase padre
que est*bamos e)tendiendo# desde la clase hija! &ero en
implement# como no se est* creando nin(una clase hija# sino
que se modifica la clase ori(inal# no tiene sentido
utili$ar parent45!
7eamos la funci%n 3mer(e45# del core de Mootools# que sire
para combinar arios objetos ori(en en uno solo# destino#
sin alterar los objetos ori(en!
;ontinuamos con nuestro manual de Mootools# en este caso
e)plicando otra de las funciones del core de Mootools#
llamada 3mer(e45! Rorma parte# como decimos# del core de
Mootools ' nos quedaba por estudiar todaa# aunque no
tena sentido e)plicarla sin haber e)plicado antes la
creaci%n de clases ' objetos con Mootools!
Esta funci%n# 3mer(e45# sire para crear un objeto a partir
de la fusi%n de otros objetos! 9ecibe arios par*metros# en
nGmero indeterminado# pero dos como mnimo# que deben ser
objetos! 3mer(e45 deuele un nueo objeto# que es la
combinaci%n de todos esos objetos recibidos por par*metro!
Ldem*s# deja los objetos iniciales 4los eniados por
par*metro5 inalterados ' sin referenciar en el nueo objeto
resultante de la fusi%n de objetos!
;%mo funciona la fusi%n de 3mer(e45
Simplemente se crea un objeto totalmente nueo# que tiene
todas las propiedades ' mtodos de los objetos iniciales!
Ldem*s# si una propiedad o mtodo se repite en nombre#
ocurre que el elemento del Gltimo objeto fusionado es el
que prealece!
7eamos un primer ejemplo sencillo# de la fusi%n de dos
objetos8
11creo dos objetos
ar obj/ , >a8 /# b8K@?
ar objB , >a8 0# c8B@?
11fusiono los objetos
obj<fusion , 3mer(e4obj/# objB5?
11obj<fusion ale >a80# b8K# c8B@?
11muestro los alores
alert 4obj<fusion!a5?
alert 4obj<fusion!b5?
alert 4obj<fusion!c5?
;omo se puede er# la propiedad -a-# que estaba repetida en
los dos objetos# toma el alor del se(undo objeto
fusionado!
&odemos er el resultado de la ejecuci%n de este c%di(o en
una p*(ina aparte!
Lhora eamos un se(undo ejemplo de uso de 3mer(e458
7amos a crear tres clases# que hemos llamado -lechu(a-#
-filete- ' -man$ana-! Lue(o instanciaremos 0 objetos a
partir de esas clases# que combinaremos para crear un nueo
objeto -comida-! Lue(o eremos c%mo queda dicho objeto
-comida- ' c%mo los objetos iniciales han quedado
inalterados!
11creo la clase lechu(a
ar Lechu(a , new ;lass4>
color8 -7erde-#
tipo8 -9i$ada-#
sa$onar8 function45>
alert 4-Esto' lista para comer-5?
@
@5?
11creo la clase filete
ar Rilete , new ;lass4>
initiali$e8 function4animal# peso5>
this!procedencia, animal?
this!peso, peso?
@
@5?
11ahora creo la clase man$ana
ar Man$ana , new ;lass4>
color8 -Lmarilla-#
sabor8 -dulce-
@5?
11instancio 0 objetos a partir de las clases creadas
miLechu(a , new Lechu(a45?
miRilete , new Rilete4-&ollo-# :!B5?
miMan$ana , new Man$ana45?
11utili$o mer(e para combinar los tres objetos
3comida , 3mer(e4miLechu(a# miRilete# miMan$ana5?
11muestro las propiedades del objeto combinado
alert43comida!tipo5?
alert43comida!procedencia5?
alert43comida!sabor5?
11La propiedad color# que estaba repetida# toma el alor
del Gltimo objeto combinado!
11el Gltimo objeto combinado era la man$ana de color
amarilla
alert43comida!color5?
11pero los objetos iniciales est* inalterados! Muestro la
propiedad color de los mismos
alert4miLechu(a!color5?
alert4miMan$ana!color5?
&odemos er en marcha el c%di(o de este se(undo ejemplo en
una p*(ina aparte!
El m%dulo Element de Mootools es uno de los m*s
importantes# que nos permite acceder a cualquier elemento
de la p*(ina ' alterar sus propiedades! Empe$amos
conociendo el mtodo de Nindow 345!
Mootools tiene un m%dulo llamado Element# que debemos
conocer ' dominar para poder trabajar con el framework '
tener a mano cualquiera de los componentes de la p*(ina! En
nuestro Manual de Mootools hemos isto una serie de
artculos para aprender a manejar otros m%dulos de los que
componen el framework! Sin embar(o# hasta que no aprendamos
a manejar un poco el objeto Element# no podremos empe$ar a
hacer ' entender ejemplos m*s complejos! Ls que# aunque
nos ha'amos saltado al(unos temas de la documentaci%n de
Mootools# amos a empe$ar a e)plicar Element! Ia oleremos
atr*s m*s adelante para incluir e)plicaciones de otras
partes de Mootools!
Element es el m%dulo de Mootools que contiene la ma'ora de
funciones para alterar cosas de la p*(ina! La ma'ora de
los mtodos de Element siren para alterar propiedades de
los elementos que isuali$amos en nuestro nae(ador# como
pueden ser atributos ;SS# c%di(o 6TML# in'ectar c%di(o#
obtener propiedades# construirlos o destruirlos# etc!
La ma'ora de los mtodos de la clase Element son sencillos
de entender# pero debemos comen$ar por un par de mtodos
que pueden requerir al(unas e)plicaciones adicionales# que
siren para seleccionar elementos de la p*(ina!
Runci%n d%lar 345
Esta funci%n se ha incluido dentro de los mtodos del
objeto Nindow! &or ello# podremos acceder a ella
directamente desde cualquier parte del c%di(o Jaascript de
la p*(ina!
;on 345 se efectGan un par de operaciones8
Obtener un objeto Element a partir de cualquier elemento de
la p*(ina# pasando a 345 el identificador del elemento que
queramos recuperar!
En el caso que se est iendo la p*(ina en Pnternet
E)plorer# 345 reali$a una se(unda funci%n# que consiste en
aplicar al elemento seleccionado todos los mtodos de la
clase Element que aporta Mootools!
"ota8 &ara lo que a nosotros respecta# debemos saber que
con 345 obtenemos una referencia al objeto Element asociado
a un elemento de la p*(ina! "o ha' m*s]! &ero bueno# como
est* en la documentaci%n de Mootools# hemos querido tambin
mencionar que en el caso del nae(ador Pnternet E)plorer#
de manera transparente para nosotros# se aplican todos los
mtodos de Element a ese objeto al inocar a 345# porque
hasta entonces no estaran disponibles! Otros nae(adores
como Rirefo)# Opera o Safari tienen disponibles desde el
principio cualquiera de los mtodos de Element 4siempre que
ha'amos incluido el framework Mootools ' el m%dulo Element5
en cualquiera de los componentes de la p*(ina!
7eamos un ejemplo de uso del mtodo 345
&rimero eamos un elemento cualquiera de una p*(ina web8
+di id,-mibloque-2
Esto' probando Element de Mootools]
+1di2
Esto es un bloque JP7# al que le hemos colocado un
identificador id,XmibloqueX! Lhora eamos c%mo podemos
recuperarlo con Mootools como un objeto de la clase
Element!
elemento<mibloque , 34-mibloque-5?
Lhora en la ariable elemento<mibloque tenemos una
referencia a ese bloque JP7! ;omo elemento<mibloque es un
objeto de la clase Element# podemos inocar mtodos de
Element! Lun no hemos isto e)plicaciones sobre los
distintos mtodos# pero podemos mostrar un c%di(o para
alterar las propiedades ;SS de dicho bloque!
elemento<mibloque!setSt'le4-border-# -/p) solid FffZZ::-5?
elemento<mibloque!setSt'le4-paddin(-# -B:p)-5?
"o es nada complicado# simplemente debemos saber que# con
el mtodo setSt'le45 de la clase Element# podemos cambiar
las propiedades ;SS del elemento!
El mtodo d%lar tambin acepta una referencia a un
elemento# es decir# en e$ de un strin( con el
identificador del elemento# podemos pasarle una referencia
JOM del elemento deseado! &ara aclarar este punto# eamos
un c%di(o que parece un poco redundante# pero que tiene una
ra$%n de ser que e)plicar lue(o8
mielemento , document!(etElementT'Pd4-mibloque-5?
mielemento , 34mielemento5?
mielemento!setSt'le4-font.si$e-# -/C:A-5? ;on mielemento ,
document!(etElementT'Pd4-mibloque-5 obtenemos una
referencia al bloque JP7 de antes# pero a tras del mtodo
(etElementT'Pd45 del objeto document! Este mtodo forma
parte de Jaascript ' lo tiene cualquier nae(ador moderno!
Lue(o# con mielemento , 34mielemento5# lo que hacemos es
obtener un objeto Element a partir de la referencia
conse(uida en la lnea de c%di(o anterior! Esto es
necesario hacerlo# porque hasta que no ha(amos la
inocaci%n al mtodo 345# la referencia del elemento no es
un objeto Element de Mootools en Pnternet E)plorer# o mejor
dicho# no tiene aplicadas todas las funcionalidades de
Element en PE)plorer!
El c%di(o anterior se puede er en este enlace!
;omo podemos er# 345# puede ser Gtil cuando no sabemos si
en una ariable tenemos un identificador o una referencia a
un elemento del JOM! Ldem*s# es una manera m*s r*pida de
hacer el document!(etElementT'Pd45# que podemos conocer
anteriormente de Jaascript!
Se(uimos iendo el m%dulo Element de Mootools# ahora
e)plicando la funci%n 3345# que sire para obtener un (rupo
de elementos de la p*(ina!
En el captulo anterior del Manual de Mootools imos las
primeras nociones sobre el m%dulo Element# que son mu'
interesantes para comen$ar a tocar partes diertidas '
Gtiles de Mootools! Lhora amos a continuar con el mtodo
de Nindow 3345# que sire para seleccionar un (rupo de
elementos de JOM ' e)tender sus funcionalidades# para
tratarlos como objetos de la clase Element de Mootools!
Runci%n doble d%lar 3345
Esta funci%n forma parte del m%dulo Element# aunque se ha
creado# i(ual que la funci%n 345 ista en el captulo
anterior# como un mtodo de Nindow# por lo que se encuentra
siempre disponible! Sire para obtener referencias a un
(rupo ariable de elementos de la p*(ina! Lcepta una serie
de posibles par*metros de entrada .que eremos lue(o. para
especificar (rupos de elementos ' deuele siempre un arra'
con las referencias a los elementos# independientemente del
nGmero de elementos seleccionados!
El mtodo 33 se puede utili$ar de esta manera8
elementos<parrafo , 334-p-5?
Esto selecciona todas las etiquetas & de la p*(ina '
deuele un arra' con las referencias a todos estos
p*rrafos! En el c%di(o anterior (uardamos el Lrra' de
Elements deuelto una ariable que hemos llamado
elementos<parrafo!
;omo decamos# elementos<parrafo ser* un arra' de objetos
Element# independientemente del nGmero de p*rrafos que
tuiese nuestra p*(ina!
Ejemplo completo de uso de 3345
&ara entender esto# lo m*s f*cil es er un ejemplo de uso
del mtodo 3345 para er c%mo funciona!
+p2
Esto es un p*rrafo
+1p2
+p2
Esto es un se(undo p*rrafo
+1p2
+p2
Si(o con un tercer p*rrafo]
+1p2
+script2
elementos<parrafo , 334-p-5?
11alert43t'pe4elementos<parrafo55? "os mostrara arra' en
un alert
for 4i,:? i+elementos<parrafo!len(th? iMM5>
elementos<parrafoî_!setSt'le4-font.si$e-# 4/:: M
4i`C:55M-A-5?
@
+1script2
&rimero hemos escrito un c%di(o 6TML con tres p*rrafos!
L continuaci%n tenemos un script en Jaascript que hace uso
de Mootools para reco(er esos p*rrafos ' tratarlos! En
nuestro ejemplo hacemos uso del mtodo 334WpX5 para obtener
un arra' con los objetos Element correspondientes a todos
los p*rrafos!
L continuaci%n tenemos un bucle que recorre cada uno de los
elementos del arra' ' a cambiando el estilo de los mismos#
en concreto el tamaEo de la fuente! Entonces# para cada
p*rrafo le coloca un tamaEo de fuente ma'or! ;omo se puede
er# con elementos<parrafoî_ estamos accediendo a cada una
de las etiquetas 6TML de p*rrafo!
&osibles par*metros de selecci%n de elementos con 3345
Los posibles par*metros que acepta 3345 son8
Etiquetas 6TML# una o arias!
Lrra's de elementos
7ariables con elementos
;adenas de caracteres con selectores de clases ;SS# o
identificadores
Lhora eamos otra serie de ejemplos de selecci%n de
elementos de la p*(ina8
elementos , 334-p-#-a-5?
Esto seleccionara todos los p*rrafos de la p*(ina ' en las
posiciones sucesias del arra'# todos los enlaces!
elementos,new Lrra'4document!(etElementT'Pd4-p/-5#
document!(etElementT'Pd4-p0-55?
elementos<parrafo , 334elementos5?
;on estas dos lneas seleccionaramos los elementos con
identificadores Wp/X ' Wp0X! En la primera lnea creamos el
arra' con los elementos# e)trados con
document!(etElementT'Pd45# ' en la se(unda lnea obtenemos
un arra' con dichos elementos como objetos de la clase
Element!
elementos,new Lrra'434-p/-5# 34-aB-55?
elementos , 334elementos5?
Este ejemplo es similar al anterior# con la diferencia que
en este caso 'a tenamos los elementos de la clase Element#
seleccionados con 345!
elemento:, 34-p0-5?
elemento/ , 34-a/-5?
elementoB , 34-aB-5?
elementos , 334elemento:# elemento/# elementoB5?
En este ejemplo tenemos tres ariables con objetos de la
clase Element ' los seleccionamos con 33# especific*ndolos
como tres par*metros consecutios!
Lhora eamos un ejemplo con selectores! Tenemos este c%di(o
6TML8
+di id,-)-2Este di es de identificador id,)+1di2
I lue(o este script8
+script2
elementos , 334-F)-5?
for 4i,:? i+elementos!len(th? iMM5>
elementosî_!setSt'le4-color-# -blue-5?
@
+1script2
;on 334-F)-5 obtenemos el elemento que tiene identificador
id,-)X! Ser* un Gnico elemento! Lue(o con el bucle for
recorremos el arra' para cambiar el color del te)to de ese
elemento a a$ul!
Sn Gltimo ejemplo# en el que tenemos este c%di(o 6TML8
+di class,-titular-2Esto es JP7 de la clase titular+1di2
+di2Este "O es de la clase titular+1di2
+di class,-titular-2Esto es otro JP7 que es titular+1di2
7emos tres bloques JP7! El primero ' el tercero son de la
clase WtitularX! Entonces# eamos el si(uiente c%di(o
Jaascript8
+script2
elementos<titular , 334-!titular-5?
11alert43t'pe4elementos<parrafo55? "os mostrara arra' en
un alert
for 4i,:? i+elementos<titular!len(th? iMM5>
elementos<titularî_!setSt'le4-color-# -red-5?
@
+1script2
;on ello estamos seleccionando todos los elementos de la
p*(ina que son de la clase titular# con el selector
W!titularX! ;on el bucle lue(o les estamos cambiando el
color del te)to a rojo a todos los elementos!
&odemos er este Gltimo ejemplo en marcha aqu!
&or cierto# para que funcione la selecci%n de elementos por
selectores de clase ;SS debemos tener el m%dulo Selectors
car(ado en Mootools!
E)plicaciones sobre la clase Element de Mootools ' el
constructor de Element# para hacer nueos elementos en la
p*(ina!
;on el objetio de continuar nuestro aprendi$aje de
Mootools# ahora amos a er c%mo se podran crear elementos
din*micamente en la p*(ina web! Este artculo se encaja en
el Manual de Mootools# que estamos publicando en
JesarrolloNeb!com! En captulos anteriores 'a comen$amos a
e)plicar las caractersticas del m%dulo Element# que sire
para trabajar con los elementos de la p*(ina!
;uando nos referimos a los elementos de la p*(ina#
abarcamos cualquier tipo de contenido de sta! &or ejemplo#
los p*rrafos son elementos# las im*(enes o cualquier otra
cosa que coloquemos con etiquetas 6TML! Las listas# por
ejemplo# tambin son elementos! La propia lista es un
elemento 4etiqueta SL u lo5# pero tambin son elementos
cada uno de los item de la lista 4etiqueta LP5! Ls pues#
podemos entender la p*(ina como un conjunto de elementos
colocados de manera secuencial!
;on Mootools tenemos acceso a cualquiera de estos elementos
' podemos trabajar con ellos de manera din*mica! Esto
inclu'e# modificar sus propiedades# crearlos# borrarlos#
etc! &ara trabajar con un elemento de la p*(ina tan solo
tenemos que poder referirnos a l ' para ello utili$*bamos
su identificador 4atributo id5! &ara conse(uir una
instancia de la clase Element de un elemento de la p*(ina a
partir de un identificador utili$*bamos la funci%n d%lar#
relatada en el artculo anterior!
Ls que despus de esta introducci%n a lo que son los
elementos de la p*(ina# amos 'a con los objetios a cubrir
en este artculo de desarrollo web!com! "o son otros que
crear elementos din*micamente# como respuesta a ejecuci%n
de sentencias Jaascript! En adelante eremos tambin c%mo
insertarlos en la p*(ina# para que apare$can en el lu(ar
que nosotros deseemos!
;onstructor de Element
La clase Element de Mootools tiene un constructor que sire
para reali$ar las tareas de creaci%n de un elemento nueo#
a la e$ que nos ofrece herramientas para su
iniciali$aci%n! El constructor es mu' sencillo ' recibe dos
par*metros# como podemos er a continuaci%n8
miElemento , new Element4etiqueta# caracteristicas5?
Los par*metros del constructor son los si(uientes8
Etiqueta8 es el nombre de una etiqueta 6TML! &or ejemplo si
ponemos WpX estaremos creando un elemento tipo p*rrafo# o
si colocamos Wim(X estaremos creando un elemento o etiqueta
ima(en!
;aractersticas8 son una lista de caractersticas de la
etiqueta o elemento que se est* creando! Estas
caractersticas son opcionales!
&or ejemplo# podemos construir elementos de esta manera8
;onstru'o un elemento p*rrafo# etiqueta &8
ar nueoElemento , new Element 4-p-5?
;onstru'o un elemento enlace# etiqueta L# ' aparte le do'
una serie de caractersticas del enlace# para iniciali$ar
el te)to del enlace# la S9L a la que a diri(ido# ' al(unos
estilos ;SS!
ar otroElemento , new Element4-a-# >
-html-8 -te)to del enlace-#
-href-8 -url<del<enlace-#
-st'les-8 >
-back(round.color-8 -red-#
-color-8 -white-
@
@5?
Ll construir un elemento este simplemente se (enera
internamente en la memoria con Jaascript# pero no aparece
en nin(Gn lu(ar de la p*(ina! &ara incluirlo en la p*(ina
tendremos que insertar el elemento# o in'ectarlo# como
prefiramos decirlo! Todo esto lo eremos en un par de
ejemplos en el si(uiente artculo!
;%mo construir elementos e in'ectarlos en la p*(ina con
Mootools! ;onstruimos elementos con el constructor de
Element ' los insertamos en la p*(ina con el mtodo inject!
En el artculo anterior de nuestro Manual de Mootools
publicado en JesarrolloNeb!com imos c%mo trabajar con el
constructor de Element! Lhora amos a aprender a poner en
pr*ctica la construcci%n de elementos ' la inserci%n de los
mismos en al(Gn lu(ar de la p*(ina!
Esto lo eremos con un par de ejemplos! &ara conocer mejor
de antemano los objetios del artculo podemos entrar a er
el resultado de los ejemplos en marcha!
7eamos un primer ejemplo de construcci%n de un elemento con
Mootools ' la posterior inserci%n del mismo en la p*(ina8
11constru'o un nueo elemento
ar nueoElemento , new Element 4-di-5?
11Meto al(o de te)to dentro del elemento
nueoElemento!set4-html-# -Este te)to lo meto directamente
desde Jaascript-5?
11injecto ese elemento en la p*(ina
nueoElemento!inject434-micapa-55?
"ota8 &ara la reali$aci%n de este sencillo ejemplo de uso
del la clase Element de Mootools# hemos tenido que
introducir otros dos mtodos de Element# que aun no
habamos relatado en el manual de Mootools de
desarrolloweb!com8 el mtodo set45 ' el mtodo inject45!
Esperamos que no resulte mu' complicado de entrada! Je
todos modos# si(ue le'endo las si(uientes e)plicaciones# en
las que intentaremos aclarar al(o el uso de ambos mtodos!
Tener en cuenta tambin que hemos utili$ado una de las
funciones e)plicadas con anterioridad# la funci%n d%lar de
Mootools 345!
;on las anteriores lneas de c%di(o hemos hecho 0 cosas8
&rimero creamos un nueo elemento# en este caso una
etiqueta JP7! Lue(o he una llamada al mtodo set45 del
Element# en el que asi(no un poco de te)to a la etiqueta!
;on set45 podemos asi(nar todo tipo de propiedades al
elemento# entre ellas# con WhtmlX asi(namos el te)to que
ha' dentro del mismo! &or Gltimo in'ecto el elemento en la
p*(ina! &ara ello ten(o que utili$ar el mtodo inject45
indicando como par*metro el lu(ar donde se tiene que
insertar el elemento# en este caso se mete el elemento
dentro de otro elemento llamado WmicapaX!
Supon(amos que 'o tena este 6TML 4fjate que el di tiene
un id,XmicapaX para referirme a l58
+di id,-micapa-2;rear Elementos con Mootools+1di2
&ues despus de la ejecuci%n de estas sentencias de
creaci%n e in'ecci%n del nueo elemento# me quedar* la
p*(ina con el si(uiente c%di(o 6TML8
+di id,-micapa-2
;rear Elementos con Mootools
+di2Este te)to lo meto directamente desde Jaascript+1di2
+1di2
;omo emos# con el mtodo inject45 de la clase Element se
inserta el objeto que recibe el mtodo# dentro del objeto
Element que se indica como par*metro! Lunque inject45 puede
insertar los elementos en otros lu(ares# como eremos en el
si(uiente ejemplo!
Lhora amos a mostrar un se(undo ejemplo# un poco m*s
elaborado! Se trata de insertar nueos elementos a una
lista que ha' en la p*(ina! Es mu' parecido al ejemplo
anterior# con la saledad que ahora amos a utili$ar
al(unas caractersticas adicionales del constructor de
Element!
ar nueoElementoLista , new Element4-li-# >
-html-8 -Te)to del elemento-#
-st'les-8 >
-font.si$e-8 -/Kpt-#
-font.wei(ht-8 -bold-
@
@5?
nueoElementoLista!inject434-lista-5# -top-5?
;on la primera lnea de c%di(o constru'o un elemento LP 4un
elemento de lista5! En este caso hemos utili$ado el se(undo
par*metro del constructor de Element para especificar
al(unas caractersticas del elemento LP! Estas son8 WhtmlX
para indicar el te)to que a dentro de la etiqueta '
Wst'lesX para especificar al(unos atributos de estilos ;SS!
Lue(o en la Gltima lnea se in'ecta el elemento recin
creado dentro de otro elemento con id,XlistaX# pero en la
parte de encima 4por cambiar un poco# hemos utili$ado un
se(undo par*metro del mtodo inject45 para decir WtopX# con
lo que conse(uiremos que el elemento sea introducido arriba
del todo de la lista5!
Si tenamos un c%di(o 6TML como este8
+ul id,-lista-2
+li2Elemento de lista /+1li2
+li2Otro elemento de lista+1li2
+1ul2
Jespus de la ejecuci%n de estas lneas de c%di(o
obtendremos un 6TML resultante como este8
+ul id,-lista-2
+li st'le,-font.si$e8 /Kpt? font.wei(ht8 bold?-2Te)to del
elemento+1li2
+li2Elemento de lista /+1li2
+li2Otro elemento de lista+1li2
+1ul2
&odemos er ambos ejemplos relatados en este artculo de
desarrollo web !com en el si(uiente link8
7er el ejemplo en marcha!
Stili$amos la funci%n (etElement45 de Mootools para
seleccionar un elemento de la p*(ina web# que lue(o
podremos alterar para cambiar sus propiedades con otros
mtodos de Element!
Se(uimos con el Manual de Mootools de JesarrolloNeb!com!
En artculos precedentes estuimos brindando las nociones
m*s b*sicas del m%dulo Element ' amos a continuar con
ello!
Jebe haber quedado claro hasta el momento el uso de las
funciones d%lar 345 ' doble d%lar 3345# porque las amos a
utili$ar constantemente en este manual! Si no es as#
coniene repasar el uso de esas funciones en los artculos
Mtodo 345 ' Mtodo 3345!
7imos que con esas funciones se poda acceder r*pidamente a
elementos de la p*(ina a tras de sus identificadores
4atributo id del elemento 6TML5! Lhora amos a er c%mo
acceder a elementos de la p*(ina que est*n dentro de otros!
Los elementos que amos a acceder ahora no necesitan tener
identificadores para poder ser accedidos ' procesados por
medio de Mootools! &ara ello utili$aremos el mtodo
(etElement45# de cualquier objeto de la clase Element!
El mtodo (etElement45 pertenece a la clase Element# as
pues# tenemos que inocarlo sobre una instancia de la clase
Element# es decir# un elemento de la p*(ina! Los elementos
podemos conse(uirlos a tras del mtodo 345!
34-id<de<un<elemento<cualquiera-5!(etElement4-di-5?
(etElement45 recibe como par*metro el nombre de una
etiqueta 6TML ' deuele el primer espcimen de esa
etiqueta que ha'a dentro del elemento donde fue inocado
(etElement45! Esta e)plicaci%n puede parecer un poco
retorcida# pero se entender* as8 en la sentencia anterior#
(etElement45 deoler* la primera etiqueta JP7 que ha'a
dentro del elemento con id,-id<de<un<elemento<cualquiera-!
Je todos modos# como solemos hacer en desarrolloweb !com#
amos a er al(unos ejemplos de uso de (etElement45 que
terminar*n de aclarar este asunto!
Pma(inemos que tenemos un c%di(o 6TML como el que si(ue8
+bod'2
+ul2
+li2Elemento en una lista fuera del di+1li2
+li2Otro elemento fuera del di+1li2
+li2Elemento +a href,-F-2con enlace]+1a2+1li2
+1ul2
+di id,-capadi-2
+ul2
+li2Lista# elemento / +a href,-F-2enlace dentro de
elemento+1a2+1li2
+li2Lista# elemento B+1li2
+li2Otro elemento+1li2
+1ul2
+p2
Esto es un p*rrafo! &on(o un +a href,-F-2enlace dentro del
p*rrafo+1a2
+1p2
+1di2
+p2&on(o otro p*rrafo fuera del di+1p2
+1bod'2
;omo emos tenemos un cuerpo de la p*(ina# en(lobado en la
etiqueta TOJI ' dentro del mismo arios elementos o
etiquetas 6TML! 7amos ahora a trabajar con esta p*(ina#
simplemente seleccionando al(unos de estos elementos '
alterando sus propiedades# para cambiarlos un poco ' as
er que los hemos seleccionado correctamente!
&ara ello eamos esta primera funci%n8
function seleccionar&arrafoEnJi45>
mi&arrafo , 34-capadi-5!(etElement4-p-5?
mi&arrafo!set4-html-# -Meto otro te)to en el p*rrafo-5?
@
Esto lo que hace es seleccionar el primer p*rrafo 4etiqueta
&5 que ha' dentro del elemento con id,-capadi-! &odemos
er en el c%di(o 6TML anterior que haba una capa JP7 con
ese identificador8
+di id,-capadi2
Jentro contiene arias otras etiquetas# entre ellas un
p*rrafo Ls pues# seleccionamos ese primer p*rrafo con la
sentencia8
mi&arrafo , 34-capadi-5!(etElement4-p-5?
Lue(o# con la si(uiente lnea alteramos al(una de las
propiedades de ese p*rrafo! 7emos que para alterarlo
utili$amos el mtodo set45 de Element# que recibe dos
par*metros! El primero es lo que queremos alterar ' el
se(undo es el nueo contenido!
mi&arrafo!set4-html-# -Meto otro te)to en el p*rrafo-5?
La ejecuci%n de la lnea anterior for$ar* a que el
contenido del p*rrafo sea -Meto otro te)to en el p*rrafo-!
Lhora eamos una se(unda funci%n que tambin hace uso de
(etElement45 para seleccionar otro elemento!
function seleccionar&rimeraLista45>
miLista , 34document!bod'5!(etElement4-ul-5?
miLista!set 4-st'le-# -font.si$e8 /C:A? color8 red-5?
@
;on este nueo ejemplo estamos seleccionando el primer
elemento SL que ha' en el TOJI del documento 6TML! Esto nos
seleccionar* la primera lista SL que ha'a en el cuerpo de
la p*(ina! Lue(o con la si(uiente lnea cambiamos ese
elemento SL para asi(narle nueos estilos ;SS! El mtodo
set45 de la clase Element# como hemos podido comprobar '
tal como habamos isto en distintos ejemplos de este
manual de desarrollo web !com# es mu' polialente#
permitiendo alterar cualquier estilo o atributo de una
etiqueta 6TML!
&ara finali$ar este ejercicio podemos er el ejemplo en
marcha en una p*(ina aparte!
El mtodo (etElements45 de la clase Element de Mootools
permite seleccionar todos los elementos de un tipo o
etiqueta!
En el captulo anterior del manual de Mootools imos c%mo
podramos seleccionar un elemento en concreto de la p*(ina!
En este nueo artculo de JesarrolloNeb!com eremos c%mo
seleccionar todos los elementos de una misma etiqueta# por
ejemplo# todos los enlaces# todos los p*rrafos# etc! &ara
ello utili$aremos el mtodo (etElements45 de la clase
Element de Mootools!
Lntes de continuar con este artculo coniene haber ledo
el te)to anterior# en el que comentamos la funci%n
(etElement45 de Mootools# 'a que (etElements45 funciona
e)actamente i(ual# con la Gnica diferencia que deuele
todos los elementos de un tipo en un arra' ' no Gnicamente
uno!
34-elemento<de<la<pa(ina-5!(etElements4-p-5
Sna lnea como la anterior seleccionara todas las
etiquetas de p*rrafo 4-p-5 que ha' dentro del elemento
-elemento<de<la<pa(ina-!
7eremos ahora unos ejemplos de uso de (etElements45 para
terminar de entender su funcionamiento! Tendremos un c%di(o
6TML para seleccionar elementos dentro de l# que ser* el
mismo que en el artculo anterior de este manual!
7eamos este c%di(o8
function seleccionarLiEnJi45>
todosLiEnJi , 34-capadi-5!(etElements4-li-5?
todosLiEnJi!each4alterarLi5?
@
Esta funci%n# en la primera lnea# selecciona todos los
elementos -li- 4elementos de lista5 que ha' dentro de una
capa llamada -capadi-! Esto nos deuele un arra' donde en
cada una de sus casillas tenemos una instancia de cada uno
de los LP que ha' dentro del elemento -capadi-!
Se entiende entonces que la ariable todosLiEnJi es un
arra' de objetos de la clase Element# en este caso un arra'
de elementos de lista!
Lue(o# en la si(uiente lnea# estamos utili$ando un mtodo
propio de Mootools llamado each45! "os iene bien e)plicar
con detalle este mtodo each# porque todaa no lo habamos
utili$ado ni e)plicado anteriormente en desarrollo web
!com! each45 forma parte del core de Mootools ' tambin de
la clase Lrra'! En este caso estamos inocando a each sobre
un arra'! Lo que hace es ejecutar# para cada elemento del
arra'# una funci%n que se le pase por par*metro! Jicho de
otra manera# para cada elemento del arra' todosLiEnJi
amos a llamar a la funci%n alterarLi# pasando como
par*metro cada uno de los elementos del arra'!
La funci%n que se inoca con each para cada elemento del
arra' recibe como par*metro el alor del elemento actual!
Ls pues# podemos er c%mo sera esa funci%n alterarLi!
function alterarLi4elemento5>
elemento!set4-st'le-# -mar(in8 /Cp)? back(round.color8
FVVVVVV-5?
@
;omo emos# recibe por par*metro el elemento actual '
simplemente# se llama al 'a conocido mtodo set45 para
alterar ese elemento! Ls pues# alterarLi recibir* cada uno
de los elementos del arra'# esto es# cada uno de las
etiquetas LP que tenamos en el arra' que nos deoli%
(etElements45!
Lhora eamos otra funci%n interesante para ilustrar el
funcionamiento de (etElements45!
function seleccionarEnlaces45>
todosEnlaces , 34document!bod'5!(etElements4-a-5?
todosEnlaces!each4function4elemento5>
elemento!appendTe)t4- ;lick aqu]-5?
@5?
@
Lqu se puede er un uso similar de (etElements45# con el
que amos a seleccionar en un arra' todos los enlaces
4elementos de etiqueta -a-5 que ha' en el cuerpo de la
p*(ina! ;on 34document!bod'5 tenemos una referencia al
cuerpo de la p*(ina o etiqueta TOJI!
Si(uiendo el ejemplo# tiene que quedar claro que en la
ariable todosEnlaces tenemos un arra' con todos los
enlaces de la p*(ina! Lhora con todosEnlaces!each45 hacemos
llamadas a una funci%n pasando cada uno de los elementos
del arra'! En este caso# la propia funci%n est* e)presada
dentro del par*metro que recibe each! En esa funci%n
recibimos como par*metro cada uno de los elementos del
arra' ' dentro# simplemente# llamamos a otro mtodo de la
clase Element# appendTe)t45# que sire para aEadir un te)to
al elemento!
El resultado de ejecutar esta funci%n ser* la alteraci%n de
te)to de todos los enlaces de la p*(ina# a(re(ando al final
la cadena - click aqu-!
El ejemplo en funcionamiento se puede er en una p*(ina
aparte! 4hemos combinado los ejemplos de este artculo ' el
anterior# para tener en un s%lo c%di(o los usos de las
funciones (etElement45 ' (etElements455
&ara continuar con la clase Element de Mootools# ofrecemos
e)plicaciones ' ejemplos sobre los mtodos (et&ropert'45 '
set&ropert'45# add;lass45 ' remoe;lass45!
En nuestro manual de Mootools hemos presentado 'a unos
cuantos captulos sobre el trabajo con la clase Element de
Mootols! Todos estos artculos e)plican las bases del
tratamiento din*mico de cualquier elemento de la p*(ina
web! 6emos isto arias maneras de seleccionar elementos de
la p*(ina ' alterar al(unas de sus caractersticas
principales!
La clase Element es una de las m*s completas de Mootools#
que contiene decenas de mtodos para reali$ar acciones
sobre el contenido de la p*(ina! La idea es se(uir iendo
mtodos de Element# por lo menos al(unos de los m*s Gtiles#
para adquirir una soltura ma'or con el framework! ;omo
enimos haciendo en los artculos de desarrolloweb!com#
acompaEaremos las e)plicaciones con al(unos ejemplos!
Mtodos (et&ropert'45 ' set&ropert'45
Estos dos mtodos de Element nos siren para obtener '
modificar el alor de una propiedad de un elemento de la
p*(ina! ;uando hablamos de propiedad nos referimos a uno de
los atributos que se colocan en la etiqueta 6TML del
elemento!
Tenemos un enlace como este8
+a href,-http811www!desarrolloweb!com- id,-mienlace-
title,-Tu mejor a'uda para aprender a hacer
webs-2JesarrolloNeb!com+1a2
Lhora con el mtodo (et&ropert'45 amos a e)traer el alor
de una de sus propiedades# en este caso el alor del
atributo title!
34=mienlace=5!(et&ropert'4=title=5
Esto nos deoler* el alor del atributo title! Si
quisiramos obtener el alor del atributo href haramos lo
si(uiente8
34=mienlace=5!(et&ropert'4=href=5
Lhora# con set&ropert'45 amos a alterar el alor del
atributo title8
34=mienlace=5!set&ropert'4=title=# =pon(o otro title=5
&odemos er un ejemplo en marcha dedicado a este ejemplo de
seleccionar ' alterar propiedades de elementos!
Mtodos add;lass45 ' remoe;lass45
Otros de los mtodos m*s interesantes de la clase Element
son los que permiten aEadir una clase a un elemento 4una
clase de estilos ;SS .class.5 ' eliminarla!
El mtodo add;lass45 aEade una clase de estilos ;SS a un
elemento# si es que no la tuiera 'a! En el momento que se
aEade una clase se alteran los estilos del elemento para
mostrar las nueas caractersticas ;SS que ten(a esa clase
nuea!
Pma(inemos que tenemos un elemento como este8
+di id,mielemento2;ontenidos de un elemento al que o' a
aEadir ' quitar clases de ;SS 4;SS class5+1di2
I una declaraci%n de estilos# en la que definimos una clase
.class css. como esta8
+st'le t'pe,-te)t1css-2
!miclase>
back(round.color8 FUUUUUU?
color8 Fffffcc?
paddin(8 /Cp)?
@
+1st'le2
Si queremos alterar el elemento para aplicarle la clase css
anterior# haramos al(o como esto8
34=mielemento=5!add;lass4=miclase=5?
&or su parte# el mtodo remoe;lass45 lo que hace es
eliminar los estilos ;SS de una clase# es decir# hace que
el elemento no ten(a la clase ;SS que le indiquemos por
par*metro! Lhora# si queremos quitarle la clase miclase a
ese elemento haramos al(o como esto8
34=mielemento=5!remoe;lass4=miclase=5
&odemos er una p*(ina en marcha basada en este ejemplo!
En el si(uiente artculo amos a continuar iendo otros
mtodos de la clase Element de Mootools!
;ontinuamos ofreciendo e)plicaciones sobre mtodos de la
clase Element de Mootols8 empt'45# destro'45 ' clone45!
;ontinuamos con las e)plicaciones de la clase Element#
enmarcadas en el Manual de Mootools que estamos publicando
en JesarrolloNeb!com! L continuaci%n amos a er otros
mtodos interesantes de la clase Element!
Mtodo empt'45
Este mtodo sire para eliminar los contenidos que ha'a
dentro de un elemento de la p*(ina! ;uando nos referimos a
los contenidos hablamos de todo el te)to que ha'a dentro de
la etiqueta ' todas las etiquetas que pudiera tener# entre
la apertura ' cierre del elemento!
&or ejemplo# tenemos este elemento8
+di id,-mielemento- st'le,-back(round.color8 Fffcc::?
paddin(8 /:p)?-2
+p2;ontenidos del elemento# que lue(o podremos borrar]+1p2
+a
href,-http811www!desarrolloweb!com-2JesarrolloNeb!com+1a2
+1di2
Se trata de una capa JP7 que a su e$ tiene diersos
elementos dentro! Si quisiramos borrar todo lo que ha'
dentro del JP7 haramos esto8
34=mielemento=5!empt'45?
Esto no borrar* la capa -mielemento- pero s todo lo que
haba dentro!
&odemos er le ejemplo en funcionamiento en una p*(ina
aparte!
Mtodo destro'45
6emos isto que con empt'45 podemos borrar todo lo que ha'a
dentro de un elemento# pero si queremos borrar todos los
contenidos de ese elemento ' adem*s el propio elemento#
debemos utili$ar el mtodo destro'45!
7eamos ahora este elemento8
+di id,-mielemento- st'le,-back(round.color8 Fffcc::?
paddin(8 /:p)?-2
+p2;ontenidos del elemento# que amos a eliminar por
completo!+1p2
+a
href,-http811www!desarrolloweb!com-2JesarrolloNeb!com+1a2
+1di2
Si queremos eliminarlo totalmente de la p*(ina haramos
al(o como esto8
34=mielemento=5!destro'45?
Esto nos borrar* todo el elemento# es decir# l mismo '
todo lo que tuiera dentro!
&odemos er una p*(ina con el ejemplo en marcha!
Mtodo clone45
Lhora amos a er un mtodo de Element que permite clonar
cualquier elemento que ten(amos en la p*(ina! Este mtodo
recibe el elemento que se desea clonar ' deuele una copia
del mismo# en una ariable que es un objeto de la clase
Element!
&or ejemplo# tenemos un elemento como este8
+im(
src,-http811www!desarrolloweb!com1ima(es1lo(o<desarrollo<we
b!(if- id,-miima(en- 12
Esto es una ima(en que amos a clonar ' para ello haremos
lo si(uiente8
clonada , 34=miima(en=5!clone45?
;on esto tenemos una arible llamada clonada# que dentro
contiene una instancia de Element# que es una copia de la
ima(en que habamos isto antes! &ero con esto no obtenemos
nin(Gn resultado# porque el elemento ima(en simplemente
est* en una ariable Jaascript de la p*(ina ' no se est*
isuali$ando en el nae(ador# a no ser que la in'ectemos
por al(Gn lado!
clonada!inject434=miima(en=5# =after=5?
;on esto la hemos insertado dentro de la p*(ina# justo
despus de la im*(en clonada preiamente!
"ota8 'a e)plicamos c%mo in'ectar elementos en la p*(ina en
un artculo anterior publicado por desarrolloweb en este
manual! Lase el artculo8 in'ecci%n de un elemento en la
p*(ina!
&odemos er un ejemplo basado en este c%di(o para mostrar
el funcionamiento del mtodo clone45!
;omo hemos dicho en otras ocasiones# la clase Element es la
m*s rica en funcionalidades de Mootools ' aun quedan muchas
cosas que habra que conocer! Sin embar(o# para ir
aan$ando el manual de Mootools de desarrollo web !com '
por el momento# este artculo pretendemos que sea el Gltimo
en el que amos a tratar la clase Element! En el futuro
iremos mostrando otros ejemplos que con toda certe$a
aplicar*n conocimientos que hemos relatado sobre Element# '
tambin cosas nueas que nos hemos dejado en el tintero!
&rimeras nociones para trabajo con eentos en elementos
Mootools# emos el mtodo addEent de la clase Element!
Los eentos son una de las partes fundamentales de Mootools
que debemos dominar para poder hacer componentes din*micos
con Jaascript# que respondan a las acciones reali$adas por
los usuarios! En el Manual de Mootools publicado en
JesarrolloNeb!com 'a hemos isto en al(unos ejemplos c%mo
se reali$an eentos# pero aun no hemos ofrecido
e)plicaciones detalladas sobre c%mo crearlos! 6a lle(ado el
momento de ponernos en la tarea de conocer los eentos#
para crearlos ' empe$ar a hacer scripts m*s interactios!
Ls pues# amos a trabajar con la clase Element de
Mootools# para aprender a crear eentos que respondan a
acciones del usuario reali$adas sobre cualquier elemento de
la p*(ina!
&ara ello# los elementos de la p*(ina# que se modeli$an a
tras de la clase Element# tienen un mtodo llamado
addEent45# que recibe el tipo de eento ' la funci%n que
debe ejecutarse como respuesta al mismo! Lo eremos con
detalle en este artculo!
"ota8 Suponemos que 'a se conocen lo que son los eentos '
qu eentos tenemos disponibles en Jaascript para hacer
cosas como resultado de las acciones del usuario sobre la
p*(ina! Si no sabemos qu son los eentos ' cu*les tenemos
disponibles# recomendamos la lectura de nuestros manuales
de Jaascript# concretamente los artculos del manual de
Jaascript PP que tratan sobre eentos8 Eentos en
Jaascript ' los artculos si(uientes del manual!
Jefinir un eento sobre un elemento de la p*(ina
Suponemos que tenemos un elemento cualquiera de la p*(ina#
al que queremos asi(nar un eento!
+di id,-mielemento-2Este elemento+1di2
Lhora# con Jaascript podemos definir el si(uiente c%di(o
para asi(nar un eento a este elemento8
34-mielemento-5!addEent4=click=# function45 >
alert4=6as pulsado -mielemento-!!!=5?
@5?
;omo se puede er# se accede al elemento a tras de la
funci%n d%lar 435! Lue(o sobre ese elemento se inoca el
mtodo addEent# al que le pasamos dos par*metros!
=click=8 es el tipo de eento que queremos definir
4onclick# onmouseoer!!! 5 pero sin el prefijo -on-! Ls
pues# click sire para definir un eento que se desata
cuando se hace clic sobre el elemento!
function458 Lue(o se define la funci%n que se debe inocar
para reali$ar la ejecuci%n de acciones relacionadas con la
puesta en marcha del eento! Esta serie de funciones se
pueden definir a continuaci%n en el mismo c%di(o# abriendo
las llaes de la funci%n ' lue(o colocando todas las
sentencias a ejecutar cuando se ejecute el eento!
&odemos er el ejemplo en marcha en una p*(ina donde
tenemos todos los ejemplos sobre eentos que amos a er en
este artculo!
"ota8 Tambin debemos decir que lo correcto es aEadir el
eento 4es decir# llamar al mtodo addEent5 cuando se ha
car(ado 'a el JOM de la p*(ina ' est* listo para recibir
acciones! Ls que lo correcto es utili$ar el eento
domread' de window# como se puede er en este c%di(o!
window!addEent4=domread'=# function45 >
34-mielemento-5!addEent4=click=# function45 >
alert4=6as pulsado -mielemento-!!!=5?
@5?
@5?
Otro ejemplo de creaci%n de eentos en Mootools
&ara que se pueda entender mejor este sistema para la
definici%n de eentos de usuario en Mootools# amos a poner
otro c%di(o para la ejecuci%n de otro eento sobre otro
tipo de elemento de la p*(ina! En este caso amos a definir
un eento -onchan(e- sobre un campo select de formulario!
El eento onchan(e se desata cuando cambia el alor
seleccionado en el campo de selecci%n desple(able!
Tenemos este campo select de formulario8
+form2
+select id,-miselect-2
+option alue,-/-2Opcion /+1option2
+option alue,-B-2Opcion B+1option2
+1select2
+1form2
;omo se puede er# hemos colocado un identificador en la
etiqueta SELE;T# para poder referirnos a l mediante
Mootools! Lhora eamos c%mo definir un eento sobre este
campo!
34-miselect-5!addEent4=chan(e=# function45 >
alert4=6as cambiado el campo select=5?
@5?
El ejemplo es similar# con la diferencia que en este caso
hemos utili$ado el eento -chan(e- que corresponde al
mencionado eento de Jaascript onchan(e!
&odemos er este c%di(o funcionando en este enlace!
Ia hemos podido comen$ar a crear eentos con Mootools# con
addEent45# ahora amos a pasar a utili$ar una funci%n
realmente Gtil en Mootools# bind45# pero lo e)plicaremos en
el si(uiente artculo!
El mtodo bind45 de funciones Mootools sire para cambiar
el *mbito de la ariable this al inocar una funci%n!
Eentos Mootools se utili$a mucho# eremos por qu!
6a' un metodo que se utili$a constantemente a la hora de
definir eentos en Mootools! Se trata del mtodo bind45#
que pertenece a la librera "atie . Runction de Mootools!
&ara los que lle(uen a este artculo del Manual de Mootools
de JesarrolloNeb!com# decirles que deben leer antes el
artculo anterior# en el que da una primera introducci%n a
los eentos de Element!
&ara qu sire Tind45 en funciones Mootools
Tind45 es un mtodo de funciones Mootools que permite
cambiar el *mbito de la ariable this cuando se inoca una
funci%n! ;omo sabemos =this= es una ariable que apunta al
objeto que recibe una llamada a un mtodo! Jicho de otra
manera# this es una referencia al objeto sobre el que se
est* ejecutando un mtodo!
Los que dominen# aunque sea li(eramente# la pro(ramaci%n
orientada a objetos bien deben saber que la ariable this
es mu' importante# porque nos permite hacer cosas con el
objeto con el que se trabaja! Lhora bien# cuando llamamos a
un eento que estamos definiendo en un objeto# se inoca a
una funci%n distinta# donde el *mbito de la ariable this
'a no e)iste! Ls que en un eento no tendramos acceso a
la ariable this# con lo que no podramos acceder al objeto
que ha recibido el eento!
;on bind45 en una funci%n podemos definir el alor de la
ariable this dentro de esa funci%n! Jicho alor# que se ha
de car(ar en this durante la ejecuci%n de la funci%n# se
debe escribir en la propia declaraci%n de la funci%n!
function mifuncion45>
11!!! codi(o de la funcion
this!loquesea45 11this toma el alor de la ariable
contenido<para<this
@!bind4contenido<para<this5
Ls# cuando se ejecute esa funci%n# la ariable
contenido<para<this se podr* acceder a tras de la
ariable this!
Jefinici%n de un eento con bind
Lhora# por lo que respecta a eentos# como deca
anteriormente en este te)to publicado en desarrollo web
!com# al codificarse en una funci%n distinta# ha' eces que
tendremos que utili$ar bind45# para decirle a la funci%n
del eento el alor de la ariable this que debe tener!
Se(uramente lo podamos er mejor con un ejemplo! Tenemos
este enlace8
+a href,-jaascript8oid4:5- id,-mienlace-2Enlace+1a25
Lhora amos a definir un eento sobre el enlace# que se
ejecute cuando el usuario coloca el rat%n sobre el mismo!
34-mienlace-5!addEent4=mouseoer=# function45 >
this!set4-st'le-# -back(round.color8 FffZZ::?-5?
@!bind434-mienlace-55
5?
;omo se puede er# a la hora de declarar la funci%n#
despus de la llae de cierre# se ha colocado el mtodo
bind45 pasando como par*metro una ariable# 34-mienlace-5#
que es una referencia al enlace que recibe este eento!
Lue(o# en el c%di(o de la funci%n# se puede apreciar c%mo
se utili$a la ariable this# que tiene el alor de lo que
se pas% en bind45# es decir# el enlace sobre el que se
ejecut% el eento! L ese enlace se le cambia una
declaraci%n de estilo css para ponerle un color de fondo!
Lhora amos a er un eento similar# para ejecutar acciones
cuando se retira el rat%n del enlace8
34-mienlace-5!addEent4=mouseout=# function45 >
this!set4-st'le-# -back(round.color8 transparent?-5?
@!bind434-mienlace-55
5?
Este ejemplo se puede er en marcha en una p*(ina aparte!
Ls pues# hemos aprendido a utili$ar la funci%n bind45 a la
hora de definir eentos# para que las funciones que
codifican los eentos sepan qu se debe tener en la
ariable this! 9ealmente el ejemplo que hemos puesto no
dice mucho sobre la erdadera importancia de bind45# pero a
lo lar(o del manual de Mootools de desarrolloweb!com
eremos m*s ejemplos sobre bind45 mucho m*s utiles '
fundamentales# con lo que se podr* practicar sobre este
asunto!
;ontinuamos iendo la clase Element!Eent de Mootools# que
contiene un mtodo llamado fireEent que sire para lan$ar
eentos de cualquier elemento de la p*(ina!
En nuestro Manual de Mootools hemos e)plicado 'a al(unas de
las claes del trabajo con eentos! &ero todaa ha'
al(unos detalles que se deben comentar ' mostrar ejemplos
de c%di(o para dominar el sistema de eentos!
En (eneral# 'a imos como asociar un eento a un elemento
de la p*(ina ' tambin c%mo utili$ar el mtodo bind45 para
conse(uir cambiar el *mbito de la ariable this cuando se
est* codificando el comportamiento de un eento! Lhora
eremos c%mo podemos disparar un eento de un elemento de
la p*(ina# autom*ticamente# sin necesidad que el usuario
produ$ca el eento!
Mtodo fireEent de Element!Eent
El mtodo fireEent45 sire para ejecutar un eento de un
elemento# es decir# lan$ar un eento que pertenece a un
elemento de la p*(ina# sin que el usuario ha'a tenido que
reali$ar nada con ese elemento!
Este mtodo se inoca sobre el elemento de la p*(ina del
que se quiere ejecutar el eento 4un bot%n o elemento de
formulario# un enlace# una capa JP7 o lo que sea5 ' recibe
arios par*metros!
Tipo de eento8 el nombre del eento que se desea lan$ar!
&ar*metros para el eento8 uno o arios par*metros que se
tienen que pasar a la funci%n que ejecuta el eento! Si es
m*s de un par*metro# se tienen que indicar en un arra'!
9etardo8 nGmero de milise(undos que se tiene que ejecutar
el eento!
Lqu tenemos el primer ejemplo de este artculo de
JesarrolloNeb!com de los dos que amos a er sobre el
mtodo fireEent# en el que amos a tener un bot%n 6TML!
Lue(o crearemos un eento -click- para ese bot%n ' lo
inocaremos con fireEent!
Este sera el bot%n8
+input t'pe,-button- alue,-pulsar- id,-miboton-2
Lhora eamos el c%di(o Jaascript con Mootools para crear
el eento click ' lan$arlo con fireEent8
window!addEent4-domread'-# function45>
34-miboton-5!addEent4-click-# function45>
alert4-Eento click en el bot%n-5?
@5?

34-miboton-5!fireEent4-click-5?

@5?
6abra de erse que estamos obli(ados a utili$ar addEent
del eento domread'# para ase(urarnos que este c%di(o se
ejecuta cuando el JOM est* listo!
Lue(o se puede er que con addEent del eento click sobre
el objeto 34-miboton-5 4el elemento 6TML bot%n# que tena
el id,-miboton-5 (eneramos el correspondiente eento para
cuando se ha(a clic en el bot%n!
Lue(o# con 34-miboton-5!fireEent4-click-5? lan$amos el
eento -click-# que ser* como si el usuario hubiese hecho
clic sobre el bot%n!
Pmportante sobre fireEent
El mtodo fireEent sire para ejecutar cualquier tipo de
eento de los que se pueden escribir con los manejadores de
eentos normales de Jaascript8 onclick# onload!!! &ero
ojo# s%lo podremos lan$ar eentos que ha'an sido creados o
declarados a partir del mtodo addEent de Mootools ' no
eentos que se ha'an declarado escribindolos con el
correspondiente atributo 6TML de eento 4onclick#
onmousedown# etc!5 en la propia etiqueta del elemento !
;abe decir adem*s sobre fireEent que se puede ejecutar
sobre los objetos window ' document# con lo que se pueden
lan$ar eentos sobre la entana del nae(ador o sobre el
objeto documento# como si el usuario los hubiese producido!
;on la e)cepci%n del eento -domread'-# que realmente s%lo
se ejecuta cuando el JOM est* listo!
Se(undo ejemplo de fireEent
7eamos un se(undo ejemplo# para acabar de mostrar las
posibilidades de los eentos en Mootools que podemos poner
en marcha con fireEent! En este ejemplo queremos mostrar
la utili$aci%n de otros par*metros de fireEent# a la e$
que abrimos las puertas a la creaci%n de eentos
personali$ados en nuestras aplicaciones Jaascript!
;omo se haba dicho antes# se pueden indicar otros
atributos a fireEent# uno es un par*metro que se le pasa a
la funci%n que se encar(a de procesar el eento ' el otro
un retardo para la ejecuci%n del eento!
Ldem*s# en este se(undo ejemplo amos a crear un mtodo
personali$ado# que no tiene nada que er con cualquier
eento de los que e)isten en Jaascript! El eento lo hemos
creado personali$ado s%lo por hacer una prueba ' lo hemos
llamado -desarrolloweb-!
Tememos un elemento de la p*(ina# en este caso un enlace8
+a href,-http811www!desarrolloweb!com- id,-mienlace-27oler
a JesarrolloNeb!com+1a2
I ahora un c%di(o Mootools para crear el eento
personali$ado -desarrolloweb-# que creamos como si fuera
uno de los eentos normales de Jaascript8
34-mienlace-5!addEent4-desarrolloweb-# function4al(o5>
alert4-Este eento me lo he inentadoan- M al(o5?
@5?
7emos ahora que la funci%n que procesa el eento tiene un
par*metro llamado -al(o- que se muestra en la caja de
alerta!
Lhora podemos ejecutar este eento con fireEent45# de esta
manera8
34-mienlace-5!fireEent4-desarrolloweb-# -parametro que le
paso a la funci%n-#/:::5?
;omo se puede er# se ejecuta el eento personali$ado
-desarrolloweb-# se le pasa un par*metro con una cadena de
te)to ' se hace un retardo de / se(undo 4/:::
milise(undos5!
El ejemplo se puede er en marcha en una p*(ina aparte!
;omo se ha podido er# con Mootools es f*cil codificar
eentos ' lan$arlos 4ponerlos en marcha5 desde el propio
c%di(o jaascript# como si hubiera sido el propio usuario
el que hubiese producido el eento con sus acciones sobre
los elementos de la p*(ina!
Sn ejemplo se uso de Mootools para recopilar ' afian$ar los
conocimientos istos hasta ahora en el manual de Mootools!
7amos a crear un te)tarea que cuenta los caracteres que se
han escrito por el usuario!
6a lle(ado el momento de reisar todos los conocimientos
adquiridos hasta el momento en el manual de Mootools! 6emos
isto bastantes cosas 'a sobre el manejo de este framework
Jaascript# as que estamos en disposici%n de crear un
primer ejemplo que e)plota muchas de las funcionalidades
que estamos aprendiendo! Este ejemplo nos dar* una isi%n
m*s (lobal sobre el buen uso de Mootools ' su potencia# a
la e$ que nos a'udar* a afian$ar los distintos
conocimientos que hemos aprendido por separado!
"uestro ejemplo ser* la construcci%n de un campo te)tarea
que ten(a al lado un te)to donde se muestra el nGmero de
caracteres que tiene! Lo amos a construir por medio de
pro(ramaci%n orientada a objetos# tal como se debe hacer en
Mootools# con lo que podremos reutili$ar el c%di(o
f*cilmente para otros pro'ectos donde queramos utili$ar
este -te)tarea inteli(ente-! Otra de las entajas ser* que
podremos tener coniiendo arios campos te)tarea que
cuenten sus caracteres en la misma p*(ina# cu'a
implementaci%n no requiera duplicar c%di(o Jaascript# '
sin que interfieran entre si las cuentas de caracteres de
los distintos te)tarea del documento!
&odemos er una p*(ina con el funcionamiento de este
ejemplo en marcha!
Pnsisto# la idea de este primer ejemplo (lobal de Mootools
no es estudiar o depurar la funcionalidad de este -te)tarea
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*(inas!
;rear una clase con Mootools para implementar una
funcionalidad
La manera correcta de proceder para hacer un script con
Mootools es crear una clase# de pro(ramaci%n orientada a
objetos# que implemente las funcionalidades con las que
queremos dotar a nuestra p*(ina! Esa clase podremos
instanciarla para crear objetos Mootools que se encar(uen
de automati$ar los procesos din*micos! Ls podremos
instanciar cualquier nGmero de objetos para que realicen
estas funcionalidades por si solos ' podremos
desentendernos de su complejidad ' reutili$ar el c%di(o
donde lo deseemos!
Las bases para hacer todo esto las hemos aprendido 'a en
este manual# as que no debera dar mucho problema entender
el c%di(o ' si no es as# simplemente sera releer los
artculos en los que se habla de las clases de Mootools !
La clase tiene un constructor# a la que tendremos que pasar
los par*metros para personali$ar el comportamiento de ese
objeto ' asociarlo con los elementos de la p*(ina con los
que queramos que trabaje! L estas alturas deberamos
conocer tambin c%mo crear un constructor de la clase!
En el constructor iniciali$aremos todos los componentes de
los objetos una e$ sean creados! En este caso tendremos
que recibir el identificador 4id5 del te)tarea a contar
caracteres ' entonces crearemos toda la estructura para
mostrar caracteres ' crear los eentos para contarlos
cuando el usuario los escriba!
En el resto de la clase tendremos que crear los mtodos que
estimemos necesarios para implementar las funcionalidades
de cuenta de caracteres!
Ls pues# amos a mostrar 'a el c%di(o de la clase ' lue(o
iremos comentando las diferentes partes!
11creo una clase para conse(uir que un te)tarea ten(a un
contador de caracteres
ar Te)tarea;ontador , new ;lass4>
11defino un constructor# que recibe el id del te)tarea
initiali$e8 function4idTe)tarea5>
11recupero el elemento te)tarea con la funci%n dolar
this!te)tarea , 34idTe)tarea5?
11creo un elemento S&L" para mostrar el contador
this!campo;ontador , new Element 4-span-# >-class-8
-estilocontador-@5?
11in'ecto el contador despus del te)tarea
this!campo;ontador!inject4this!te)tarea# -after-5?

11creo un eento para el te)tarea# ke'up# para cuando
el usuario suelta la tecla
this!te)tarea!addEent4-ke'up-# function45>
11simplemente llamo a un mtodo de esta clase que
cuenta caracteres
this!cuenta;aracteres45?
@!bind4this5
5?

11llamo al mtodo que cuenta caracteres# para
iniciali$ar el contador
@#

11creo un mtodo para contar los caracteres
cuenta;aracteres8 function45>
11simplemente escribo en el campo contador el nGmero
de caracteres actual del te)tarea
this!campo;ontador!set4-html-# -"Gmero caracteres8 -
M this!te)tarea!alue!len(th5?
@
@5?
El c%di(o de la clase est* comentado para que se pueda
saber qu se hace en cada paso! &ero o' a dar una serie de
referencias donde podemos entender ' aprender todo lo que
hemos hecho en el script!
7er el artculo que habla sobre las clases!
7er el artculo que habla sobre constructores!
7er el artculo sobre la funci%n d%lar!
-estilocontador-@5?
En estas lneas hemos creado un elemento de te)to donde
mostraremos la cuenta de caracteres! Lue(o lo hemos
colocado en el c%di(o de la p*(ina despus del te)tarea#
con lo que aparecer* cerca# posicionado tal como lo
indiquemos en el estilo ;SS de la clase -estilocontador-!
7er el artculo de construcci%n de elementos en la p*(ina!
7er el artculo de in'ecci%n de elementos en la p*(ina!
11creo un eento para el te)tarea# ke'up# para cuando el
usuario suelta la tecla
11simplemente llamo a un mtodo de esta clase que cuenta
caracteres
@!bind4this5
Lqu se est* definiendo un eento# que asociamos con el
objeto te)tarea del objeto# para que cuando se escriba al(o
en el campo se actualice la cuenta de caracteres mostrada
al lado del te)tarea! 4El eento -ke'up- se actia cuando
el usuario pulsa una tecla ' lue(o la suelta# pero s%lo en
el momento de soltar la tecla5! &ara procesar el eento se
crea una funci%n que simplemente llama a otro mtodo de la
clase donde se reali$a la cuenta de caracteres! 7er el
artculo donde se habla de eentos! 7er el artculo donde
se habla de la funci%n bind45
11llamo al mtodo que cuenta caracteres# para iniciali$ar
el contador
El constructor termina llamando al mtodo
cuenta;aracteres45# con lo que se iniciali$ar* el contador
de caracteres# por si en el te)tarea 'a hubiera al(Gn te)to
escrito preiamente!
11simplemente escribo en el campo contador el nGmero de
caracteres actual del te)tarea
this!campo;ontador!set4-html-# -"Gmero caracteres8 - M
this!te)tarea!alue!len(th5?
@
En este mtodo se actuali$a el campo de conteo# cambiando
su propiedad 6TML para mostrar la cuenta actual de
caracteres! 7er artculo donde se e)plica el mtodo set de
un elemento de la p*(ina!
Eso ha sido todo el c%di(o de la clase Te)tarea;ontador!
Lhora sera bueno er el c%di(o 6TML que tendremos en la
p*(ina para crear dos -te)tareas inteli(entes-8
+te)tarea id,-te)tocontador-2+1te)tarea2
+br2
+br2
+te)tarea id,-otro- cols,C: rows,Z2Este te)tarea tiene
te)to escrito!!!+1te)tarea2
S%lo necesitamos fijarnos en los Pds de los te)tarea# que
utili$aremos para referirnos a ellos a la hora de crear los
objetos para que funcione la cuenta de caracteres!
&or Gltimo eamos el c%di(o para instanciar los objetos
Te)tarea;ontador# una e$ que el JOM de la p*(ina est*
listo para recibir modificaciones din*micas por Jaascript!
11creo un eento para cuando est* listo el JOM de la p*(ina
11creo el objeto Te)tarea;ontador# pasando el
identificador del te)tarea que se pretende contar
caracteres!
te)to , new Te)tarea;ontador4-te)tocontador-5?
otro , new Te)tarea;ontador4-otro-5?
@5?
7er el artculo sobre el eento -domread'- del objeto
window que utili$amos para hacer cosas cuando el JOM est*
listo! 7er tambin el artculo que habla sobre la
instaciaci%n ' trabajo con objetos en Mootools
El c%di(o completo de este ejercicio
+html2
+head2
+title2Te)tarea que cuenta caracteres escritos+1title2
+script src,-mootools./!B!/.core.'c!js-
+st'le t'pe,-te)t1css-2
span!estilocontador>
displa'8 block?
mar(in.top8 0p)?
width8 /B:p)?
font.si$e8Zpt?
@
+1st'le2
+script2
-estilocontador-@5?

11creo un eento para el te)tarea# ke'up# para cuando
el usuario suelta la tecla
11simplemente llamo a un mtodo de esta clase que
cuenta caracteres
@!bind4this5
5?

11llamo al mtodo que cuenta caracteres# para
iniciali$ar el contador
@#

11simplemente escribo en el campo contador el nGmero
de caracteres actual del te)tarea
this!campo;ontador!set4-html-# -"Gmero caracteres8 -
M this!te)tarea!alue!len(th5?
@
@5?
11creo un eento para cuando est* listo el JOM de la p*(ina
11creo el objeto Te)tarea;ontador# pasando el
identificador del te)tarea que se pretende contar
caracteres!
te)to , new Te)tarea;ontador4-te)tocontador-5?
otro , new Te)tarea;ontador4-otro-5?
@5?
+1script2
+1head2
+bod'2
+form2
+te)tarea id,-te)tocontador-2+1te)tarea2
+br2
+br2
+br2
+te)tarea id,-otro- cols,C: rows,Z2Este te)tarea tiene
te)to escrito!!!+1te)tarea2
+1form2
+br2
+br2
+a
href,-http811www!desarrolloweb!com-2http811www!desarrollowe
b!com+1a2
+1bod'2
+1html2
&odemos er el ejemplo en una p*(ina aparte!
Espero que con este ejercicio# asimilando los conocimientos
que 'a habamos adquirido en el manual de Mootools# podamos
entender el proceso completo de implementaci%n ' puesta en
marcha de clases Gtiles para hacer efectos en la p*(ina!
6emos publicado otro ejemplo pr*ctico que serir* para
practicar con todos los conocimientos adquiridos hasta este
momento en el Manual de Mootools# se trata de otro ejemplo
contado paso a paso ' con referencias para hacer una
utilidad de Tips simplificada! Tambin puedes er numerosos
ejemplos pr*cticos en el Taller de Mootools!
;aractersticas e)tendidas de los Lrra's con Mootools# con
diersas funciones ' mtodos para reali$ar cosas sobre
tablas!
;on lo que hemos isto hasta este momento en el Manual de
Mootools deberamos haber aprendido a desarrollar nuestros
propios scripts sencillos para hacer diersos efectos
din*micos# adem*s de utili$ar la pro(ramaci%n orientada a
objetos para reutili$ar el c%di(o de los componentes
Mootools en otras p*(inas web o en otras aplicaciones! Ll
menos hemos e)plicado en el manual para que cualquier
persona# con unos conocimientos de niel medio sobre
Jaascript# pueda saber lo suficiente de este framework
para desenolerse por si solo ' perder el miedo a los
habitualmente crpticos pro(ramas que se (eneran con
Mootools!
Ls que esperamos hasta este punto que las e)plicaciones
ha'an serido# por un lado# para clarificar la pro(ramaci%n
con Mootools ' por otro# para er que no es tan complicado
' est* al alcance de nuestras habilidades! Sin embar(o#
debo aclarar que aun nos falta bastante para poder dominar
el framework Jaascript# o al menos haber repasado sus
principales funcionalidades!
&ara poder e)plicar todo de una manera sencilla ' adelantar
lo suficiente para que nuestros conocimientos sean
suficientes como para poder hacer ejemplos interesantes#
nos hemos dejado una serie de temas en el camino que
tambin resultan# sin lu(ar a dudas# esenciales para poder
trabajar con Mootools! Es el caso del presente artculo# en
el que amos a e)plicar las funcionalidades aan$adas de
los Lrra's en Mootools!
Mootools dispone de una serie de libreras# denominadas
"atie# que ofrecen funcionalidades a distintos tipos '
estructuras de datos# como los arra's# funciones# nGmeros#
cadenas# clases hash# etc! Estos modulos "atie e)tienden
las caractersticas b*sicas de Jaascript sobre estos
elementos ' nos endr*n mu' bien para ahorrar c%di(o en
nuestros scripts ' facilitar la pro(ramaci%n!
Ls que# si 'a estamos familiari$ados con los Lrra' de
Jaascript comprobaremos que Mootools nos ofrece bastantes
a'udas para poder trabajar con estas estructuras de datos!
Si no estamos familiari$ados es i(ual# porque aprenderemos
aqu a trabajar con ellos con las facilidades propias de
Mootools!
&rimero amos a er c%mo podemos definir un arra' ' sus
contenidos de una manera c%moda# que es propia de
Jaascript 4no hace falta Mootools para esto58
frutas , ^-pera-# -man$ana-# -ua-_?
O un arra' de dos dimensiones# se podra definir as8
opciones&rincipales , ^
^-&ortada-#-http811www!(uiarte!com1-_#
^-Quas de Quiarte!com-#
-http811www!(uiarte!com1(uias1-_#
^-Otras secciones-#
-http811www!(uiarte!com1secciones1-_#
^-Sericios-# -http811www!(uiarte!com1sericios1-_#
^-;omunidad-# -http811www!(uiarte!com1usuarios1-_
_?
Lhora amos a aprender al(unas funciones de Lrra' que se
utili$an bastante en Mootools! &ero antes debemos saber que
los arra's en Jaascript se utili$an como si fueran clases#
con lo cual# tienen sus propios mtodos ' propiedades!
Mootools lo que hace es definir una serie de mtodos
adicionales para los Lrra'# unos m*s Gtiles que otros!
Mtodo de arra' each
El mtodo each permite iterar con todos los elementos de un
arra'# para hacer cualquier cosa que necesitemos con cada
uno de los item del arra'! Este es un mtodo bastante
importante# porque nos permite reali$ar cosas con los
elementos del arra' con mu' poco c%di(o! &or ejemplo8 +p2
frutas , ^-pera-# -man$ana-# -ua-# -naranja-# -ciruela-_?
frutas!each4function 4alor# indice5>
alert4-En el ndice del arra' - M indice M - ha' el
alor - M alor5?
@5?
;omo emos# el arra' tiene un mtodo each que recibe como
par*metro una funci%n que se a a ejecutar con cada uno de
los elementos del arra'! Esta funci%n recibe como par*metro
dos ariables# una el alor del elemento actual del arra'
con el que se est* iterando ' por otra parte# el ndice del
arra'! Ls que dentro de la funci%n realmente no tenemos
acceso al arra' propiamente dicho sino al alor ' al ndice
Gnicamente del elemento que estamos iterando!
Este c%di(o puede ponerse en marcha en una p*(ina aparte!
Lhora bien# each# recibe una se(unda ariable# llamada
-bind-# que es opcional! Si lo deseamos# por medio de esa
ariable podemos eniar un objeto que podr* utili$arse
dentro de la funci%n de each con la referencia -this-! Esta
ariable this se utili$a en entornos de pro(ramaci%n
orientada a objetos# para referirse al objeto que est*
recibiendo un mtodo! "osotros 'a e)plicamos un poco para
qu sera el bind en el artculo Stili$aci%n de bind45 en
los eentos Mootools # la filosofa es la misma# pero aun
as amos a mostrar un ejemplo en el que sera interesante
utili$ar el bind en los each de arra'!
ar Sumatorio , new ;lass4>
initiali$e8 function4arra'"umeros5>
this!suma , :?
arra'"umeros!each4function4alor5> this!suma M,
alor?@# this5?
@
@5?
numeros , ^B:# B# 0# C# /:# C_?
miSumatorio , new Sumatorio4numeros5?
alert 4miSumatorio!suma5?
En este c%di(o hemos creado una clase sumatorio# que recibe
un arra' en el constructor ' suma los alores de ese arra'#
(uardando el resultado en una propiedad -suma-! ;omo
podemos er# en el constructor se utili$a each para
recorrer los alores del arra'! El mtodo each recibe dos
par*metros# uno la funci%n que tiene que ejecutarse para
cada alor ' otro el mencionado bind# que en este caso
sera this# para que dentro de la funci%n del each se pueda
acceder a este mismo objeto que se est* constru'endo!
Ls pues# dentro de la funci%n del each# cuando hacemos
esta instrucci%n8
this!suma M, alor?
Mootools sabe que ha' en this# porque se le pas% como
par*metro al propio each al ser inocado!
Otra cosa que podemos er aqu es que la funci%n eniada
como par*metro al each recibe s%lo el par*metro -alor-# 'a
que el par*metro indice no lo necesito# porque no pienso
hacer nada con los ndices!
&odemos er este se(undo ejemplo en marcha!
Sin duda# el mtodo m*s interesante de los arra's es each#
pero e)isten otros muchos mtodos mu' Gtiles para trabajo
con arra's! 7amos a er al(unos ejemplos!
Mtodo include de Lrra'
Este mtodo# que se inoca sobre un Lrra'# recibe un alor
' lo inclu'e dentro del arra'# si es que no estaba antes!
Es decir# primero comprueba si ese alor e)iste dentro del
arra' ' si no e)iste lue(o crea una nuea casilla en el
arra' ' coloca ese alor en ella!
&or ejemplo podemos er este c%di(o# para ilustrar su
funcionamiento8
capitales , ^-Madrid-# -&ars-# -Tuenos Lires-_?
capitales!include4-Lima-5?
11ahora el arra' tiene los elementos Madrid-# -&ars-#
-Tuenos Lires-# -lima-
capitales!include4-Madrid-5
11Madrid 'a estaba# lue(o no inclu'e nada
capitales!each4function 4alor5>
alert4alor5?
@5?
&odemos er este ejemplo en una p*(ina aparte
Mtodo inde)Of de Lrra's Mootools
Este mtodo sire para saber el ndice que ocupa un
determinado elemento en un arra'# si es que e)iste! El
mtodo deuele el ndice donde se encuentre el alor que
reciba por par*metro ' ./ en caso que ese elemento no
e)ista!
^-Mercurio-# -Tierra-# -7enus-_!inde)Of4-7enus-5
11esto deuele B
^-Mercurio-# -Tierra-# -7enus-_!inde)Of4-Marte-5
11en este caso inde)Of deuele ./
Mtodo e)tend de Lrra'
Este mtodo sire para aEadir todos los elementos de un
arra' a otro arra'# sin mirar sus contenidos ' sin comparar
si estaban o no antes esos contenidos en el arra' donde se
an a aEadir!
&odemos er e)tend en funcionamiento en el si(uiente
c%di(o8
capitales , ^-Madrid-# -&ars-# -Tuenos Lires-_?
nueas;apitales , ^-;iudad de M)ico-# -Madrid-_?
capitales!e)tend4nueas;apitales5?
11ahora el contenido del arra' es -Madrid-# -&ars-#
-Tuenos Lires-# -;iudad de M)ico-# -Madrid-
capitales!each4function 4alor5>
alert4alor5?
@5?
;omo puedes er el arra' que recibe el mtodo e)tend se
actuali$a con los alores contenidos en el arra' que se
recibi% por par*metro en e)tend!
&uedes er este ejemplo en marcha!
;onclusi%n sobre "atie Lrra' en Mootools
Lo cierto es que estas son s%lo al(unas de las utilidades
aEadidas por Mootools a los Lrra's# pues tienen otra serie
de mtodos interesantes para hacer cosas como obtener el
Gltimo alor de un arra'# obtener un alor aleatorio#
limpiar un arra'# filtrarlo# aciarlo# etc!
En la documentaci%n de Mootools podemos encontrar m*s
detalles sobre los mtodos e)istentes para Lrra' ' ejemplos
de uso! "osotros qui$*s m*s adelante ampliemos estas
informaciones o bien las dejaremos para el momento que las
utilicemos en ejemplos!
Jiersos mtodos que se pueden aplicar sobre una funci%n#
para e)tender ' mejorar las posibilidades de trabajo con
funciones en Mootools!
Mootools trae consi(o arias mejoras para el trabajo con
funciones# basadas en arios mtodos que se pueden inocar
directamente sobre funciones# como si estas fueran objetos!
Las mejoras de funciones siren para que ten(an al(unos
comportamientos especiales# como retardar la ejecuci%n de
la misma durante un tiempo o cambiar el *mbito de la
ariable this cuando se ejecuta una funci%n!
;abe aclarar que en el Manual de Mootools que estamos
publicando en JesarrolloNeb!com 'a hemos utili$ado
funcionalidades relacionadas como los mtodos "atie
Runction 4como el mtodo bind# que introdujimos cuando
hablamos sobre los eentos5# pues para poder e)plicar este
framework Jaascript hemos preferido no se(uir
estrictamente el orden de materias que est* publicado en la
documentaci%n! "o obstante# olemos atr*s en la
documentaci%n para e)plicar las mejoras que trae Mootools
sobre las funciones habituales de Jaascript!
En este artculo amos a e)plicar al(unos de estos mtodos
especiales para funciones# al menos lo que hemos isto m*s
Gtiles en nuestra e)periencia de trabajo con Mootools! Sin
embar(o# para obtener una referencia de todos los mtodos
que incorpora Mootools a las funciones debemos consultar la
documentaci%n en el ep(rafe -"atie Runction- de la
documentaci%n de Mootools!
Mtodo bind en funciones Mootools
El mtodo bind45 sire para cambiar el *mbito de la
ariable -this- dentro de una funci%n! ;omo debemos saber#
this hace referencia al objeto que recibe un mtodo en
Mootools ' en (eneral en todos los len(uajes de
pro(ramaci%n orientada a objetos!
El mtodo bind45 no ejecuta la funci%n# sino que deuele
otra funci%n modificada donde est* alterado el *mbito de la
ariable this! Ls que para hacer bind sobre una funci%n
necesitamos la funci%n ori(inal ' deuele una funci%n
modificada!
6a' dos par*metros que recibe bind45# el primero es el
objeto cu'a referencia contendr* la ariable this dentro de
la funci%n modificada! El se(undo es opcional# que contiene
el par*metro que recibe la funci%n ori(inal! Si la funci%n
reciba dos par*metros# entonces tenemos que indicarlos por
medio de un arra'!
El uso se puede er ilustrado en este ejemplo8
11defino una clase# sobre la que podremos crear objetos de
esta clase
ar 6ombre , new ;lass4>
initiali$e8 function4nombre# edad5>
this!nombre , nombre?
this!edad , edad?
@
@5?
11creo un objeto de la clase 6ombre
mi6ombre , new 6ombre4-pepe-# -BZ-5?
11declaro una funci%n que recibe dos par*metros
11esta es la que llamo funci%n ori(inal en mis
e)plicaciones
function dameJatos4dato/# datoB5>
alert 4dato/ M - - M datoB5?
11ha(o uso de la ariable this# que o' a definir con el
mtodo bind
alert4this!nombre M - - M this!edad5?
@
11ahora ejecuto el mtodo bind sobre la funci%n creada
antes
11me deoler* una funci%n modificada# donde he definido el
alor de this dentro de la misma
11como par*metros de bind eno8 el objeto que har*
referencia la ariable this ' los par*metros de la funci%n
ori(inal
ar definoOtraRuncionTind , dameJatos!bind4mi6ombre#
^-hola-# -esto' probando-_5?
11ejecuto la funci%n modificada
definoOtraRuncionTind45?
El ejemplo en si no es mu' Gtil# pero nos sire para darnos
cuenta del modo de uso de bind ' c%mo podemos asi(nar un
alor a -this- dentro de esa funci%n# que debe ser un
objeto!
6a' que fijarse que el mtodo bind sobre la funci%n no la
ejecuta# sino que deuele una nuea funci%n que podemos
ejecutar m*s tarde si lo deseamos! Si queremos ejecutar
directamente la funci%n modificada# podemos hacerlo
a(re(ando unos parntesis 4apertura ' cierre5 al final de
la llamada al mtodo bind! Esto lo podemos er en el
si(uiente ejemplo8
11creo un nueo objeto de la clase 6ombre
mi6ombreB , new 6ombre4-Julio-# -0K-5?
11creo una nuea funci%n
function dameLno"acimiento45>
anoLctual , new Jate45!(etRullIear45?
alert 4-LEo de nacimiento8 - M 4anoLctual . this!edad55
@
11inoco el mtodo bind ' ejecuto directamente la funci%n
modificada
dameLno"acimiento!bind4mi6ombreB545? &odemos er al(Gn
detalle adicional de bind45# adem*s de obserar de una
manera m*s clara uno de los posibles usos de la misma en el
artculo Stili$aci%n de bind45 en los eentos Mootools!
&odemos er el ejemplo de bind en funciones Mootools!
Mtodo dela' de funciones Mootools
El mtodo dela' es mu' Gtil para crear diersos tipos de
efectos con Mootools# adem*s resultar* bastante m*s clara
su utili$aci%n en ejemplos simples como los que estamos
iendo en este artculo!
Supon(amos que tenemos una funci%n como esta8
function con9etardo45>
11actuali$o el te)to de la capa id,-mensaje-
34-mensaje-5!set4-html-# -ha pasado un tiempo!!!-5?
@
Esta funci%n# cuando se ejecute# actuali$ar* el te)to que
ha'a en el elemento con id,-mensaje-! Lhora eamos c%mo
llamarla# con un retardo de 0 se(undos!
con9etardo!dela'40:::5?
;on el mtodo dela' de las funciones Mootools ha(o que se
ejecute la funci%n despus de un retardo especificado como
par*metro en milise(undos!
Ls pues 'a sabemos que el mtodo dela' recibe como primer
par*metro el nGmero de milise(undos que debe esperarse
antes de ejecutar la funci%n! &ero ha' otro par de
par*metros opcionales que tambin acepta el mtodo dela'45!
El se(undo par*metro que podemos indicar es un bind#
parecido al que hemos isto antes# es decir# podemos eniar
a dela' un objeto que se podr* acceder por medio de la
ariable this dentro de la funci%n cu'a ejecuci%n estamos
retardando! El tercer par*metro# tambin opcional# es el
par*metro que debe eniarse a la funci%n del retardo 4la
funci%n a retardar requiere m*s de un par*metro# debemos
indicarlos en forma de arra'!
Lhora eamos este ejemplo8
11declaro una funci%n que recibe 0 par*metros
11El primero es un elemento de una p*(ina!
11El se(undo es un color# para colocar de fondo
11' el tercero un nueo te)to para colocar como te)to del
elemento!
11la funci%n cambia el color de fondo de ese elemento de la
p*(ina
function cambiaRondo4elemento# color# te)to5>
elemento!set4>
-html-8 te)to#
-st'les-8 >
-back(round.color-8 color
@
@5?
@
Esta funci%n# como hemos podido comprobar# recibe 0
par*metros# as que si queremos inocarla con un retardo#
tendremos que escribir los alores en la llamada al mtodo
dela'45# como se puede er a continuaci%n!
11utili$o dela' para inocar a la funci%n pasados C
se(undos
cambiaRondo!dela'4C:::# null# ^34-mielemento-5# -FffZZ::-#
-Este es el nueo te)to!!!-_5?
;omo en la funci%n cambiaRondo45 no utili$o la ariable
this para nada# puedo pasarle un null en el par*metro de
bind! "otemos adem*s c%mo se indican los tres par*metros de
la funci%n en una estructura de arra'!
Otra cosa importante8 Lnular un retardo! dela' deuele un
identificador del retardo que se ha ejecutado# para poder#
si se necesita# cancelar ese retardo con la funci%n
3clear45 del core de Mootools! &or ejemplo8
mi9etardo , cambiaRondo!dela'4/:::# null# ^34-mielemento-5#
-F::VVff-# -Te)to!!!-_5?
3clear4mi9etardo5?
&odemos er el ejemplo en marcha sobre los retardos en
funciones Mootools aplicados con el mtodo dela'!
Mtodo periodical para funciones Mootools
El mtodo periodical de las libreras "atie Runction de
Mootools es mu' parecido a dela'45# con la caracterstica
que periodical hace una llamada peri%dica a la funci%n a la
que pasamos el mtodo# para que se ejecute cada cierto
tiempo# de manera indefinida hasta que el usuario sal(a de
la p*(ina o bien se anule la inocaci%n peri%dica con la
funci%n 3clear45!
7eamos una funci%n que llea una cuenta de las eces que se
inoca# que combinada con una llamada peri%dical cada
se(undo# nos a a serir para llear una cuenta de se(undos
que pasan!
11defino una ariable (lo(al como cuenta# que iniciali$o a
cero
ar cuenta , :
11ahora defino una funci%n
function cuentaSe(undos45>
11aEado / a los se(undos
cuenta MM?
11actuali$o el te)to de la capa id,-mensaje-
34-mensaje-5!set4-html-# cuenta5?
@
Lhora eamos c%mo podramos definir con periodical una
llamada a esta funci%n cada se(undo que pasa8
11creo una llamada peri%dica a esa funci%n
ar retardo&eriodico , cuentaSe(undos!periodical4/:::5?
El mtodo periodical recibe un par*metro que es el tiempo
en milise(undos que tiene que esperar entre llamadas!
Ldem*s# recibe opcionalmente otros dos par*metros# i(ual
que haca dela'45# el bind que se desea reali$ar para
sustituir el alor de this dentro de la funci%n ' los
par*metros que se enan a la funci%n a inocar
peri%dicamente!
El retardo de una llamada periodical tambin se puede
anular con 3clear45!
3clear4retardo&eriodico5?
Si queremos anular este retardo peri%dico pasados unos
se(undos# podemos utili$ar dela'45 de esta manera8
anula&eriodico , function45>
3clear4retardo&eriodico5?
@
anula&eriodico!dela'4CC::5
7eamos para acabar c%mo se era este ejemplo de periodical
de Mootools!
;on estas nociones podremos e)plorar un poco m*s el uso de
funciones con Mootools!
"umber es una librera de Mootools para trabajo con
nGmeros# que aporta pocas pero Gtiles funcionalidades como
redondeos# acotaciones ' conersiones de formatos!
En este artculo amos a er otra de las libreras que el
framework Jaascript Mootools pone a disposici%n de los
desarrolladores# en este caso para trabajar con nGmeros!
;omo 'a sabemos# Mootools tiene una serie de libreras que
nos simplifican ciertas tareas habituales a la hora de
hacer aplicaciones web enriquecidas del lado del cliente '
en este caso# para los nGmeros nos aporta al(unos mtodos
interesantes que podemos utili$ar en nuestros scripts!
&ara el que no cono$ca Mootools o lle(ue aqu directamente#
ha' que decir que este artculo forma parte del Manual de
Mootools# que estamos publicando en JesarrolloNeb!com!
"umber forma parte de las libreras "atie# que se llaman
as porque son e)tensiones de los objetos natios del
len(uaje Jaascript! En el caso de "umber# est*n aportando
nueas funcionalidades a la clase "umber de Jaascript que
'a habamos comentado en el Manual de Jaascript PP
Los mtodos de "umber se pueden inocar sobre ariables que
almacenan alores numricos o sobre literales escritos
entre parntesis! 7eremos estas dos maneras en los ejemplos
si(uientes!
Mtodos Mootools de "umber
Lhora eamos r*pidamente una lista de los mtodos que aEade
Mootools a la clase "umber! &odemos erlos todos# porque
son bastante pocos8
Mtodo limit4min# ma)5
Este mtodo sire para acotar un nGmero! Jeuele ese mismo
nGmero que recibe el mtodo# pero acotado entre el alor
mnimo ' m*)imo! 7eamos al(unos ejemplos8
11creo una ariable con un alor numrico
ar mi"umero , 0B:?
11ahora sobre esa ariable inoco el mtodo limit
alert 4mi"umero!limit4:# BC:55
Tambin podra inocar el mtodo sobre literales numricos#
ponindolos entre parntesis8
4B/5!limit4/:# B:5 11deuele B:
40!Z5!limit4/# /:5 11deuele 0!Z
&uedes er este ejemplo en marcha!
Mtodo round4decimales5
Este mtodo sire para redondear nGmeros# pensado
especialmente para redondeos de nGmeros en coma flotante
con Jaascript!
9ecibe el nGmero de decimales con el que se desea hacer el
redondeo! &uede no recibir nada# entonces redondea el
nGmero quit*ndole todos los decimales# como si pas*semos el
alor : 4cero5 al mtodo round!
alert 4B/!/BB5!round4B5? 11deuele B/!/B
40!Z5!round45? 11deuele K
4D!05!round4/5? 11deuele D!0
El mtodo round45 de Mootools tambin permite que se le
pase como par*metro un nGmero ne(atio! En ese caso
redondea tambin la parte entera del nGmero# por ejemplo8
4/0BV5!round4./5? 11deuele /00:
4/0BV!0K05!round4.B5? 11deuele /0::
En este enlace puedes er una p*(ina con el ejemplo de
round!
times4funcion ^# bind_5
Este mtodo sire para ejecutar una funci%n un nGmero de
eces i(ual al nGmero sobre el que inocamos el mtodo#
pas*ndole a dicha funci%n el nGmero actual de la iteraci%n!
La iteraci%n que se reali$a con el mtodo times45 empie$a
desde el nGmero : ' a hasta el nGmero que recibe el mtodo
./! Esto quedar* claro iendo este ejemplo8
4K5!times4alert5?
Este c%di(o hace que se inoque la funci%n alert K eces#
pasando como par*metro en cada una de las ejecuciones# los
nGmeros del : al 0! Entonces primero har* un alert4:5 lue(o
alert4/5# alert4B5 ' por Gltimo alert405! Este ejemplo# que
he co(ido de la propia documentaci%n de Mootools# me da un
error en Pnternet E)plorer# por lo que he hecho otro
ejemplo que funciona bien en todos los nae(adores# para
que lo podamos probar!
4U5!times4function escribe4numero5>
document!write4=+di st'le,-font.si$e8= M numero M
=em?-2Escribo el nGmero = M numero M =+1di2=5?
@5?
;omo se puede er# se ha escrito el c%di(o de la funci%n en
el propio par*metro del mtodo times45! La funci%n recibe
un alor numrico como par*metro# que es el nGmero de la
actual ejecuci%n!
Esto (enerara un c%di(o como este8
+di st'le,-font.si$e8 :em?-2Escribo el nGmero :+1di2
+di st'le,-font.si$e8 /em?-2Escribo el nGmero /+1di2
+di st'le,-font.si$e8 Bem?-2Escribo el nGmero B+1di2
+di st'le,-font.si$e8 0em?-2Escribo el nGmero 0+1di2
+di st'le,-font.si$e8 Kem?-2Escribo el nGmero K+1di2
+di st'le,-font.si$e8 Cem?-2Escribo el nGmero C+1di2
;abe decir tambin que el mtodo times45 puede recibir un
se(undo par*metro# que es el bind# osea# el alor que
tendra la ariable this dentro de la funci%n inocada por
times45! Las utilidades de bind ' la necesidad de usarlo
habitualmente 'a las hemos isto arias eces en este
manual# por ejemplo en los artculos "atie Runction
Mootools ' Stili$aci%n de bind45 en los eentos Mootools
El ejemplo puede erse en marcha en este enlace!
4En el ejemplo no se e bien el te)to colocado con el
estilo font.si$e8 :em# o bien en Rirefo) no se e nada#
porque al definir un tamaEo de letra :em simplemente no se
aprecia nada 'a que el tamaEo es i(ual a cero! &ero ha' que
remarcar que el bucle que reali$a el mtodo times45 empie$a
siempre en cero!5
Mtodos toPnt45 ' toRloat45
Estos mtodos siren para hacer conersiones de nGmeros '
cadenas a tipo numrico# tanto enteros como en coma
flotante! Estos mtodos se pueden inocar tanto sobre
nGmeros como sobre cadenas# deoliendo i(ualmente nGmeros!
"ota8 cuando inocamos toPnt45 o toRloat45 sobre cadenas#
en realidad estamos inocando unos mtodos distintos
creados en la librera "atie Strin( de Mootools ' no los
mtodos que inclu'e la librera "atie "umber# que es la
que estamos iendo en este artculo# pero el uso es
e)actamente i(ual! &uedes er un artculo donde se e)plican
las libreras "atie Strin( de Mootools!
El mtodo toRloat45 deuele nGmeros en coma flotante# pero
si lo inocamos sobre un nGmero entero# deuele ese mismo
nGmero entero# pues no lo altera para ponerle decimales#
tal como podemos er en el primero ejemplo!
4U5!toRloat45 11deuele U
-//!B-!toRloat45 11deuele //!B
El mtodo toPnt45 deuele nGmeros enteros! Ouiere decir
que# si el nGmero sobre el que se inoca es un float# lo
conierte a entero quit*ndole los decimales que tuiera!
4B!VZ5!toPnt45 11deuele B
-0!:B-!toPnt45 11deuele 0
&uedes er los ejemplos de conersiones en una p*(ina
aparte!
Estos son todos los mtodos que aEade Mootools a la clase
"umber de Jaascript# como deca# son escasos# pero
bastante Gtiles a primera ista!
Runcionalidades que aEade Mootools a la clase Strin(#
natia de Jaascript# para trabajo con cadenas de
caracteres!
Se(uimos con nueas entre(as del Manual de Mootools de
JesarrolloNeb!com# en este caso con e)plicaciones sobre las
libreras "atie Strin( de este interesante framework
Jaascript!
Ori(inalmente Jaascript 'a inclu'e una clase Strin(# que
tiene un jue(o de funciones bastante rico# que 'a
e)plicamos en el artculo ;lase Strin( en Jaascript! "o
obstante# Mootools adem*s contiene al(unas funcionalidades
realmente Gtiles que nos a'udar*n a reali$ar tratamientos
con ariables de tipo cadena en nuestros scripts!
En este artculo amos a comentar al(unos de los mtodos
que incorpora Mootools a la clase Strin(! "o los eremos
todos# porque son bastantes ' para consultas de referencia
completa siempre est* la propia documentaci%n del
framework!
Mtodo contains4strin(^# separator_5
Este mtodo sire para saber si una cadena contiene un
strin( pasado como par*metro! &or ejemplo8
miStrin( , -abc-?
alert 4miStrin(!contains4-b-55 11alerta true
alert 4miStrin(!contains4-)-55 11alerta false
Opcionalmente se puede indicar un se(undo par*metro con un
separador# que tiene que encontrarse en la cadena separando
el strin( que estamos buscando! Esto nos puede serir para
buscar palabras enteras dentro de una cadena# por ejemplo8
miStrin( , -abc-?
alert 4miStrin(!contains4-b-# - -55 11alerta false# porque
se ha encontrado el strin( -b- pero no est* separado por el
car*cter - - 4espacio en blanco5!
7eamos ahora otros ejemplos que a'udar*n a entender esto de
los separadores!
miStrin(B , -a b c-?
alert 4miStrin(B!contains4-b-# - -55 11alerta true
alert 4miStrin(B!contains4-a-# - -55 11alerta true
miStrin(0 , -a bc-?
alert 4miStrin(0!contains4-b-# - -55 11alerta false 4porque
b no est* separado por el espacio5
Los ejemplos anteriores se pueden er en una p*(ina aparte!
Mtodo trim45
Ese mtodo elimina los espacios en blanco que ha' al
principio ' al final de una cadena! Jeuele la misma
cadena sobre la que se inoca el eento# pero sin los
espacios en blanco del principio ' el final
- cadena con espacios -!trim45 11esto deuele la cadena
-cadena con espacios-!
Mtodo r(bTo6e)4ârra'_5
Este mtodo sire para conertir un strin( que contiene la
codificaci%n de colores 9QT con alores decimales a una
cadena que especifica colores con alores en he)adecimal!
7iene bien para hacer scripts que hacen uso de colores e
iteraciones para ariar esos colores!
El mtodo espera recibir una cadena de esta forma8
-r(b4/D#0K#C/5- ' entonces te deuele al(o como esto8
-FeaCK:b-! &or ejemplo8
-r(b4BCC#BCC#BCC5-!r(bTo6e)45? 11deuele Fffffff
Ldem*s# el mtodo tambin permite especificar un par*metro
boleano# para definir que no queremos que nos deuela un
strin( con el alor 9QT en he)adecimal# sino un arra' con 0
casillas en el que tenemos en cada una el alor de 9# Q# T
de ese color por separado! &or ejemplo8
-r(b40K#BBD#/CC5-!r(bTo6e)4true5 11deuele el arra' ^-BB-#
-e0-# -Vb-_
Tambin sire para conertir cadenas que ten(an un alor de
color en 9QTL!
"ota8 el r(ba es un formato para especificar colores con
los tpicos alores 9QT m*s un cuarto alor para el canal
alpha# que indica la opacidad de ese color! El cuarto
par*metro 4alpha5 admite alores entre cero ' cien# siendo
el : totalmente transparente ' el alor /:: totalmente
opaco!
-r(ba40K#BBD#/CC#:5-!r(bTo6e)45? 11deuele -transparent-
Lhora# hemos hecho un pequeEo script Mootools que hace uso
del mtodo r(bTo6e)45 para ilustrar c%mo puede a'udarnos en
el tratamiento de colores# reali$ando un bucle para ir
componiendo diferentes alores 9QT en decimal# que lue(o
pasaremos a sus correspondientes 9QT en he)adecimal# para
poder utili$arlos en un atributo 6TML para definir el color
de fondo de unas tablas!
for 4i,:? i+,BCC? iM,C5>
mi;olor , -r(b4- M i M -#- M i M -#- M i M -5-?
mi;olor , mi;olor!r(bTo6e)45?
document!write4=+table b(color,-= M mi;olor M
=-2+tr2+td2= M mi;olor M =+1td2+1tr2+1table2=5?
@
Esto (enerara un c%di(o 6TML como este8
+table b(color,-F::::::-2+tr2+td2F::::::+1td2+1tr2+1table2
+table b(color,-F:C:C:C-2+tr2+td2F:C:C:C+1td2+1tr2+1table2
+table b(color,-F:a:a:a-2+tr2+td2F:a:a:a+1td2+1tr2+1table2
!!!
Este ejemplo de uso de r(bTo6e)45 se puede er en este
enlace!
;on esto hemos isto arios ejemplos de mtodos "atie
Strin( de Mootools# osea# mtodos que e)tienden la clase
natia de Jaascript Strin(! 9epito que ha' muchos otros
mtodos de "atie Strin( que no hemos tratado en este
artculo# por lo que se recomienda se(uir la referencia
dada en la documentaci%n de Mootools!
6ash de Mootools nos ofrece funcionalidades mu' Gtiles para
acceso a propiedades ' mtodos de objetos# para anali$ar
objetos ' recorrer todas sus propiedades o iterar con sus
elementos!
Mootools tiene lo que se llaman las e)tensiones natias
4natie5# que implementan nueas funcionalidades en objetos
natios de Jaascript! En este artculo del Manual de
Mootools e)plicaremos las mejoras de 6ash "atie# que sin
duda al(Gn da os serir* de utilidad!
Los objetos de Mootools son mu' Gtiles ' hemos isto que
este framework Jaascript mejora muchos mecanismos de
Jaascript para trabajar con ellos# como crear clases#
instanciar objetos con constructores# etc! &ero ha' al(unas
cosas que como pro(ramadores podramos necesitar hacer con
ellos# pero que no est*n soportadas en un principio en los
objetos normales! &or ejemplo# [;%mo podramos hacer una
funci%n que recorriese todas las propiedades de un objeto#
sin saber a priori cu*ntas ' que nombres tienen\ La
respuesta pasa por utili$ar "atie 6ash!
Las libreras "atie 6ash de Mootools proporcionan una
manera adicional# con a'udas para acceder al contenido de
los objetos! &ara poner en marcha 6ash en Mootools
necesitamos utili$ar el constructor de la clase 6ash# al
que le pasaremos un objeto! Este constructor nos deoler*
un objeto de la clase 6ash creado a partir del objeto
normal que hemos pasado al constructor!
Este objeto 6ash es como un mapa del propio objeto 4tabla
hash5# que dispone adem*s de diersos mtodos como por
ejemplo set45 o (et45# que siren para editar o recibir el
alor de una propiedad pasada por par*metro! Otro ejemplo
de mtodo interesante es each45# que funciona de manera
parecida al each de Lrra's# pero para recorrer todas las
propiedades de un objeto ' obtener tanto el nombre de la
propiedad como el alor!
Lhora amos a er un par de ejemplos simples en Mootools
para utili$ar las libreras "atie 6ash!
Mtodos Set45 ' Qet45 de 6ash
7amos a crear un objeto 6ash ' a partir de l accederemos a
sus mtodos set45 ' (et45!
El mtodo set45 sire para crear nueas propiedades o
mtodos# o bien actuali$ar el alor de propiedades o
mtodos e)istentes! L set45 tenemos que pasarle como
par*metros el nombre del mtodo o propiedad ' el alor que
queremos introducir! &or su parte# el mtodo (et45 sire
para obtener el alor de una propiedad o mtodo# que recibe
simplemente como par*metro el nombre de la propiedad o
mtodo que queremos acceder!
&ara definir un objeto 6ash tenemos que utili$ar el
constructor de la clase# pasando como par*metro el objeto
que queremos conertir en 6ash!
11defino un objeto hash
mi6ash , new 6ash4>
-pera-8 -erde-#
-ua-8 -morada-
@5?
Sna e$ que tenemos nuestro objeto 6ash# podemos utili$ar
sobre l los mtodos set45 ' (et45# de la si(uiente forma!
11obten(o el alor de la propiedad -pera-
alert4mi6ash!(et4-pera-55?
Stili$ando el mtodo (et45 obtenemos en este caso el alor
de la propiedad -pera-# que en el objeto 6ash creado
anteriormente# imos que era -erde-!
Lhora eamos c%mo utili$ar set45 para crear una nuea
propiedad en el objeto 6ash!
11creo una propiedad -tomate- con alor -rojo-
mi6ash!set4-tomate-# -rojo-5?
;on esto crearamos una propiedad con nombre -tomate- '
alor -rojo-!
Lhora podramos er el alor de la propiedad -tomate- con
la sentencia8
11obten(o el alor de la propiedad -tomate-
alert4mi6ash!(et4-tomate-55?
Lcceder a todos los mtodos ' propiedades de un objeto con
"atie 6ash
;omo se(undo ejemplo de 6ash eremos c%mo hacer un bucle
con el mtodo each para recorrer todos los elementos de un
objeto# sin necesidad de conocer los nombres de los mtodos
' propiedades que contiene! Esta tarea puede ser bastante
Gtil para recorrer todos los elementos de cualquier objeto
en Mootools ' no cono$co otra manera de hacerlo si no es
por 6ash!
El mtodo each de 6ash es mu' parecido al each de Lrra'#
con la Gnica diferencia que each en 6ash recibe una funci%n
con un par*metro adicional! El esquema de uso de each es el
si(uiente8
each4function 4alor# clae# este6ash5>
11codi(o de la funci%n
@# bind5?
"ormalmente# para reali$ar una iteraci%n con each# tal como
se e)plic% para los Lrra's# tenemos que especificar una
funci%n! bsta recibe los par*metros8 alor 4alue5 ' clae
4ke'5 del elemento actual de la iteraci%n# m*s un par*metro
adicional en el caso del each sobre objetos 6ash# que es el
propio objeto 6ash que recibe el mtodo!
Ldem*s# en caso que lo necesitemos# al mtodo each tambin
podemos pasarle una ariable -bind-# que es el alor que
tendr* this dentro del c%di(o de la funci%n!
Lhora eamos el c%di(o del ejemplo8
11defino un objeto cualquiera
ar enlace, new Element4-a-# >-html-8 -te)to enlace-#
-href-8 -http811www!desarrolloweb!com-@5?
11creo un hash de ese objeto
mi6ash , new 6ash4enlace5?
11ha(o un recorrido de todas sus propiedades ' mtodos
mi6ash!each4function 4alor# clae# este6ash5>
11para cada elemento del objeto# muestro el nombre ' el
contenido
document!write4clae M -8 - M alor M -+br2-5?
@5?
;omo se puede er# he creado un objeto cualquiera! &ara
hacer mis pruebas ' por hacer al(o distinto# he optado por
construir un objeto de la clase Element de Mootools# que
tiene un buen nGmero de mtodos ' propiedades para listar!
Lue(o he creado un objeto 6ash a partir del objeto Element#
utili$ando el constructor de 6ash ' pas*ndole como
par*metro el objeto de la clase Element creado en el
anterior paso!
&or Gltimo he reali$ado el recorrido con each a todos los
mtodos ' propiedades del objeto! En cada iteraci%n de each
simplemente escribo en la p*(ina el nombre de la clae ' el
alor que contiene!
&uedes er este ejemplo en marcha en una p*(ina aparte!
Las libreras "atie 6ash tienen al(unas otras utilidades
para acceder ' anali$ar objetos de manera aan$ada!
"osotros hemos isto s%lo un par de ejemplos sencillos#
pero al menos 'a sabemos que 6ash tiene al(unas utilidades
para trabajo con objetos que pueden enirnos bien en al(Gn
momento!
Sna clase que nos a'uda a reali$ar tareas aan$adas con
eentos en Mootools! E)plicaremos la clase "atie Eent#
c%mo utili$arla ' c%mo parar la ejecuci%n ' propa(aci%n de
eentos!
En este artculo amos a e)plicar "atie Eent ' diersos
usos para trabajos diersos con eentos que nos proporciona
esta clase de Mootols! En el Manual de Mootools de
JesarrolloNeb!com 'a e)plicamos al(unas cosas para la
(esti%n de eentos en elementos de la p*(ina web! Esas
e)plicaciones ser*n fundamentales para comprender el
presente artculo# pero habamos dejado de lado al(unos
detalles que e)plicaremos ahora# al tratar la clase "atie
Eent!
En Mootools# cuando definimos un eento# especificamos el
c%di(o de una funci%n para definir el comportamiento de ese
eento frente a la acci%n del usuario! Esa funci%n recibe
un par*metro que es el propio eento que se ha producido!
Ese par*metro es un objeto de la clase "atie Eent# que
tiene al(unos datos interesantes# con los que podemos
trabajar# as como al(unos mtodos para reali$ar acciones
que se(uramente necesitaremos en al(Gn momento!
7eamos un c%di(o para definir un eento8
document!addEent4-click-# function4eento5>
alert4-6as pulsado sobrenH8- M eento!client!) M
-nI8- M eento!client!'5?
@5?
@5?
En realidad aqu hemos definido dos eentos! Sno para
cuando la p*(ina est* lista para trabajar con el JOM de
Jaascript 4eento domread'5 ' otro para cuando se hace
clic en el documento 4eento click5! El eento domread' 'a
lo hemos isto repetidas eces en el manual de Mootools#
por lo que no debera presentarnos dudas! Ouiero que se
preste atenci%n en la definici%n del eento -click-#
justamente en la funci%n que se declara para codificar el
comportamiento del eento! Esa funci%n# como se puede er#
recibe un par*metro# que es el objeto eento 4de la clase
Eent5# que e)plicaremos ahora!
&ropiedades de la clase Eent
El objeto eento tiene arias propiedades ' mtodos que nos
siren para saber cosas sobre el eento que est*
ejecut*ndose ' para solicitar acciones sobre ese eento!
Las propiedades son las si(uientes8
shift . 4boleano5 7erdadero si el usuario puls% la tecla
ma'Gsculas 4shift5
control . 4boleano5 7erdadero si el usuario haba
presionado la tecla control 4;T9L5
alt . 4boleano5 7erdadero si el usuario haba pulsado la
tecla alternatia 4LTL5
meta . 4boleano5 7erdadero si el usuario puls% la tecla
meta
wheel . 4nGmero5 La cantidad de moimiento reali$ado con la
rueda del rat%n
code . 4nGmero5 el c%di(o de la tecla pulsada
pa(e!) . 4nGmero5 La posici%n ) del rat%n# relatia a la
p*(ina completa
pa(e!' . 4nGmero5 La posici%n ' del rat%n# relatia a la
p*(ina completa
client!) . 4nGmero5 La posici%n ) del rat%n# relatia a
porci%n de p*(ina isible
client!' . 4nGmero5 La posici%n ' del rat%n# relatia a la
porci%n de p*(ina isible
ke' . 4cadena5 La tecla pulsada# como una cadena en
minGsculas! La cadena que se muestre al pulsar una tecla
puede ser tambin =enter=# =up=# =down=# =left=# =ri(ht=#
=space=# =backspace=# =delete=# ' =esc=!
tar(et . 4elemento5 El elemento que es objetio de ese
eento# pero sin estar e)tendido con las funcionalidades de
345# por ra$ones de rendimiento!
relatedTar(et . 4elemento5 El elemento relacionado con el
objetio del eento# sin e)tender con la funci%n 345!
7olamos al eento que definido anteriormente en estas
lneas8
alert4-6as pulsado sobrenH8- M eento!client!) M -nI8- M
eento!client!'5?
@5?
;omo se puede er# se aEade un eento al objeto document#
con lo que conse(uiremos hacer un eento para todo el
documento de la p*(ina ' no asociado a un elemento en
concreto# como habamos isto en otras ocasiones en el
manual! Este eento click# por tanto# se disparar* al hacer
clic en cualquier parte de la p*(ina!
7eamos que se declara una funci%n# que tiene como par*metro
una ariable llamada -eento- ese eento es de la clase
Eent ' tiene las propiedades que hemos comentado antes#
por lo tanto puedo utili$arlas para hacer cosas! En este
c%di(o muestro la posici%n del rat%n al hacer clic#
relatia a la porci%n de p*(ina isible en ese momento!
Mtodos de la clase Eent
Lhora eremos los eentos disponibles para la clase "atie
Eent!
Mtodo stop45
Este mtodo sire para parar un eento ' eitar la
propa(aci%n del mismo! &or ejemplo# pensemos en un enlace!
Si hacemos clic nos llea a una nuea S9L! Entonces con
Mootools podramos ejecutar acciones cuando se hace clic en
el enlace ' lue(o parar el eento con stop45# para que no
se produ$ca el comportamiento tpico del enlace# con lo que
no nos lleara a la nuea S9L!
&or ejemplo# tenemos un enlace como este8
+a href,-http811www!desarrolloweb!com-
id,-mienlace-2desarrolloweb!com+1a2
I ahora definiremos un eento clic sobre el enlace con
Mootools8
34-mienlace-5!addEent4-click-# function4eento5>
eento!stop45?
alert4-6as hecho clic sobre el enlace!!! pero no te
amos a llear al destino-5?
@5?
@5?
;omo se ha podido er# en la codificaci%n del eento click
sobre el enlace anterior 4elemento -mienlace-5# lo primero
que se hace es un eento!stop45# con lo que se para el
comportamiento tpico del enlace ' tambin se detiene la
propa(aci%n del mismo! El resultado es que nos mostrar* el
mensaje de la funci%n alert45# pero no se nos llear* a la
p*(ina definida en el href del enlace!
&odemos er el ejemplo del mtodo stop45 en una p*(ina
aparte!
Mtodos stop&ropa(ation45 ' preentJefault45
Lhora eremos otros dos eentos que tambin nos pueden ser
Gtiles en al(unos casos! Son mtodos para hacer cosas
parecidas a lo que imos en el ejemplo anterior del mtodo
stop45! &ero para entenderlos ten(o que e)plicar al(o m*s
sobre la propa(aci%n de eentos!
Pma(inemos que tenemos definidos dos eentos click en
nuestra p*(ina! Sn eento click est* definido sobre un
enlace# como hemos isto antes# ' otro eento click est*
definido sobre el documento completo! ;uando un usuario
hace clic sobre el enlace# primero se desata el eento
click que habamos definido en el enlace! Lue(o el eento
se propa(a ' lle(a al documento completo# donde ha'
definido otro eento click# con lo que se ejecuta tambin
ese eento definido para todo el documento!
Eso lo conse(uiramos con un c%di(o como este8
alert4-6as pulsado sobrenH8- M eento!client!) M
-nI8- M eento!client!'5?
@5?

alert4-6as hecho clic sobre el enlace!!! -5?
@5?
@5?
Si ejecutamos ese ejemplo en una p*(ina aparte# podemos
apreciar que los dos eentos clic se ejecutan al pulsar
sobre el enlace! ;on esto podemos comprender c%mo se
reali$a la propa(aci%n de eentos ' de paso entender las
si(uientes e)plicaciones sobre los mtodos de Eent
stop&ropa(ation45 ' preentJefault45!
Si hacemos un &reentJefault45# dentro del eento click del
enlace# conse(uiramos que simplemente no se ejecutase el
comportamiento por defecto del enlace# con lo que no nos
lleara a la S9L del enlace!
Si hacemos un stop&ropa(ation45# dentro del eento click
del enlace# el resultado ser* que no se propa(ar* el
eento# con lo que si hacemos un clic en el enlace se
ejecutar* el eento del enlace pero no el definido para
todo el documento# porque se ha parado la propa(aci%n!
"%tese que el comportamiento por defecto del enlace s se
produce# por lo que el nae(ador nos llear* a la nuea S9L
que haba en el href del enlace!
&or su parte# stop45 hara las dos cosas a la e$#
detendra la propa(aci%n del eento ' adem*s no se
ejecutara el comportamiento por defecto del enlace!
Rijmonos en este c%di(o con el que podramos haber
definido el eento click del enlace# que hace uso de los
tres mtodos# aunque est*n comentados!
alert4-6as hecho clic sobre el enlace!!! -5?
11eento!preentJefault45? 11esto hace que no se llee
al enlace
11eento!stop&ropa(ation45? 11esto hace que no se
propa(ue el eento clic definido para todo el documento
11eento!stop45? 11no ha' ni propa(aci%n del eento ni
comportamiento por defecto del eento
@5?
&ara acabar con los eentos de Mootools habra que tratar
con al(unos eentos de teclado# para reali$ar acciones
cuando el usuario presiona teclas del teclado# que tienen
al(unas particularidades interesantes para aprender a
pro(ramar!
7eamos c%mo definir eentos de teclado# que se desatan
cuando el usuario presiona las teclas del teclado#
utili$ando el framework Jaascript Mootols!
Mootools proporciona diersas herramientas ' utilidades#
adicionales al propio Jaascript# para la hora de trabajar
con eentos producidos por acciones del usuario! E)iste una
clase denominada "atie Eent que tiene toda una serie de
utilidades e informaci%n de cada eento producido en la
p*(ina!
&ara definir un eento con Mootools tenemos que crear una
funci%n que recibe un objeto de la clase "atie Eent ' a
tras de l podremos obtener diersos datos sobre el
eento producido# adem*s de inocar al(Gn que otro mtodo
interesante para marcar el comportamiento del eento! Todo
esto 'a lo e)plicamos en un artculo anterior# titulado
"atie Eent en Mootools
En este artculo queremos mostrar c%mo definir eentos de
teclado ' de paso c%mo# a tras del objeto "atie Eent#
podemos saber qu teclas se pulsaron cuando se desat% el
eento! &ara ello eremos un par de ejemplos sencillos con
Mootools!
Eento ke'down sobre un campo de te)to
En realidad todos los elementos de la p*(ina aceptan
eentos de teclado# pero ser* m*s intuitio comen$ar por
definir un eento cuando se escribe sobre un campo de
te)to! &ara ello utili$aremos ke'down# que se desata cuando
el usuario aprieta una tecla! En este ejemplo escribiremos
en un lu(ar de la p*(ina el alor del atributo -ke'- del
objeto "atie Eent que recibimos al codificar la funci%n
del eento!
"ecesitaremos un c%di(o 6TML como el si(uiente# que
implementa el campo de te)to ' una capa donde escribiremos
cosas como resultado del eento!
+form2
+input t'pe,-te)t- id,-campote)to-2
+1form2
+di id,-te)toescrito-2+1di2
+p2
Lhora eamos el c%di(o Mootools para hacer cosas cuando el
usuario aprieta una tecla del teclado# estando situado el
foco de la aplicaci%n en el campo de te)to!
+p2
34-campote)to-5!addEent4=ke'down=# function4miEento5>
ar tecla&ulsada , miEento!ke'?
34-te)toescrito-5!set4-html-# -6as pulsado8 - M
tecla&ulsada5
@5?
;on el mtodo addEent45 sobre el elemento con
id,-campote)to- definimos un comportamiento frente a un
eento# eniando como par*metro el nombre del eento
4ke'down5 que queremos codificar ' una funci%n para
reali$ar cuando se produce el eento seEalado! ;omo
decamos antes# la funci%n del eento recibe como par*metro
un objeto de la clase "atie Eent# que nos dar* datos
sobre el eento# como la tecla que se ha pulsado!
En la funci%n# como primer acci%n# definimos una ariable a
la que asi(namos el alor de la propiedad -ke'- del "atie
Eent recibido# que nos da una cadena de te)to con la tecla
pulsada! L continuaci%n escribimos# en el elemento con id
-te)toescrito-# el alor de la tecla pulsada!
&odemos er el ejemplo en funcionamiento en una p*(ina
aparte!
Ejemplo B de eentos de teclado en Mootools
Lhora amos a tratar un ejemplo de eento de teclado un
poco m*s elaborado! En esta pr*ctica tendremos una capa que
podremos moer con el cursor 4las flechas del teclado5 a
cualquier otra posici%n en la p*(ina! Ldem*s# nuestro
pro(rama detectar* si el usuario tiene pulsada la tecla LLT
4Llternatia5 o Shift 4Ma'Gsculas5! En caso que estn
pulsadas la elocidad de moimiento cambiar*! ;on LLT el
moimiento ser* m*s r*pido ' con Shift se har* m*s lento!
&odemos er el ejercicio resuelto en una p*(ina aparte!
&ues bien# el ejemplo# aunque sea un poco m*s complejo# no
necesita muchos m*s conocimientos o habilidades para
resolerlo que el que hemos isto hace un momento! Todo lo
que necesitamos est* en el objeto de la clase "atie Eent#
que no s%lo nos dice qu teclas se han pulsado# sino que
tambin informa si estaba presionada la tecla de
Ma'Gsculas# Llternatia o ;ontrol# por ejemplo!
9ecordemos que en el artculo anterior 'a informamos sobre
todos los posibles datos que nos puede dar el objeto "atie
Eent! "o obstante# lo que tenemos que saber para este
ejemplo es8
La propiedad -ke'- almacena el alor de la tecla pulsada en
una cadena! En el caso de que se ha'an pulsado las flechas
del cursor# esta propiedad almacenar* los alores -up-#
-down-# -left- o -ri(ht-# se(Gn la flecha presionada!
La propiedad -shift- es un boleano# que indica si est*
pulsada o no esta tecla Ma'Gsculas!
La propiedad -alt- es otro boleano# que indica si est*
pulsada o no la tecla Llternatia!
;on esos datos puedo crear el script# pero antes eamos el
c%di(o de la capa que queremos moer ' los estilos ;SS que
quiero asi(narle!
+di id,-capamoil-2Esta capa se muee]]]+1di2
Fcapamoil >
paddin(8 0:p)?
back(round.color8 FffZZ::?
position8 absolute?
top8 B::p)?
left8 B::p)?
@
S%lo quera mostrar esos estilos para que se iera que la
capa tiene el position8 absolute# para que se pueda
posicionar en cualquier lu(ar de la p*(ina definido por los
atributos de ;SS Top ' Left!
Lhora podemos er el c%di(o Jaascript que hace uso de
Mootools para la (esti%n de eentos de teclado!
document!addEent4=ke'down=# function4miEento5>
11selecciono el elemento que quiero moer
ar elemento , 34-capamoil-5?
11(uardo la posici%n TO& actual! Es un estilo ;SS# por
eso la trai(o con (etSt'le45
ar topLctual , elemento!(etSt'le4=top=5!toPnt45?
11(uardo la posici%n LERT actual
ar leftLctual , elemento!(etSt'le4=left=5!toPnt45?
11calculo la elocidad con la que ten(o que moer el
elemento
ar elocidadMoimiento?
if 4miEento!shift5>
11al estar pulsado shift# la elocidad ser* /
elocidadMoimiento , /?
@else>
if 4miEento!alt5>
11al estar pulsado alt# la elocidad ser* U
elocidadMoimiento , U?
@else>
11si no est* pulsado ni shift ni alt# la elocidad
ser* 0
elocidadMoimiento , 0?
@
@
11si se puls% la tecla flecha hacia arriba del cursor
if4miEento!ke' ,, -up-5>
11cambio el estilo del elemento para que se posicione
en otro lu(ar
elemento!setSt'le4-top-# topLctual .
elocidadMoimiento5?
@
11si se puls% la tecla down
if4miEento!ke' ,, -down-5>
elemento!setSt'le4-top-# topLctual M
elocidadMoimiento5?
@
11Si se puls% la tecla left
if4miEento!ke' ,, -left-5>
elemento!setSt'le4-left-# leftLctual .
elocidadMoimiento5?
@
11si se puls% la tecla ri(ht
if4miEento!ke' ,, -ri(ht-5>
elemento!setSt'le4-left-# leftLctual M
elocidadMoimiento5?
@
@5?
El c%di(o lo hemos comentado para que se pueda entender
mejor! 9ealmente no tiene m*s complicaci%n# si es que hemos
se(uido el manual de Mootools hasta este punto ' hemos
podido entender c%mo recuperar las teclas pulsadas con el
objeto "atie Eent!
"ueamente# dejo el enlace para er el script en marcha!
;omen$amos a estudiar los efectos que se pueden hacer con
Mootools con la clase R) ' arias otras que heredan de
ella!
7amos a dar un salto en el Manual de Mootools para irnos a
la clase R)# que nos serir* para hacer efectos de todo
tipo sobre p*(inas web! "os hemos dejado por el medio
arias clases importantes# que eremos m*s adelante en el
manual! "os endr* bien er antes los efectos para hacer
ejemplos m*s interesantes cuando e)pliquemos las cosas que
hemos dejado pendientes!
&ara estudiar los efectos en Mootools# comen$aremos
e)plicando c%mo hacer cosas sencillas# como hacer un
fundido de opaco a transparente para ocultar un elemento!
Lue(o nos detendremos m*s en los detalles ' aprenderemos a
utili$ar las clases que heredan de R) con todas sus
posibilidades ' comprobaremos que las herramientas de
Mootools son bastante potentes!
;lase R)
La clase R) sire para hacer efectos especiales# pero
raramente la utili$aremos a ella misma! En realidad sire
como base para el core de Mootools para reali$ar arias
clases deriadas# que implementan diersos tipos de efectos
que nos pueden enir bien para enriquecer la e)periencia de
usuario!
Sin embar(o# ser* importante conocer un poco esta clase# o
al menos tenerla en cuenta cuando consultemos la
documentaci%n de Mootools# porque tiene muchas cosas que
son comunes a todas las clases deriadas para hacer
efectos!
;lases que heredan de R)
;omo 'a se adelantaba# e)isten arias clases que se
constru'en en Mootools a partir de R)# que siren para
hacer efectos de diersos tipos concretos! Estas clases
son8
R)!;SS
Esta clase tiene funcionalidades para interpretar estilos '
clases ;SS! &ero todos los mtodos ' propiedades de esta
clase son priados# con lo que no podemos hacer nada con
ella# sino que sire para que las otras clases de R) la
utilicen!
R)!Tween
Sna clase que sire para hacer una transici%n de cualquier
propiedad ;SS# de un alor a otro! ;on ella podremos hacer
efectos con cualquier duraci%n# de modo que su presentaci%n
sea suae! &or ejemplo si hacemos un efecto para alterar la
propiedad -top- de un elemento de la p*(ina# desde el alor
: al /::# lo que ocurrir* es que el elemento se moer* por
la p*(ina /:: p)eles hacia abajo# desde el pi)el : al /::!
Si habamos confi(urado el estilo con una duraci%n de# por
ejemplo# / se(undo# el moimiento del elemento# desde que
est* en la posici%n inicial a que lle(a a la final# tardar*
/ se(undo# con lo que el usuario lo er* suai$ado!
R)!Morph
Esta clase es parecida a R)!Teen# con la diferencia que
permite alterar arias propiedades ;SS al mismo tiempo!
R)!Transitions
&ara hacer efectos m*s detallistas# que ajustan el proceso
de transici%n con una funci%n matem*tica! &or ejemplo esto
sire para hacer un despla$amiento de un elemento# pero
donde la elocidad del moimiento no es linear# sino que es
por ejemplo e)ponencial# siendo m*s r*pido al inicio o al
final del moimiento! E)isten diferentes funciones
matem*ticas preestablecidas para (enera efectos simp*ticos#
como moimientos con un rebote cuando lle(an al final o que
se pasan ' lue(o uelen# como si fuera un el*stico!
Ejemplos sencillos de efectos con Mootools
&ara acabar esta introducci%n a los efectos# amos a
mostrar c%mo hacer al(unos efectos sobre elementos de la
p*(ina con Mootools! &ara hacer estos efectos sencillos
amos a utili$ar al(unos mtodos r*pidos que tiene
R)!Tween!
;uando tenemos la clase R)!Tween car(ada# se crean unos
mtodos nueos para los elementos de la p*(ina 4clase
Element5# para hacer efectos mu' recurridos# como fundidos
o resaltados! Estos mtodos los podemos inocar sobre
cualquier elemento# como cualquier otro mtodo de los de la
clase Element!
Mtodo fade45
Mtodo hi(hli(ht45
Mtodo tween45
Lprendemos a utili$ar el mtodo fade45 de la clase Element
de Mootools# que sire para hacer efectos de fundido con
transparencia!
Estamos iendo una serie de mtodos para hacer efectos
r*pidos en Mootools! En el captulo anterior dimos una
introducci%n a lo que son los efectos de Mootools '
queramos empe$ar mostrando c%mo hacer efectos recurridos '
sencillos!
Rade45 es un mtodo mu' r*pido de usar ' que sin duda
resulta mu' Gtil ' bastante atractio isualmente! Se trata
de hacer lo que en in(ls llaman un -fade in- o -fade out-#
que no es m*s que un efecto que muestra u oculta un
elemento# con un fundido de transparente a opaco# o
iceersa!
El mtodo fade45 se puede utili$ar sobre cualquier elemento
de la p*(ina que ten(amos seleccionado o bien con la
funci%n d%lar 345 o la funci%n dolardolar 3345!
&or ejemplo# tenemos un elemento como este8
+di id,-mielemento-2
Este elemento!!!
+1di2
&odramos hacer un fundido de opaco a transparente con la
sentencia8
34-mielemento-5!fade4-out-5?
Lhora# para hacer un fundido de transparente a opaco# se
puede inocar el mtodo fade45 de esta manera8
34-mielemento-5!fade4-in-5?
Sn ejemplo completo de uso de fade45 lo podemos er a
continuaci%n# en el que tenemos un elemento ' dos enlaces#
uno para hacer un -fade in- ' otro para hacer un -fade
out-# sobre ese elemento8
+html2
+head2
+title2Rade en mootools+1title2
+script src,-!!1mootools./!B!0.core.'c!js-
+script2
11creo un eento para el enlace con id,fadeout
34-fadeout-5!addEent4-click-# function4eento5>
eento!preentJefault45?
11inoco el mtodo fade sobre el elemento que quiero
ocultar
34-mielemento-5!fade4-out-5?
@5?
11creo un eento para el enlace con id,fadein
34-fadein-5!addEent4-click-# function4eento5>
11inoco el mtodo fade sobre el elemento que quiero
mostrar
34-mielemento-5!fade4-in-5?
@5?
@5?
+1script2
+1head2
+bod'2
+a href,-F- id,-fadeout-2Rade out+1a2 c +a href,-F-
id,-fadein-2Rade in+1a2
+br2
+br2
+di id,-mielemento- st'le,-back(round.color8 Fddffdd?
paddin(8 /:p)? width8 /B:p)?-2
Este elemento lo tenemos para ju(ar a hacer efectos con
Mootools
+1di2
+1bod'2
+1html2
&odemos er este ejemplo en marcha en una p*(ina aparte!
Sn efecto con Mootools para hacer una iluminaci%n o
resaltado de un elemento que se quiera destacar con
respuesta a las acciones del usuario!
Otro efecto tpico que podemos necesitar en una web es
resaltar elementos din*micamente para llamar la atenci%n
del usuario sobre un lu(ar de la p*(ina! En este artculo#
perteneciente al manual de Mootools# mostraremos c%mo
reali$ar este Gtil efecto en instantes!
Pma(inaros que tenis un enlace en la p*(ina que abre por
Lja) un contenido ' el usuario lo pulsa pero no se da
cuenta que se ha mostrado el contenido en la p*(ina! &uede
ocurrir que si(a pulsando el enlace porque piense no ha
recibido nin(una respuesta ' al final# piense que no
funciona! En casos como ese iene bien resaltar el elemento
que sobre el que queremos llamar la atenci%n del usuario!
&ara ello Mootools tiene un mtodo listo para usar ' hacer
un efecto de iluminaci%n sobre un elemento en s%lo una
lnea de c%di(o# que implementa sobre la clase Element la
librera de efectos de del framework Jaascript!
El mtodo en concreto se llama hi(hli(ht ' lo podemos
inocar de esta manera8
34-mielemento-5!hi(hli(ht4-Fccc-5?
El mtodo (enera un efecto de cambio (radual del color de
fondo del elemento# desde su color actual hasta el color
que le eniamos por par*metro# oliendo de nueo a su
color ori(inal! Si el elemento anteriormente no tena color
asi(nado# o si era transparente# se toma el blanco como
color por defecto del elemento!
El mtodo tambin puede recibir dos par*metros en lu(ar de
uno! En ese caso# utili$a el primer par*metro como primero
color de la transici%n de colores# el se(undo par*metro
como un se(undo paso en la transici%n# lue(o oliendo al
color ori(inal!
34-mielemento-5!hi(hli(ht4-Ff:DVV:-#-Fccc-5?
"ota8 Sobre el mtodo hi(hli(ht cuando se le pasa dos
par*metros# se(Gn la documentaci%n dira que el se(undo
par*metro es el color que permanece despus del efecto!
&ero se(Gn mis pruebas lue(o uele otra e$ al color
ori(inal# que tenamos como fondo de ese elemento! Ldem*s#
cuando le paso dos par*metros al mtodo a eces parece que
no funciona del todo bien# as que creo que es m*s se(uro
s%lo utili$ar un par*metro! Esto se(Gn mis pruebas con
Mootools /!B ' /!0!
Lhora eamos un ejemplo de p*(ina que hace uso de este
efecto# en la que amos a tener una capa con contenido '
dos enlaces! Jefiniremos un eento clic en cada enlace para
que# cuando se pulsen# se llame al mtodo hi(hli(ht45
pasando tanto uno como dos par*metros!
+html2
+head2
+title26i(hli(ht en mootools+1title2
+script src,-!!1mootools./!B!js-
+script2
11defino un eento click para el primer enlace
34-enlacedestacar-5!addEent4-click-# function4eento5>
11inoco el mtodo hi(hli(ht sobre el elemento que
quiero destacar
34-mielemento-5!hi(hli(ht4-Fffffbb-5?
@5?
11defino un eento click para el se(undo enlace
34-enlacedestacarB-5!addEent4-click-# function4eento5>
11inoco el mtodo hi(hli(ht pasando dos par*metros#
el color para destacar ' el color final que tiene que
aparecer!
34-mielemento-5!hi(hli(ht4-FffVV::-#-Fccc-5?
@5?

@5?
+1script2
+1head2
+bod' st'le,-back(round.color8 F:::?-2
+a href,-F- id,-enlacedestacar-2Jestacar+1a2 c +a href,-F-
id,-enlacedestacarB-2Jestacar acabando en rojo oscuro+1a2
+br2
+br2
+di id,-mielemento- st'le,-color8 Ffff? back(round.color8
F00UU00? paddin(8 /Dp)? width8 /B:p)?-2
Este elemento lo tenemos para ju(ar a hacer efectos con
Mootools! ;oloco al(o m*s de te)to!!!
+1di2
+1bod'2
+1html2
;omo se ha podido er es un efecto Gtil ' sobre todo#
r*pido de aplicar con Mootools! En el si(uiente artculo
comen$aremos a er efectos m*s personali$ados!
E)plicamos el mtodo tween de Mootools# que sire para
hacer una transici%n sencilla entre dos alores de un
atributo ;SS!
El mtodo tween pertenece al m%dulo R)!Tween de Mootools '
sire para hacer efectos r*pidos ' sencillos! En este
artculo mostraremos el funcionamiento de este mtodo '
eremos un par de ejemplos b*sicos!
El mtodo tween se aplica sobre los elementos de la p*(ina#
es decir los objetos de la clase Element de Mootools ' le
tenemos que eniar tres par*metros8 el nombre de un
atributo ;SS ' dos alores de estilo de inicio ' de fin del
efecto# con sus correspondientes unidades ;SS! El efecto
que resultar* es una transici%n entre el alor indicado
como inicio ' el alor indicado como fin!
&or ejemplo# ima(inar que tenemos un elemento con
id,-micapa-# entonces podramos hacer una transici%n para
alterar su anchura# entre :p) ' 0::p)! &ara ello
utili$aramos el mtodo tween sobre el elemento -micapa-#
de esta manera8
34-micapa-5!tween4-width-# -:p)-# -0::p)-5?
;omo se puede er# accedemos al elemento con la funci%n 3
45# eniando su identificador! Lue(o llamamos al mtodo
tween45# eniando el alor -width-# que es el atributo ;SS
que queremos alterar ' lue(o los alores de inicio -:p)- '
fin -0::p)- de la transici%n!
"ota8 En realidad RH!Tween tiene una clase llamada Tween
que no se debe confundir con el mtodo tween que estamos
iendo en este artculo ' que est* implementado sobre la
clase Element! En realidad tanto la clase como el mtodo
siren para hacer la misma (ama de efectos# de transici%n
entre dos alores de una propiedad ;SS! &ero mientras el
mtodo tiene una (ran sencille$# utili$ar la clase resulta
un poco m*s complicado! "o obstante# esa complicaci%n
adicional tambin tiene sentido porque haciendo los efectos
a partir de la clase podemos confi(urar otros asuntos en el
efecto# como la elocidad de la transici%n# acciones a
reali$ar cuando comience# acabe el efecto# etc! M*s
adelante aprenderemos a confi(urar un efecto con la clase
R)!Tween!
Este efecto har* que el elemento pase de tener :p) de
anchura a 0::p)# en una transici%n suae que durar* cosa de
medio se(undo!
&odemos er una p*(ina que hace uso de ese mtodo para
alterar la anchura de un elemento!
Lhora bien# eris que el efecto tiene un pequeEo
problemilla ' es que la capa ori(inal tena 'a una anchura!
&ero el efecto comien$a la con una anchura de :p)# as que
lo primero que pasa es que la capa se transforma a :p) en
un salto inmediato ' lue(o comien$a la transici%n suae
hacia el alor final de 0::p)! Esto se puede arre(lar
f*cilmente porque el mtodo tween45 permite indicar s%lo el
alor final de la transici%n ' entonces lo que ocurre es
que la transici%n ir* desde el alor actual de anchura del
elemento# que no necesitamos saber# hasta el alor final
que s debemos indicar de manera obli(atoria!
34-micapa-5!tween4-width-# -0::p)-5?
&odemos er el ejemplo con este pequeEo cambio en una
p*(ina aparte
&odremos haber comprobado que ahora el efecto es mucho m*s
suae# porque el inicio del mismo comien$a en la anchura
actual de la capa! Lhora mostramos el c%di(o completo de
esta p*(ina# para que se pueda reisar detenidamente8
+html2
+head2
+title2Efectos con el mtodo tween de Mootools+1title2
+script2
function cambiarLnchura45>
34-micapa-5!tween4-width-# -0::p)-5?
@
34-enlaceanchura-5!addEent4-click-# function4e5>
e!stop45?
cambiarLnchura45?
@5?
@5?
+1script2
+1head2
+bod'2
+di id,-micapa- st'le,-width8 /::p)? oerflow8hidden?
back(round.color8 F:U:? color8 Ffff? paddin(8 /:p)?-2
Este te)to es de prueba# simplemente relleno al(o para
ocupar espacio en esta capa!!! ' le o' a poner un color de
fondo para que se ea donde est* la capa! Espero que
(uste]] a er que tal]]
+1di2
+br2
+a href,-F- id,-enlaceanchura-2;ambia anchura+1a2
+1bod'2
+1html2
Otro ejemplo del mtodo tween45 sobre objetos Element
En principio tween45 permite transiciones para cualquier
atributo de ;SS que queramos! Otro ejemplo sencillo sera
cambiar el color de fondo a esos elementos con el atributo
back(round.color!
&or ejemplo# con esta lnea de c%di(o cambiaramos el color
de fondo de un elemento con id,-capacolor-!
34-capacolor-5!tween4-back(round.color-# -F::aaee-5?
;omo s%lo indicamos un alor de color# el cambio se
reali$ar* partiendo del color actual del fondo del elemento
al color indicado en el par*metro!
Lhora# para probar esta instrucci%n hemos hecho un pequeEo
ejemplo en el que encontraremos una capa ' arios enlaces#
cada uno con un color distinto! Ll pulsar los enlaces
cambiaremos el color de la capa con el mtodo tween45 del
elemento!
&odemos er el ejemplo en una p*(ina aparte!
El c%di(o completo de este ejemplo se puede er a
continuaci%n8
+html2
+head2
+title2Efectos con el mtodo tween de Mootools+1title2
+script2
334-a!cambiacolor-5!each4function4elemento5>
elemento!addEent4-click-# function4e5>
e!stop45?
34-capacolor-5!tween4-back(round.color-#
elemento!(et4-html-55?
@5?
@5?
@5?
+1script2
+1head2
+bod'2
+di id,-capacolor- st'le,-back(round.color8 Ff::? paddin(8
/:p)?-2
Esta capa le he puesto fondo rojo para er el efecto de
Tween para pasarlo a otro color! &ulsa los enlaces de abajo
para cambiar los colores!
+1di2
+a href,-F- class,-cambiacolor-2FffffVV+1a2 c
+a href,-F- class,-cambiacolor-2FcV0+1a2 c
+a href,-F- class,-cambiacolor-2FZZff::+1a2 c
+a href,-F- class,-cambiacolor-2FUUUUff+1a2 c
+a href,-F- class,-cambiacolor-2Fccc+1a2
+1bod'2
+1html2
&ara crear este ejemplo hemos utili$ado una selecci%n
mGltiple de todos los enlaces de la p*(ina# con la funci%n
3345 para asi(narles un comportamiento a todos de una sola
e$! Todo eso# adem*s de la asi(naci%n de eentos a los
enlaces# est* e)plicado en los captulos anteriores del
Manual de Mootools que enimos publicando en
JesarrolloNeb!com!
En los si(uientes artculos eremos maneras m*s complejas
de reali$ar efectos en la p*(ina# pero que permiten una
personali$aci%n mucho ma'or!
La clase RH!Tween sire para hacer efectos totalmente
personali$ables en Mootools# con una propiedad ;SS# desde
un alor a otro!
Sna de las delicias de Mootools ' otros frameworks
Jaascript es la posibilidad de crear todo tipo de efectos
en la p*(ina web como respuesta a acciones del usuario# lo
que enriquece considerablemente la e)periencia de uso de
los sitios web!
En el Manual de Mootools 'a comen$amos a e)plicar las bases
sobre las clases dedicadas a la creaci%n de efectos e
incluso hemos dedicado arios artculos para e)plicar
diersos mtodos para la creaci%n de efectos sencillos!
Lhora amos a e)plicar los detalles de la clase R)!Tween#
que nos sire para hacer un cambio suai$ado entre dos
alores distintos de una propiedad ;SS! En este punto
cabra comentar que# para hacer un efecto de estas
caractersticas sin complicarnos mucho la ida# e)iste un
mtodo llamado tween45 que 'a e)plicamos en un artculo
anterior! Muchas de las e)plicaciones te%ricas sobre este
tipo de efecto alen tambin para la clase R)!Tween# 'a que
nos permite hacer lo mismo# un cambio del alor de una
propiedad de una manera delicada! El uso de la clase
R)!Tween es# sin embar(o# bastante diferente ' se hace un
poco m*s complejo! &ero es que tambin ha' que decir que
las posibilidades de utili$ar la clase son realmente mucho
ma'ores que si utili$amos el sencillo mtodo tween45!
&odemos decir que# si deseas hacer un efecto simple ' Gnico
de cambio entre dos alores de ;SS# puedes utili$ar el
mtodo tween45# que es mucho m*s c%modo ' requiere menos
c%di(o Jaascript! &ero si quieres hacer al(o un poco m*s
especial# como concatenar arios efectos# definir el tiempo
de la transici%n# reali$ar cosas al iniciar o terminar el
efecto# etc# pues est*s obli(ado a usar la clas R)!Tween
que amos a e)plicar se(uidamente!
;lase R)!Tween
Esta recurrida clase de Mootools sire para cambiar
cualquier propiedad ;SS de una manera suai$ada# es decir#
es un cambio de alor de una propiedad ;SS que se reali$a
con una transici%n que dura un espacio de tiempo
confi(urable! Esta clase# aparte de hacer el propio efecto#
tiene en torno una infraestructura para hacer diersas
cosas relacionadas con el efecto!
;omo se dijo en la introducci%n a los efectos de Mootools#
esta clase hereda de R)# por lo que en la referencia para
aprender a manejar R)!Tween# habr* que tener en cuenta
tambin todo lo que se comenta para su clase padre R)!
&ara hacer efectos con esta clase tenemos que instanciar un
objeto R)!Tween! Ll constructor tenemos que eniarle el
identificador del elemento 6TML sobre el que queramos hacer
los efectos# as como otros datos opcionales que eremos
m*s tarde!
miEfecto , new R)!Tween4-micapa-5?
;on esto tenemos un objeto en la ariable -miEfecto- con el
que podemos inocar diersas acciones para reali$ar
transiciones mendiante la alteraci%n de propiedades ;SS del
elemento -micapa-!
Lo m*s b*sico que podremos desear hacer con esta clase es
poner en marcha un efecto ' para ello disponemos del mtodo
start45# que podemos usar por ejemplo de esta manera8
miEfecto!start4-back(round.color-# -FffZZ::-5?
;on esto conse(uiremos que el efecto se pon(a en marcha '
altere el alor de la propiedad ;SS back(round.color# desde
el alor actual a -FffZZ::-# sobre el elemento que se haba
asociado al efecto# cu'o identificador se eni% al
constructor al crear el objeto! En definitia# que cambiar*
el fondo del objeto a ese nueo alor 9QT en una transici%n
suai$ada!
&odemos er una p*(ina aparte en la que tenemos un script
que reali$a este efecto!
El c%di(o fuente de esa p*(ina sera el si(uiente8
+html2
+head2
+title2Efecto cambio color de fondo+1title2
+script2
efecto , new R)!Tween4-micapa-5?
efecto!start4-back(round.color-# -FffZZ::-5?
@5?
+1script2
+1head2
+bod'2
+di id,-micapa- st'le,-back(round.color8 Ffff? width8
/B:p)? paddin(8 Cp)?-2
Esto es una capa para hacer un efecto de cambio de color de
fondo con R)!Tween
+1di2
+1bod'2
+1html2
Este sera el uso m*s simple de R)!Tween# aunque realmente#
si queremos hacer al(o tan sencillo# qui$*s nos sera
suficiente con llamar al mtodo tween45 que e)plicamos en
el artculo anterior! Lo interesante ser* conocer al(unas
de las posibilidades de personali$aci%n de R)!Tween para
que eamos al(una diferencia que resulte suficientemente
atractia o necesaria como para utili$ar esta clase!
&ersonali$aci%n de efectos con R)!Tween
;uando utili$amos el constructor de R)!Tween tenamos la
posibilidad de eniar una serie de alores opcionales que
nos ser*n Gtiles para marcar ciertos par*metros aan$ados
de los efectos Mootools# como definir la duraci%n o la
propiedad ;SS que se debe alterar cuando se pon(a en marcha
el efecto! Todos estos par*metros opcionales se enan en
un objeto de -options- al constructor!
"ota8 Este objeto -options-# que recibe el constructor para
confi(urar los efectos R)!Tween# se utili$a mu' a menudo
para personali$aci%n de las clases# no s%lo en R)!Tween#
sino en muchas otras clases como por ejemplo -9equest-#
utili$ada para las cone)iones Lja)! Los -options- siren
(eneralmente para indicar par*metros opcionales al crear
objetos de la clase e incluso podemos utili$ar esta
estrate(ia de opciones en las clases que creemos nosotros
mismos# como eremos dentro de poco en este manual!
El formato de las -options- es un objeto# como cualquier
otro que se pueda definir con la notaci%n de objetos propia
de Mootools! 7amos a reali$ar un nueo ejemplo para que lo
podamos er!
efecto;olorTe)to , new R)!Tween4-capat)t-# >
propert'8 =color=#
duration8 =lon(=#
fps8 /::
@5?
;on este c%di(o crearamos un objeto de la clase R)!Tween#
para reali$ar efectos sobre el elemento con identificador
-capat)t-! Ldem*s le pasamos un objeto de -options- en el
que indicamos arias informaciones8
propert'8 =color=
Sire para especificar que la propiedad ;SS sobre la que
queremos hacer el efecto es -color-# para cambiar el color
del te)to!
duration8 =lon(=
Sire para indicar que la duraci%n del efecto debe ser
lar(a 4-lon(- equiale a / se(undo de duraci%n5! &odramos
haber especificado una duraci%n con un nGmero en
milise(undos 4ms5 u otros alores en te)to como -normal-
que equiale a C:: ms o -short- que equiale a BC: ms!
fps8 /::
;on fps indicamos los -frames por se(undo-# es decir# la
cantidad de eces que se actuali$a la propiedad ;SS en cada
se(undo que ocupe la transici%n!
Sna e$ creado el objeto de la clase R)!Tween# habra que
inocar al mtodo start45 para iniciar el efecto# de manera
similar a como imos en el ejemplo anterior! Sin embar(o#
como en este caso 'a hemos indicado la propiedad ;SS que se
debe alterar en las -options-# dentro del la propiedad
-propert'-# 'a no es necesario indicar esa propiedad en el
mtodo start45!
efecto;olorTe)to!start4-FffZZ::-5?
"ota8 como podremos er en la documentaci%n de Mootools# el
mtodo start45 de la clase R)!Tween recibe como mnimo un
par*metro ' como m*)imo tres! El Gnico par*metro que es
obli(ado es el alor de finali$aci%n del efecto! Los otros
dos par*metros opcionales son el nombre del atributo ;SS a
alterar ' el alor del atributo de inicio para el efecto!
m'R)!start4^propert'#_ ^from#_ to5?
Esto quiere decir que el orden con el que tienen que
aparecer los par*metros en la llamada a start45 comien$a
por el nombre de la propiedad ;SS# lue(o el alor de inicio
' acabando por el alor de fin# siendo este Gltimo
par*metro el Gnico requerido siempre!
Lhora podemos er este ejemplo de efecto en una p*(ina
aparte!
El c%di(o completo del ejemplo se muestra a continuaci%n8
+html2
+head2
+title2Efecto cambio color del te)to+1title2
+script2
efecto;olorTe)to , new R)!Tween4-capat)t-# >
propert'8 =color=#
duration8 =lon(=#
fps8 /::
@5?
efecto;olorTe)to!start4-FffZZ::-5?
@5?
+1script2
+1head2
+bod'2
+di id,-capat)t- st'le,-color8 F:::? width8 KB:p)?
paddin(8 Cp)? font8 bold BKpt 7erdana# Qenea# Lrial-2
Esto es una capa para hacer un efecto de cambio de color
del te)to con R)!Tween
+1di2
+1bod'2
+1html2
Jejamos por aqu este tema# aunque todaa nos quedan cosas
que aprender sobre los efectos Mootools ' la clase R)!Tween
en concreto# como la (eneraci%n de eentos sobre efectos#
que eremos resultar*n bastante Gtiles! Todo esto lo
e)plicaremos en pr%)imos artculos!
;%mo definir eentos sobre efectos con Mootools ' la clase
R)# para reali$ar cosas cuando se inicie el efecto o se
termine!
En el artculo anterior comen$amos a e)plicar la clase
R)!Tween ' imos 'a un par de ejemplos sencillos! Lhora
amos a completar las e)plicaciones con nueas pr*cticas un
poco m*s complejas que sin duda ser*n de utilidad# puesto
que realmente ienen mu' bien para cumplir objetios
bastante necesarios en la creaci%n de scripts con Mootools!
Lo que nos quedaba por er eran b*sicamente los eentos que
permite la clase R)# que son heredados por otras clases
para la reali$aci%n de efectos# como R)!Tween! &or ello#
estas e)plicaciones siren para todas las clases
relacionadas con R)!
Qeneralidades sobre eentos en Mootools
Lntes de comen$ar a tratar los eentos en efectos# cabe
recordar a los lectores que en anteriores artculos del
Manual de Mootools e)plicamos muchas de las (eneralidades
que se deben conocer para poder crear eentos en este
framework Jaascript! "o obstante# lo que tenemos que saber
es que cualquier clase de Mootools que implementa Eent#
como los efectos# admite la creaci%n ' definici%n de
eentos!
&ara codificar comportamientos a reali$ar en respuesta a
eentos tenemos dos posibilidades8
;odificar el eento dentro de los -options- eniados al
contructor de la clase!
;odificar el eento por medio del mtodo addEent45 sobre
el objeto 'a instanciado!
7eremos estos dos casos posibles para la definici%n de
eentos!
Eentos en la clase R) ' las que heredan de sta
Los eentos que soportan las clases de efectos en Mootools#
es decir# las clases que dependen en la jerarqua de
herencia de R)# son los si(uientes8
Eento start8 que se produce cuando el efecto comien$a a
ejecutarse
Eento cancel8 que se lan$a cuando se para manualmente un
efecto
Eento complete8 ocurre en el momento que el efecto termina
su ejecuci%n
Eento chain;omplete8 en caso de encadenar arios eentos
con chain# al(o que no hemos isto todaa en el manual# se
lan$a cuando la pila de efectos ha sido completada!
&ara aprender a crear eentos ser* ideal prestar atenci%n
al si(uiente ejemplo! 7amos a crear un efecto en el que
asi(naremos funciones para ejecutar cuando ocurran los
eentos -start- ' -complete-! Los tratamientos que
reali$aremos ser*n simplemente testimoniales# para mostrar
un mensaje cuando el efecto empie$a ' acaba!
&odemos er el ejemplo que amos a construir en una p*(ina
aparte!
Lhora eamos el c%di(o para conse(uir este efecto ' los
eentos!
ar efecto , new R)!Tween4-capaefectos-#>
propert'8 =width=#
duration8 /:::#
unit8 -p)-#
onStart8 function45>
34-mensaje-5!set4-html-# -;omen$ando el efecto!!!-5?
@
@5?
;omo se puede er# hemos creado el efecto con el
constructor de R)!Tween# pasando por par*metro el
identificador de la capa sobre la que queremos aplicarlo '
una serie de confi(uraciones adicionales por medio de un
objeto -options-!
En los -options- indicamos arias cosas como la propiedad
;SS que queremos alterar con el efecto# la duraci%n del
mismo ' las unidades ;SS con las que amos a trabajar!
Ldem*s emos un nueo alor de -options- en el que
asi(namos una funci%n# que es -onStart-! Esa funci%n tiene
el c%di(o que deseamos ejecutar cuando el eento de
comien$o del efecto se produ$ca!
Ls que al comen$ar el efecto 4onStart5 se ejecutar* el
c%di(o de la funci%n# que simplemente alterar* el 6TML
contenido en un elemento de la p*(ina que tiene el
identificador -mensaje-!
Ls hemos isto la primera de las formas de asi(nar un
eento a un objeto# por medio de la definici%n de un mtodo
en las -options- que tiene el nombre -on- se(uido del
nombre del eento que estamos codificando!
Lhora eremos otro modo posible de asi(nar eentos# que se
hace con el propio eento instanciado ' el mtodo addEent!
efecto!addEent4-complete-# function45>
34-mensaje-5!set4-html-# -Termin% el efecto!-5?
@5?
;on este c%di(o conse(uimos que al efecto# instanciado en
la ariable -efecto-# se le aEada un eento -complete-# que
se ejecutar* cuando el proceso del efecto termine!
El c%di(o del eento es bien simple# 'a que s%lo actuali$a
el 6TML de la capa -mensaje-!
Lhora# cuando iniciemos el efecto ' ste se complete# se
actuali$ar* el te)to de la capa mensaje! S%lo nos quedara
llamar al mtodo start45 del eento# que inocaremos cuando
el usuario ha(a clic sobre un par de enlaces creados en la
p*(ina!
34-enlaceenco(er-5!addEent4-click-# function4e5>
e!stop45?
efecto!start4/::5?
@5?
34-enlaceestirar-5!addEent4-click-# function4e5>
e!stop45?
efecto!start4DC:5?
@5?
Tenemos pues dos enlaces con identificadores
-enlaceenco(er- ' -enlaceestirar-# que llaman al mtodo
start45 del efecto creado anteriormente# eniando el alor
numrico que queremos asi(nar a la propiedad ;SS dada de
alta en las -options-# que era width! Ldem*s# como en las
-options- 'a habamos asi(nado las unidades ;SS -p)-# con
pasar un alor numrico a start45# ser* suficiente# porque
el efecto 'a sabe que son p)eles lo que estamos midiendo!
&odemos er el c%di(o completo de esta p*(ina con efectos
Mootools ' eentos!
+html2
+head2
+title2Eentos en efectos Mootools+1title2
+script2
ar efecto , new R)!Tween4-capaefectos-#>
propert'8 =width=#
duration8 /:::#
unit8 -p)-#
onStart8 function45>
34-mensaje-5!set4-html-# -;omen$ando el
efecto!!!-5?
@
@5?
efecto!addEent4-complete-# function45>
34-mensaje-5!set4-html-# -Termin% el efecto!-5?
@5?

34-enlaceenco(er-5!addEent4-click-# function4e5>
e!stop45?
efecto!start4/::5?
@5?
34-enlaceestirar-5!addEent4-click-# function4e5>
e!stop45?
efecto!start4DC:5?
@5?
@5?
+1script2
+1head2
+bod'2
+di id,-capaefectos- st'le,-width8 C::p)? back(round.
color8 FffccUU? paddin(8 /:p)? oerflow8 hidden?-2
Esta capa es sobre la que o' a crear los efectos con la
clase R)!Tween# a los que asi(naremos diferentes eentos
para probar!
+1di2
+p2
+a href,-F- id,-enlaceestirar-2Estirar capa con efecto+1a2
c
+a href,-F- id,-enlaceenco(er-2contraer capa con efecto+1a2
+1p2
+di id,-mensaje-2+1di2
+1bod'2
+1html2
&ara acabar# dejamos de nueo el enlace para er el ejemplo
en marcha!
Esperamos que con estas indicaciones sea suficiente para
que cualquier persona pueda reali$ar efectos mediante
Mootools# con R)!Tween o cualquier clase heredada de R)# a
los que asi(nar cualquiera de los eentos disponibles!
Encadenando funciones ' efectos Mootools por medio de la
clase ;hain# para una ejecuci%n secuencial# uno a uno!
Sna de las cosas que querremos hacer en al(Gn momento con
Mootools es encadenar diersos efectos de manera que
ten(amos una pila de diersas acciones o cambios en la
p*(ina# que se realicen uno detr*s de otro ' que uno no
empiece hasta que ha terminado el anterior! Esto en
Mootools se reali$a con la clase ;hain# que est* en(lobada
dentro de la librera ;lass!E)tras!
En este captulo del Manual de Mootols eremos c%mo
utili$ar chain sobre clases nueas que podemos crear
nosotros ' en un futuro artculo e)plicaremos c%mo
encadenar diersos efectos de manera secuencial con la
clase RH de Mootools!
&or qu ;hain
Si hemos probado al(una e$ a lan$ar dos efectos distintos
con Mootools# aunque estn en lneas separadas# una detr*s
de otra# en realidad lo que eremos en la p*(ina es como si
se ejecutasen a la e$! Esto es porque los efectos llean
un tiempo para reproducirse en la p*(ina# (eneralmente
confi(urable! Ll estar las dos lneas para la llamada a
efectos se(uidas# su ejecuci%n se reali$a casi en el mismo
instante# pues en realidad una llamada a un efecto no
espera la finali$aci%n de otros efectos pendientes!
&or ejemplo eamos este c%di(o8
efecto/ , new R)!Tween4=capa=# >
propert'8 =width=#
duration8 /:::
@5?
efecto/!start4K::5?
efectoB , new R)!Tween4=capa=# >
propert'8 =width=#
duration8 /:::
@5?
efectoB!start4C:5?
Este script tiene dos efectos distintos 4los dos para
alterar la anchura de un elemento de la p*(ina con una
transici%n5# uno detr*s de otro en el c%di(o# pero
realmente si lo pusiramos en marcha# eramos como se
ejecutan a la e$! Si queremos esperar a terminar un efecto
para comen$ar el otro# debemos utili$ar las utilidades que
nos da la clase ;hain!
&odemos er el script en marcha en una p*(ina aparte!
Ls que# si queremos que se ejecuten efectos o cualesquiera
acciones en secuencia# paso a paso ' esperando que termine
la anterior acci%n para comen$ar la si(uiente# tendremos
que usar ;hain!
Stili$aci%n de ;hain en Mootools
;hain es una clase que de por si no hace nada# por lo que
lo normal ser* usarla sobre otras clases# en las que
implementaremos ;hain para reali$ar una pila de acciones!
Ls pues# lo m*s normal ser* definir clases que implementen
la clase ;hain ' as# dentro de esas clases tendremos
acceso a arios mtodos que realmente pertenecen a ;hain!
El m*s importante de los mtodos es chain45# que permite
hacer una cola de funciones a ejecutar! Lue(o tendremos#
entre otros# el mtodo call;hain45# que hace la llamada a
la primera funci%n en la cola de chains!
7eamos esta clase8
ar ;lase;hain , new ;lass4>
11implemento ;hain
Pmplements8 ;hain#

this!chain4
function45> alert4-hola-5? this!call;hain45?@#
function45> alert4-Mis-5? this!call;hain45?@#
function45> alert4-ami(os]-5? @
5?
@#

ejecuta;hain8 function45>
this!call;hain45?
@
@5?
En ella se ha implementado ;hain ' en el constructor se ha
utili$ado el mtodo chain45 para hacer una cola de
funciones a ejecutar! Lue(o tenemos un mtodo llamado
ejecuta;hain45 que lo he hace es llamar a la primera
funci%n que ha'a en la cola! Ldem*s# cada una de las
funciones de la cola# menos la Gltima# hacen uso de
call;hain45 al final de su c%di(o para llamar a la funci%n
si(uiente de la cola una e$ ha'an terminado!
Esta clase# ' su cola de funciones con ;hain# podramos
ponerla en marcha de la si(uiente manera8
mi;lase;hain , new ;lase;hain45?
mi;lase;hain!ejecuta;hain45?
;on ello se ejecutar*n todas las funciones de la cola# como
podemos er en este ejemplo en una p*(ina aparte!
En el si(uiente artculo continuaremos e)plicando la clase
;hain sobre efectos creados con R) de Mootools!
Lhora eremos c%mo encadenar diferentes efectos Mootools
con la clase R) que implementa ;hain!
En el artculo anterior del Manual de Mootols e)plicamos
las (eneralidades sobre la clase ;hain# que nos permite
encadenar la ejecuci%n de diersas funciones de manera
secuencial! En este artculo eremos el ejemplo m*s claro
de utilidad de ;hain# que es encadenar diersos efectos#
para que se ejecuten uno detr*s de otro!
;hain sobre un efecto Mootools
;omo decamos# ;hain es una tpica clase a utili$ar con
efectos en Mootools! &or ello# la propia clase R) 'a
implementa ;hain# para que no ten(amos m*s que utili$ar los
eentos necesarios para apilar efectos!
Ldem*s los efectos creados con la clase R)# tienen la
particularidad que cuando se inician ' una e$ se realice
la transici%n del efecto# se llama autom*ticamente a la
pr%)ima funci%n que ha'a en el chain45# por lo que no
tenemos que hacer el call;hain45 e)plcitamente!
El primer c%di(o que imos en este artculo de
desarrolloweb!com# que haca dos efectos pero se ejecutaban
a la e$ por no haberlos colocado en un ;hain# se podra
haber hecho se(Gn la alternatia que podremos er en el
si(uiente c%di(o# para que se ejecute un efecto despus del
otro8
efecto , new R)!Tween4=capa=# >
propert'8 =width=#
duration8 /:::
@5?
efecto!chain4
function45 >
efecto!start4C:5?
@
5?
efecto!start4K::5?
;omo la clase R) implementa ;hain# no tenemos que hacer
nosotros el -implements8 ;hain-! Ldem*s# emos que no hace
falta tampoco hacer la llamada al mtodo call;hain45 para
se(uir con la cola de efectos!
Si lo deseas# puedes er el ejemplo en una p*(ina aparte!
Obiamente# podemos encolar tantas funciones como deseemos#
eni*ndolas como par*metros al mtodo chain45# de la
si(uiente manera8
efecto , new R)!Tween4=capa=# >
propert'8 =back(round.color=#
duration8 0:::
@5?
efecto!chain4
function45 >
this!start4-F::::::-5?
@#
function45 >
this!start4-Fcc::::-5?
@#
function45 >
this!start4-F::cc::-5?
@#
function45 >
this!start4-F::::cc-5?
@#
function45 >
this!start4-F::::::-5?
@
5?
efecto!call;hain45?
&or cambiar un poco el c%di(o# hemos hecho uso de la
ariable this dentro del mtodo chain45# que hace
referencia al objeto# en este caso el efecto# sobre el que
estamos trabajando! Ldem*s# en e$ de iniciar el primer
efecto con el mtodo start45# lo hemos encolado en los
chain# de modo que puedo empe$ar la secuencia con una
llamada al mtodo call;hain45!
&uedes er en marcha el ejemplo en una p*(ina aparte!
;hain sobre arios efectos distintos
Lhora eamos un chain en el que participan efectos
diferentes! En el ejemplo anterior metamos en la cola
distintas llamadas a start45 sobre un mismo efecto que
alteraba el color de fondo! Lhora amos a poner en marcha#
en secuencia# diferentes efectos que alteran propiedades
distintas de arios elementos de la p*(ina!
&ara ello amos a construir una clase que se encar(ar* de
encadenar los efectos!
ar ;lase;hainEfecto , new ;lass4>
11implemento chain
Pmplements8 ;hain#

this!efecto/ , new R)!Tween4=elem/=# >
propert'8 =opacit'=#
duration8 /:::#
on;omplete8 function45>
this!call;hain45?
@!bind4this5
@5?
this!efectoB , new R)!Tween4=elemB=# >
duration8 /:::#
this!call;hain45?
@!bind4this5
@5?
this!efecto0&reio , new R)!Morph4=elem0=# >
duration8 /:::#
this!call;hain45?
@!bind4this5
@5?
this!efecto0 , new R)!Tween4=elem0=# >
duration8 /:::
@5?
@#

efectos8 function45>
this!chain4
function45> this!efecto/!start4/#:5? @#
function45> this!efectoB!start4/#:5? @#
function45> this!efecto0&reio!start4>=width=8
B::# =color=8 =F::::::=# =back(round.color=8
=Fccccff=@5? @#
function45> this!efecto0!start4/#:5? @
5?
this!call;hain45?
@
@5?
;omo se puede er# entran en jue(o arios efectos distintos
a la e$ ' se aplican sobre distintos elementos de la
p*(ina! Lue(o con el mtodo efectos45 se meten en la cola '
se inoca al primero con call;hain45!
Los efectos tienen un eento on;omplete para que cuando se
termine su reproducci%n se llame al si(uiente efecto de la
cola chain!
&odemos instanciar la clase ' llamar a los efectos de esta
forma8
mi;lase;hainEfecto , new ;lase;hainEfecto45?
mi;lase;hainEfecto!efectos45?
&odemos er el ejercicio en una p*(ina aparte!
;on esto hemos debido aprender a manejar la clase ;hain '
encadenar diersos efectos Mootools o funciones
La clase Options de Mootools proee de un mecanismo
sencillo para que nuestras clases ten(an opciones de
confi(uraci%n a los que se puede dar alores por defecto!
Options es una de las clases que proporciona el framework
Jaascript Mootools ' que debemos conocer para desarrollar
componentes f*cilmente personali$ables ' reutili$ables!
&ertenece al paquete ;lass E)tras# que ofrece arias
utilidades interesantes para las clases de pro(ramaci%n
orientada a objetos!
La clase Options nos facilitar* mucho la ida a la hora de
hacer sistemas personali$ables ' confi(urables por el
pro(ramador! "os ahorrar* adem*s muchas lneas de c%di(o
cuando queramos crear objetos que se puedan personali$ar
por una serie de par*metros ' nos permitir* definir unas
opciones por defecto# que ten(an alide$ cuando el
pro(ramador no especifique todos los alores de
confi(uraci%n de los objetos que se instancien!
La importancia de conocer la clase Options ' utili$arla
cuando creemos componentes Mootools# se percibe sobre todo
cuando la incorporamos al conjunto de recursos utili$ados
en nuestro da a da como desarrolladores Jaascript!
Obseraremos al poco tiempo que resulta mu' c%moda de usar
' que nos da unas posibilidades enormes de reutili$aci%n de
los componentes# personali$aci%n de sus funciones# as como
la posibilidad de e)tender f*cilmente las clases con nueas
funcionalidades# sin que ello implique reformar el c%di(o
fuente de nuestras p*(inas en arios sitios para utili$ar
las nueas ersiones de las clases! En cualquier caso# en
este artculo del Manual de Mootools de JesarrolloNeb!com
esperamos que puedas apreciar todas las entajas de uso de
esta clase!
&odra enir bien un ejemplo para que las personas puedan
entender c%mo la clase Options nos permite or(ani$ar la
iniciali$aci%n de los objetos! &ensemos que hemos
desarrollado un componente para crear un popup J6TML! Este
popup mostrara un te)to en una capa emer(ente ' se podra
confi(urar indicando su altura ' la anchura! &or ejemplo el
c%di(o para construir un popup como este podra ser8
ar mi&opup 4enlace# te)to# anchura# altura5?
Todos esos datos podra necesitarlos el constructor! El
enlace 4del primer par*metro -enlace-5 sera el
identificador del enlace o elemento que# cuando se hace
clic sobre l# prooca que se abra la entana emer(ente! El
resto de datos te)to# anchura ' altura se deben indicar
para confi(urar el popup!
Tueno# pues pensemos que dentro de unos das queremos
confi(urar otras cosas como el color de fondo del popup# si
tiene o no un bot%n para cerrar# si queremos que dentro del
popup se muestre una p*(ina distinta por medio de un
iframe# si se quiere poner un titular en la entana del
popup# etc! Lhora el constructor para crear la entana
podra tener esta forma8
ar mi&opup 4enlace# te)to# anchura# altura# fondo# cerrar#
S9LPframe# titular5?
Esto nos podra obli(ar a cambiar todos los constructores
que abren popups con la ersi%n anterior de la clase# para
incorporar todos los nueos par*metros# o crear distintas
ersiones del popup# una sencilla ' otra compleja! O bien
hacer una Gnica clase que tendra un buen peda$o de c%di(o
s%lo para hacer la comprobaci%n de si e)iste o no ese
par*metro en el constructor ' dar un alor por defecto para
cada uno de los datos que no se ha'an indicado! Todo esto
es un trabajo que puede lle(ar a ser pesado ' adem*s
innecesario!
Sera mucho mejor hacer al(o como esto8
ar mi&opup 4enlace# opciones5
El constructor del popup sera siempre el mismo# con dos
par*metros# el enlace que prooca la apertura de la capa
emer(ente ' unas cuantas opciones# que podran incluso
omitirse ' simplemente tomar los alores por defecto! Lo
mejor es que implementar esas opciones por medio de la
clase Options es un paso casi inmediato que nos ahorrar*
adem*s (ran cantidad de c%di(o Jaascript!
Sso de la clase Options
L lo lar(o de este manual de Mootools 'a hemos isto
multitud de ejemplos que utili$an el mecanismo proisto por
la clase Options# como la clase R) ' sus deriadas! Si
recordamos# al crear un efecto con Mootools# debamos
indicar en el constructor del efecto una serie de datos
opcionales# como la duraci%n del efecto# los frames por
se(undo# etc!
miEfecto , new R)!Tween4-micapa-# >
propert'8 =color=#
duration8 =slow=#
fps8 B:
@5?
&odemos er que el constructor de R)!Tween recibe como
par*metros el elemento sobre el que se est* creando el
efecto ' diersas otras opciones indicadas entre llaes!
Esas opciones se indican con notaci%n de objetos# indicando
el nombre de opci%n ' su alor! 9ealmente la clase R)!Tween
tiene arias opciones adicionales que se pueden confi(urar#
pero nosotros s%lo estamos indicando unas cuantas!
Pnternamente lo que hace R)!Tween es implementar la clase
Options ' los datos que recibe los procesa por medio de un
mtodo definido en la clase Options! "osotros podemos hacer
lo mismo en nuestras propias clases con mu' poco esfuer$o!
Jesarrollo con la clase Options de Mootools
Lhora que 'a hemos debido de comprender para qu nos sire
la clase Options ' las entajas que nos ofrece a la hora de
hacer componentes para nuestras webs# pon(amos las manos en
la masa ' comencemos a e)plicar su funcionamiento!
;uando pro(ramamos cualquier clase# donde pretendamos
aproechar las posibilidades de confi(uraci%n '
personali$aci%n de los objetos# tenemos que implementar la
clase Options! &ara indicar esto tenemos que utili$ar la
palabra Pmplements ' el nombre de la clase que deseamos
implementar# en este caso -Options- 4con ma'Gscula
inicial5!
"ota8 para los que no sepan qu es implementar clases ' en
concreto el funcionamiento de Pmplements en Mootools#
recomendamos la lectura del artculo implementando clases
en Mootools!
El c%di(o de una clase que implementa Options podra ser
como este8
ar Mi;laseOpciones , new ;lass4>
Pmplements8 Options#

11c%di(o de nuestra clase!!!
@5?
Lue(o# dentro de la clase que estamos pro(ramando# tenemos
que indicar las opciones por defecto de la clase por medio
de la propiedad -options- 4con la inicial en minGscula en
este caso5! Estas opciones por defecto ser*n indicadas en
formato de objeto# con pares llae# alor# pudiendo definir
como alores incluso funciones! &odemos indicar las
opciones por defecto justo debajo de la lnea del
Pmplements8 Options!
ar Mi;laseOpciones , new ;lass4>

options8 >
=opcion/=8 =alor de cadena=#
=otraOpcion"umerica=8 KC#
=otraOpcionRuncion=8 function45>
11c%di(o de la funci%n
@
@#

11resto del c%di(o de nuestra clase!!!
@5?
;omo se puede er# se indican tantas opciones como se
desee# del tipo que necesitemos# ' los alores que deben
tomar por defecto!
En el constructor de esta clase de ejemplo que implementa
Options recibiremos como par*metros tantos datos como sean
necesarios ' adem*s una ariable con las opciones de
personali$aci%n que se quieran indicar para cada uno de los
objetos a instanciar! I adem*s# mu' importante# colocaremos
una llamada al mtodo setOptions45 del propio objeto que se
est* creando# al cual le pasaremos las opciones de
confi(uraci%n de ese objeto recibidas como par*metro!
initiali$e8 function4capa#opciones5>
this!setOptions4opciones5?
11resto del c%di(o del constructor
@
El mtodo setOptions45 recibe las opciones que se eniaron
al constructor ' se encar(a de comprobar qu alores se han
indicado '# si no e)iste al(uno# marcar el alor por
defecto indicado en la clase!
L este constructor podramos llamarle con un c%di(o como
este8
ar miObjeto;laseMi;lase , new Mi;laseOpciones4-capa-# >
=opcion/=8 =alor ))))))=#
=otraOpcionRuncion=8 function45>
11c%di(o de la funci%n
@
@5?
;omo emos# las opciones que eniamos para procesar con la
clase Options# que estamos pas*ndole al constructor en el
se(undo par*metro# tienen arios alores en una notaci%n de
objeto! Je las tres opciones de confi(uraci%n de la clase
miObjeto;laseMi;lase# s%lo se est*n indicando dos de ellas#
lue(o la a omitida se le asi(nar* el alor por defecto
confi(urado en la propiedad options clase!
En cualquier lu(ar del c%di(o de la clase podremos acceder
a las opciones de confi(uraci%n del objeto# 'a se ha'an
indicado al hacer el objeto o se ha'an tomado por defecto!
&ara ello disponemos de la propiedad options# que
utili$amos de esta manera8
this!options!otraOpcion"umerica
Ejemplo completo de uso de Options
&ara acabar eamos un ejemplo del uso de Options para
iniciali$ar atributos en un objeto! Es un ejemplo sencillo
en el que tenemos un efecto que se puede personali$ar! El
efecto hace un cambio en una capa por medio de la clase
R)!Morph! "osotros tendremos una clase que tiene definidos
unos alores por defecto para el efecto ' que se pueden
personali$ar por medio de Options!
"ota8 R)!Morph es similar a R)!Tween# con la diferencia que
se pueden indicar arias propiedades ;SS para hacer un
efecto de transici%n con todas a la e$# en lu(ar de una
sola propiedad ;SS que permite R)!Tween!
El c%di(o de la clase sera el si(uiente8
ar ;apaEfectos , new ;lass4>
111implemento Options

11defino las options por defecto
options8 >
fondoTransformar8 =F:::=#
anchuraTransformar8 /::#
te)toTransformar8 =Ffff=
@#
11constructor que recibe las options para cada objeto
que se cree!
initiali$e8 function4capa#opciones5>
this!capa , 34capa5?
this!setOptions4opciones5?
ar m'R) , new R)!Morph4this!capa# >duration8
=lon(=@5?
m'R)!start4>
=width=8 ^this!capa!(etSt'le4=width=5#
this!options!anchuraTransformar_#
=back(round.color=8
^this!capa!(etSt'le4=back(round.color=5#
this!options!fondoTransformar_#
=color=8 ^this!capa!(etSt'le4=color=5#
this!options!te)toTransformar_
@5?
@
@5?
Lhora# si lo deseamos# podemos aEadir el c%di(o para usar
esa clase ' (enera efectos de arios tipos# donde definimos
unas u otras opciones!
34-sinopciones-5!addEent4-click-# function45>
ar efectosSinOpciones , new ;apaEfectos4-micapa-5?
@5?
34-conopciones-5!addEent4-click-# function45>
ar efectosSinOpciones , new ;apaEfectos4-micapa-# >
fondoTransformar8 =F::::ff=#
anchuraTransformar8 C::
@5?
@5?
34-otrasopciones-5!addEent4-click-# function45>
ar efectosSinOpciones , new ;apaEfectos4-micapa-# >
fondoTransformar8 =F:f:=#
anchuraTransformar8 0C:#
te)toTransformar8 =F::V=
@5?
@5?
@5?
;omo se puede er# se instancian arios objetos de la clase
;apaEfectos# indicando en su constructor opciones
diferentes!
&odemos er el enlace al ejemplo en funcionamiento!
;onclusi%n sobre Options en Mootools
&or e)periencia propia puedo afirmar que la clase Options
de Mootools es mu' Gtil para producir c%di(o m*s
personali$able ' que se pueda reutili$ar con ma'or
facilidad! Es recomendable conocer esta clase desde el
principio# porque a'uda a crear c%di(o m*s limpio ' con
ma'or potencial! Sna e$ la conoces te a'uda a pensar m*s
-en (rande- ' hacer componentes que te ser*n Gtiles en un
ma'or nGmero de ocasiones ' durante m*s tiempo!
Otro ejemplo que queremos recomendar para aprender a
trabajar con las Options de Mootools se puede encontrar en
el artculo ;ampo input con e)plicacion din*mica! Ls como
otros artculos en el taller de Mootools!
El mtodo window!(etSi$e de Mootools# para obtener tamaEos
de *rea del nae(ador ' scroll de p*(ina! Jependiendo de la
declaraci%n Joct'pe funcionar* bien o no en Pnternet
E)plorer!
6acemos un pequeEo inciso en el manual de Mootools para
e)plicar un detalle que es importante para tratar con la
funci%n window!(etSi$e45# que sire para que el nae(ador
nos deuela arios alores# como las dimensiones de *rea
disponible donde se muestran las p*(inas web o los
distintos scrolls o despla$amientos reali$ados o posibles
en la p*(ina completa!
;onocer el *rea de trabajo disponible del nae(ador nos
puede serir para estructurar los espacios disponibles para
la maquetaci%n o para mostrar elementos en posiciones
especficas o con tamaEos definidos# que ariaran se(Gn la
medida de la entana del nae(ador ' la confi(uraci%n de
elementos de la interfa$ que ten(a el usuario!
Ltenci%n8 cuando hablamos del *rea del espacio Gtil
del nae(ador "O nos referimos al *rea de la
pantalla# porque sta suele ocupar un espacio ma'or
4por ej la definici%n de pantalla Z::)U::# que
depende de la confi(uraci%n del usuario5# sino la
parte donde se muestran las p*(inas# dentro de la
entana del nae(ador# despus de quitar toda la
interfa$ de menGs ' botones del browser!
Obtener las dimensiones de Nindow en Mootools /!/
L;TSLLPdLJO8 Estas e)plicaciones que ienen a continuaci%n
son para Mootools ersi%n /!/! 9esulta que en la ersi%n
/!B del framework ha cambiado un poco la funci%n (etSi$e45#
creemos que a mejor! E)plicar al final del artculo c%mo
hacer esto mismo para Mootools /!B!
&ara obtener los datos en Mootools de las dimensiones de la
entana del nae(ador ha' una funci%n# como decimos#
llamada (etSi$e45! Jicho mtodo depende del objeto window#
que est* e)tendido por el framework Mootools en el archio
Nindow!Si$e!js! 4mirar la documentaci%n de Mootools5 para
saber acerca de Nindow!Si$e!js# aunque lo amos a e)plicar
al(unas cosas en este artculo!
Nindow!Si$e!js incorpora arios mtodos al objeto window
del nae(ador! El que nos interesa es window!(etSi$e45# que
deuele lo mismo que el mtodo Element!(etSi$e45! 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 entana# o mejor dicho# al espacio Gtil del
nae(ador# donde se mostrar*n las p*(inas! En concreto# el
objeto deuelto tiene estas propiedades8
>
=scroll=8 >=)=8 /:# ='=8 /:@#
=si$e=8 >=)=8 K::# ='=8 U::@#
=scrollSi$e=8 >=)=8 U::# ='=8 /:::@
@
&or e)plicarlo con palabras# deuele un objeto que tiene
tres propiedades8 scroll# si$e ' scrollSi$e# que a su e$
tienen dos propiedades# ) e '# que son alores de tamaEos
en hori$ontal ' ertical! ;ada uno de esos tamaEos
si(nifica8
Scroll8 El despla$amiento que se ha hecho en la p*(ina# con
las barras de despla$amiento hori$ontales ' erticales
respectiamente!
Si$e8 El tamaEo del *rea Gtil de la entana del nae(ador#
destinado a mostrar la p*(ina web!
scrollSi$e8 El tamaEo de la p*(ina completa# que puede ser
o no ma'or que el *rea disponible para mostrarla! Si es
ma'or quiere decir que para mostrar toda la p*(ina se
tendr*n que moer las barras de despla$amiento hori$ontales
o erticales!
&ara que quede claro# pon(o una ima(en esquem*tica sobre
los alores de (etSi$e45!
Jejo aqu un ejemplo de uso de window!si$e45 en Mootools8
+]JO;TI&E html &STLP; -.11N0;11JTJ H6TML /!: Strict11E"-
-http811www!w0!or(1T91)html/1JTJ1)html/.strict!dtd-2
+html2
+head2
+METL 6TT&.EOSP7,-;ontent.T'pe-
;O"TE"T,-te)t1html?charset,PSO.ZZCV./-2
+title2Ejemplo Si$e+1title2
+script src,-mootools.release./!//!js-
+script2
function dameTamanos45>
tamanos , window!(etSi$e45?
alert 4-TamaEo del *rea disponible8 - M tamanos!si$e!) M
- ) - M tamanos!si$e!'5?
alert 4-Scroll8 - M tamanos!scroll!) M - ) - M
tamanos!scroll!'5?
alert 4-scrollSi$e8 - M tamanos!scrollSi$e!) M - ) - M
tamanos!scrollSi$e!'5?
@
window!addEent4=domread'=# dameTamanos5?
window!addEent4=resi$e=# dameTamanos5?
+1script2
+1head2
+bod'2
+h/2Ejemplo de prueba de si$e en Mootools+1h/2
\
+1bod'2
+1html2
Nindow!(etSi$e45 para mootools /!B
Lctuali$ado 4/V1:Z1B::Z58 Tal como hemos e)plicado en las
anteriores lneas# con Mootools se ha implementado un
mtodo en window llamado (etSi$e45! Esto no ha cambiado!
&ero lo que s que cambia en Mootools /!B es que ahora
todas las propiedades de dimensiones de window no dependen
de un Gnico mtodo (etSi$e45!
Mootools tiene una serie de mtodos# implementados en
window ' en la clase Element# que siren para obtener
dimensiones de elementos de la p*(ina o de la propia
entana del nae(ador!
Lhora# para obtener el *rea disponible de espacio para la
p*(ina# utili$amos window!(etSi$e45! &ara obtener el scroll
reali$ado sobre la p*(ina tenemos el mtodo
window!(etScroll45 ' para saber cuan (rande es el *rea de
la p*(ina 4lo que se e m*s la parte que queda fuera# pero
que podemos er haciendo scroll .despla$ando con las barras
de despla$amiento.5# utili$amos window!(etScrollSi$e45!
Estos tres mtodos tienen como respuesta un objeto que
contiene dos propiedades ) e '# con las coordenadas o
tamaEos que correspondan!
&or lo tanto# ahora en Mootools /!B# para obtener las
dimensiones del *rea disponible del nae(ador hacemos8
dimension , window!(etSi$e45?
11en dimension!) est* el tamaEo en pi)els hori$ontal del
*rea donde se muestra la p*(ina!
11en dimension!' tenemos el tamaEo en pi)els del *rea en
ertical!
Joct'pe adecuado para (etSi$e45 en Mootools
Ltenci%n a este pequeEo (ran detalle8 dependiendo de la
declaraci%n Joct'pe que ha'amos puesto en la p*(ina la
funci%n (etSi$e45 de Mootools funcionar* bien o no en
Pnternet E)plorer!
En Rirefo) no e)iste este problema# pero en Pnternet
E)plorer# si no utili$amos un Joct'pe adecuado# los alores
de si$e nos an a dar cero!
;on este Joct'pe no amos a tener nin(Gn problema# aunque
se(uramente funcione tambin con otros doct'pe8
+]JO;TI&E html &STLP; -.11N0;11JTJ H6TML /!: Strict11E"-
-http811www!w0!or(1T91)html/1JTJ1)html/.strict!dtd-2
O bien este otro8
+]JO;TI&E html &STLP; -.11N0;11JTJ H6TML /!:
Transitional11E"- -http811www!w0!or(1T91)html/1JTJ1)html/.
transitional!dtd-2
Este es un detalle que# si no lo conoces# te puede hacer
perder bastante tiempo! Lunque en foros est* comentado ' ha
sido f*cil encontrar la soluci%n!
Tases para aprender a trabajar con Lja) utili$ando el
framework Jaascript Mootools ' la clase 9equest!
Sin lu(ar a dudas# una de las mejores utilidades de
cualquier framework Jaascript es la posibilidad de crear
aplicaciones web en el cliente que hacen uso de Lja) para
comunicar con el seridor ' mostrar la respuesta sin tener
que recar(ar todo el contenido de la p*(ina! &ro(ramar
scripts que utili$an Lja) es un poco complicado# porque
cada nae(ador tiene sus particularidades para producir las
llamadas al seridor ' recibir la respuesta# lo que nos
obli(ara en un principio a reali$ar scripts con distinto
c%di(o a ejecutar dependiendo del cliente que nos isita!
&ero con Mootools podemos olidarnos de qu nae(ador est*
utili$ando el isitante# porque el framework dispone de
unas clases 4de pro(ramaci%n orientada a objetos5# con sus
mtodos# que funcionan de la misma manera en todos los
nae(adores# lo que nos permite crear c%di(o que ser*
compatible con la inmensa ma'ora de los usuarios que nos
podr*n isitar!
En este artculo pretendo e)plicar en lneas (enerales c%mo
funcionan las clases que propone Mootools para la
comunicaci%n con Lja) ' antes de empe$ar# initamos a los
lectores a leer el Manual de Mootools# que contiene mucha
informaci%n que debes conocer antes de poder entender '
aproechar este te)to!
;lase 9equest ' heredadas de Mootools
La clase 9equest es la que nos proporciona la ma'ora de
las funciones que amos a necesitar cuando queramos crear
una cone)i%n Lja) desde el cliente! Es# tal como apuntan en
la documentaci%n de Mootools# un enoltorio para pro(ramar
nuestros propios Lja)# es decir# una clase que encapsula
las complejidades de una cone)i%n Lja) ' nos pone a nuestra
disposici%n mtodos sencillos para reali$ar las acciones
m*s habituales que podamos necesitar al usar esta
tecnolo(a!
La clase 9equest es adem*s importante porque sire como
base de otras clases que tambin reali$an cone)iones Lja)
con comportamientos especficos# puesto que Mootools ofrece
otras clases para inocar llamadas por medio de Lja) que
adem*s muestran la respuesta en el te)to de un elemento
6TML de la p*(ina o procesan una respuesta en formato JSO"!
Ls pues# todo lo que aprendamos de la clase 9equest lo
podemos aplicar tambin a otras dos clases m*s elaboradas#
que son las si(uientes8
9equest!6TML8 ;lase que hereda de 9equest# con la
diferencia principal que tiene una propiedad adicional
llamada -update-# en la que podemos pasar un objeto
referencia de un elemento de la p*(ina donde queremos que
uelque la informaci%n deuelta por el seridor al hacer la
solicitud Lja)!
9equest!JSO"8 ;lase que hereda de 9equest que tiene la
particularidad que puede eniar ' recibir objetos
Jaascript en notaci%n JSO"!
Trabajar con 9equest para hacer cone)iones Lja) no tiene
mucha dificultad# una e$ sabemos utili$ar las clases que
nos ofrece Mootools# pero s que e)isten una serie de
propiedades# mtodos ' eentos propios de estas clases que
deberemos conocer para cumplir nuestros objetios! ;asi
todas las necesidades que podamos ima(inar tienen una forma
de reali$arse por medio de esta clase# como el eno de
informaci%n en la solicitud por medio de &OST o QET# eno
de cabeceras 6TT&# preenci%n de la cach del nae(ador#
definir si se tienen que ejecutar o no los scripts
recibidos en la respuesta# etc!
En el si(uiente artculo e)plicaremos c%mo trabajar con la
clase 9equest# con unos ejemplos sencillos que iremos
complicando poco a poco para aEadir nueas funciones en
nuestras aplicaciones Lja)! "o obstante# de momento tambin
queremos recomendaros la lectura de unos talleres de
Mootools reali$ados anteriormente en los que se e)plica
c%mo hacer Lja) por la pr*ctica!
Ejemplo sencillo de Lja) en Mootools!
Ejemplo m*s elaborado de Lja) con Mootools!
E)plicaci%n del proceso de creaci%n de una cone)i%n Lja)
con Mootools ' un par de ejemplos sencillos de utili$aci%n
de la clase 9equest!
En el artculo anterior introdujimos las clases que debes
conocer para trabajar con Lja) en Mootools# es decir# la
clase 9equest ' sus heredadas# que nos ofrecen la
infraestructura para confi(urar ' ejecutar arios tipos de
solicitudes Lja)! Lhora eremos un ejemplo sencillo para
que aprendamos a trabajar con la clase 9equest!
&ara reali$ar cone)iones Lja) con la clase 9equest tenemos
que instanciar un objeto de la clase 9equest#
confi(ur*ndolo tal como necesitemos a tras de un objeto
de opciones que eniaremos al constructor! Lue(o deberemos
iniciar la solicitud Lja) en cualquier momento# con el
mtodo send45! Ll reali$arse la cone)i%n con el seridor#
al completarse o al producirse un error# la clase 9equest
produce eentos# en los que podemos escribir el c%di(o
Jaascript a ejecutar cuando ocurra cada uno de esos casos!
;omo podremos ima(inar al leer el p*rrafo anterior#
trabajar con 9equest no es una acci%n que se hace en un
solo paso# sino que tendremos que conocer la clase para
poder confi(urar la cone)i%n# crear el c%di(o de al(unos
eentos que produce ' reali$ar la cone)i%n en si con el
mtodo send45! 7eamos un caso sencillo!
11instancio el objeto 9equest
ar miLja) , new 9equest4>
-url-8 -contenido!html-
@5?
11codifico el eento onSuccess# que se ejecuta cuando la
solicitud se ejecut% con )ito
miLja)!addEent4-success-# function4respuestaLja)5>
11coloco el te)to recibido como respuesta en el c%di(o
6TML de un elemento de la p*(ina
34-contenedoraja)-5!set4-html-# respuestaLja)5?
@5?
11inoco el mtodo send para ejecutar la llamada Lja)
miLja)!send45?
En el anterior c%di(o# como primer paso# instancio un
objeto 9equest# pas*ndole al constructor un objeto de
opciones con las que confi(urar la cone)i%n Lja)! En este
caso esto' eniando Gnicamente una propiedad para su
confi(uraci%n que es -url-# con la direcci%n del archio
que quiero solicitar en esta cone)i%n! E)isten muchas otras
opciones de confi(uraci%n que nos ser*n Gtiles en diersos
casos ' que eremos m*s adelante!
;omo se(undo paso codifico el eento -onSuccess-#
aEadindolo al objeto 9equest instanciado en el paso
anterior por medio de la funci%n addEent45# que recibe el
nombre del eento que estamos definiendo ' la funci%n que
queremos que se ejecute cuando se produ$ca dicho eento!
"ota8 cuando utili$o addEent45 no ten(o que poner el -on-
de -onSuccess- en el nombre del eento que quiero aEadir!
El c%di(o del eento podra ser el que nosotros
necesit*semos# en mi caso simplemente he escrito la
respuesta en un elemento de la p*(ina# que me lle(a en una
ariable que he llamado -respuestaLja)- que recibe la
funci%n que tiene el c%di(o a procesar en el eento!
"ota8 La funci%n de este eento tambin podramos haberla
escrito como una de las propiedades del objeto de options
eniado al constructor para instanciar el objeto 9equest!
7eremos pronto un ejemplo!
El tercer paso es ejecutar el mtodo send45# sobre el
objeto instanciado de la clase 9equest# que iniciar* la
solicitud Lja)!
&odemos er una p*(ina con este ejemplo en marcha!
El c%di(o completo de este ejemplo de solicitud Lja) sera
el si(uiente8
+html2
+head2
+title2Ejemplo Lja) mootools+1title2
+script src,-mootools./!B!/.core.'c!js-
+script2
alert4-&*(ina car(ada!!! o' a confi(urar la cone)i%n
Lja)-5?
11instancio el objeto 9equest
-url-8 -contenido!html-
@5?
11codifico el eento onSuccess# que se ejecuta cuando la
solicitud se ejecut% con )ito
miLja)!addEent4-success-# function4respuesta5>
11coloco el te)to recibido como respuesta en el
c%di(o 6TML de un elemento de la p*(ina
34-contenedoraja)-5!set4-html-# respuesta5?
@5?

alert4-7o' a ejecutar la solicitud Lja)-5?
11inoco el mtodo send para ejecutar la llamada Lja)
miLja)!send45?
@5?
+1script2
+1head2
+bod'2
+h/2Ejemplo de Lja) con Mootools+1h/2
+di id,-contenedoraja)-2
+1di2
+1bod'2
+1html2
"ota8 La solicitud Lja) se reali$a por http! Esto quiere
decir que el nae(ador a a necesitar que la respuesta le
lle(ue por http# es decir# desde un seridor web# 'a sea en
un espacio de hostin( o bien en un seridor web que ten(as
instalado en tu ordenador! Si ejecutas el c%di(o tal cual
sin pasar por un seridor el Lja) no funcionar*! Ldem*s# en
el seridor tambin tendr*s que colocar una p*(ina que es
la que solicitas por Lja)# que has indicado en la propiedad
-url- de las options del constructor! En este caso# como
s%lo se indica el nombre del archio -contenido!html- se
entiende que la p*(ina con el script Mootools 1 Lja) est*
en el mismo directorio que el archio que accedemos por
Lja) -contenido!html-!
9esumir el c%di(o de una solicitud Lja)
El c%di(o que hemos isto reali$a las acciones esenciales
para crear una solicitud de Lja) en 0 pasos 'a istos8
instanciaci%n del objeto 9equest# codificaci%n de eentos '
llamada al mtodo send45 para reali$ar la cone)i%n
propiamente dicha! Sin embar(o# el c%di(o Jaascript ' los
diersos modos de uso que podemos hacer de Mootools# nos
permitiran resumir todas estas acciones en un Gnico paso!
Esto nos producira un c%di(o un poco m*s complejo de leer#
pero m*s corto 4por tanto m*s li(ero para la descar(a5 '
ele(ante!
En realidad el c%di(o que eremos a continuaci%n hace justo
lo mismo que el anterior# pero qui$*s resulte m*s
interesante! Todo depende del desarrollador ' su niel de
e)periencia# para sentirse m*s o menos c%modo con esta otra
codificaci%n!
-url-8 -contenido!html-#
-onSuccess-8 function4respuesta5>
@
@5!send45?
;omo se puede er# se instancia el objeto 9equest ' en las
opciones de confi(uraci%n 'a se le ena la funci%n que se
tiene que ejecutar con el eento onSuccess! Ldem*s# el
propio constructor del objeto de la clase 9equest lo
en(anchamos con una llamada al mtodo send45# que har* que
una e$ construido el objeto# se inicie la solicitud Lja)!
Este script se puede er en marcha en una p*(ina aparte!
6emos isto aqu dos ejemplos de una sencilla solicitud
Lja) con Mootools# que en realidad es el mismo script
codificado de dos maneras distintas! ;on esto podremos
crear una cone)i%n Lja) que nos aldr* en muchos casos#
aunque a medida que nos pon(amos a hacer aplicaciones en el
cliente con Lja) eremos que todaa ha' muchas de las
necesidades que no est*n cubiertas con lo que hemos isto
hasta el momento! Ls pues# lo m*s destacable que se debe
conocer de la clase 9equest es la cantidad de opciones de
confi(uraci%n que nos ofrece# que nos podr*n a'udar a
solentar los casos de uso que podamos ir encontrando! Todo
esto lo eremos dentro de poco en pr%)imos artculos!
Je una manera sencilla# en las llamadas Lja) con Mootools#
podemos eniar datos tanto por mtodo &OST como QET a la
p*(ina que solicitamos!
En el artculo anterior estuimos e)plicando las primeras
nociones que debemos conocer para trabajar con Lja) en
Mootools# con un par de ersiones de c%di(o Jaascript# m*s
o menos corto# que podemos utili$ar para hacer una
solicitud al seridor! Lhora eamos al(una de las tareas
m*s habituales que amos a necesitar reali$ar en nuestras
aplicaciones Lja)# como es el eniar por &OST o QET datos
al seridor# a procesar en la p*(ina que estamos
solicitando!
El sistema que eremos es mu' sencillo# 'a que Mootools
proee de la infraestructura necesaria para reali$ar el
eno de datos por cualquiera de los dos mtodos posibles
4&OST ' QET5! Ldem*s# encontraremos que e)isten diersos
modos tambin de conse(uir eniar datos por cualquiera de
los mtodos! Stili$aremos una u otra manera dependiendo de
nuestros conocimientos o necesidades a la hora de escribir
nuestras aplicaciones web!
Opciones para eno de datos en 9equest
E)isten dos opciones que podemos eniar al constructor de
9equest# en el objeto de options# para eniar datos por
&OST ' QET!
&ropiedad -method-8 es un strin( que puede ser -post- o
-(et-# para indicar el mtodo por el que se eniar*n los
datos! &or defecto toma el alor -post-!
&ropiedad -data-8 es un strin( con la cadena# con pares
nombre de ariable ' alor# que se eniar* al seridor#
al(o como -id,/Beelemento,$apatos-!
Estas dos ariables las podemos utili$ar al construir
nuestro objeto 9equest# de la si(uiente manera8
-url-8 -recibo.(et!php-#
-method-8 -(et-#
-data-8 -nombre,pepeeedad,BD-#
@
@5!send45?
En este caso estamos eli(iendo el mtodo QET ' adem*s le
estamos pasando en la solicitud a la p*(ina recibo.(et!php
los datos8 -nombre,pepeeedad,BD-!
&or tanto# necesitaremos una p*(ina &6& que reciba los
datos que se enan por QET# que podra tener un c%di(o
parecido a este8
Esto es una p*(ina que recibo por Lja)!
+br2
Los alores que recibo por QET son8
+ul2
+li2"ombre8 +\php echo 3<QET^-nombre-_?\2+1li2
+li2Edad8 +\php echo 3<QET^-edad-_?\2+1li2
+1ul2
&odemos er en marcha el ejemplo en una p*(ina aparte!
Eniar los datos por medio del mtodo send45
L tras de la funci%n que sire para comen$ar la solicitud
Lja)# el mtodo send45 de la clase 9equest# podemos eniar
un objeto de options con la confi(uraci%n que deseamos que
ten(a nuestra llamada Lja)! &or tanto# podremos especificar
tambin como par*metro de send45 atributos para confi(urar
el objeto 9equest# entre ellos la propiedad -data-# que
(uarda el quer'strin( que queremos eniarle a la p*(ina a
solicitar por Lja)!
7eamos este otro ejemplo de script# que reali$a el eno de
datos por el mtodo &OST!
-url-8 -recibo.post!php-#
@
@5!send4>-data-8 -proincia,mala(aeciudad,marbella-@5?
;omo podemos er# ahora estamos llamando a un archio
llamado -recibo.post!php- ' no estamos indicando la
propiedad -method-# por lo que los datos que eniemos a
esta p*(ina iajar*n por &OST# que es el alor por defecto
para dicha propiedad! &ero ha' que fijarse sobre todo en la
llamada al mtodo send45# en la que pasamos un objeto con
la propiedad -data- ' el alor que se desea eniar# con
todos los datos del &OST
-proincia,mala(aeciudad,marbella-!
Lhora para recibir estos datos# tendremos que codificar el
archio -recibo.post!php-# o cualquier otro con el que
estemos trabajando# con un contenido similar al si(uiente8
En este caso esto' Los alores que recibo por &OST son8
+ul2
+li2ciudad8 +\php echo 3<&OST^-ciudad-_?\2+1li2
+li2proincia8 +\php echo 3<&OST^-proincia-_?\2+1li2
+1ul2
7deo en el que mostraremos dos ejemplos mu' sencillos de
Lja) con el framework Jaascript Mootools!
Lja) es mu' simple si utili$amos un framework Jaascript!
En este deo de corta duraci%n eremos c%mo reali$ar un
pequeEo script# a'udados por Mootools# que nos serir* para
hacer una cone)i%n Lja) para traernos un contenido!
El deo muestra el proceso desde el inicio# que sera la
descar(a del framework Jaascript ' la inclusi%n en una
p*(ina web! Lue(o se hace un script con Jaascript que#
haciendo uso de las libreras de Mootools# se conecta con
el seridor para traerse un contenido sencillo! En concreto
amos a hacer dos ejemplos# uno e)tremadamente sencillo '
otro un poco m*s complejo# que hace uso de al(unas
caractersticas de las cone)iones Lja) que nos permite
Mootools!
En el ejemplo tendremos una capa ' un enlace! Ll pulsar el
enlace se conectar* por Lja) para traerse un contenido que
est* en un fichero aparte! En el primero obtendremos el
archio tal cual ' en el se(undo amos a utili$ar un tipo
de cone)i%n m*s elaborada que nos permitir* eniar un dato
por &OST a la p*(ina que se solicitar* por Lja)!
Lmbos ejemplos espero que siran para ilustrar el modo con
el que se puede hacer una solicitud Lja)! Lunque est*n
e)plicados desde cero# ser* interesante que el lector sepa
lo que es Mootools o c%mo utili$arlo para hacer Lja)! Todo
esto est* e)plicado en JesarrolloNeb!com en el Manual de
Mootools ' en los artculs de ejemplos por Lja) en
Mootools!
Os dejamos con el deo de una duraci%n de /: minutos# para
poder subirlo a IouTube! Espero que las e)plicaciones no
sean demasiado r*pidas para que se pueda entender bien!
;%di(o de los ejemplos
Jejo por aqu el c%di(o de estos dos ejemplos# por si
al(uien lo quiere copiar ' pe(ar para probar todo esto!
Ejemplo/8
+html2
+head2
+title2ej/+1title2
+script src,-mootools./!B!0.core.'c!js-
+script2
11para ejecutar cuando est* lista la p*(ina
34-enlaceaja)-5!addEent4-click-# function4eento5>
eento!stop45?
34-capaaja)-5!load4-contenido.aja)!html-5?
@5?
@5?
+1script2
+1head2
+bod'2
+di id,-capaaja)-2+1di2
+br2
+br2
+a href,-F- id,-enlaceaja)-2Enlace para car(ar contenido
Lja)+1a2
+1bod'2
+1html2
El ejemplo lo hemos publicado en JesarrolloNeb!com en una
p*(ina aparte!
EjemploB8
+html2
+head2
+title2ejB+1title2
+script src,-mootools./!B!0.core.'c!js-
+script2
11para ejecutar cuando est* lista la p*(ina
34-enlaceaja)-5!addEent4-click-# function4eento5>
eento!stop45?
1134-capaaja)-5!load4-contenido.aja)!html-5?
ar miLja) , new 9equest!6TML4>
url8 -otro.aja)!php-#
method8 -post-#
data8 -cosa,alor-#
update8 34-capaaja)-5
@5?
miLja)!send45?
@5?
@5?
+1script2
+1head2
+bod'2
+di id,-capaaja)-2+1di2
+br2
+br2
+a href,-F- id,-enlaceaja)-2Enlace para car(ar contenido
Lja)+1a2
+1bod'2
+1html2
&uede erse en marcha!
&ara el que lo desee# he colocado un dP& con el c%di(o de
los ejemplos Lja)!
Esto debe colocarse en un seridor web
Ia lo mencionamos en el deo8 las cone)iones por Lja) se
reali$ar por 6TT&# por lo que necesitamos publicar el
ejemplo en un seridor web para que funcione!
&odemos colocarlo en local# en un seridor que podamos
tener instalado en nuestro ordenador# o en remoto# en un
espacio de alojamiento web!
Si queris instalar un seridor en uestro ordenador os
recomiendo probar con Namp
! ;omo os di(o# cualquier espacio de hostin(# tambin os
serir* para probar estos archios# que tendrais que subir
por RT& al seridor!
Mencionar adem*s que el se(undo ejemplo ena datos por
&OST ' nosotros los recibimos a tras de un archio &6&!
&or ello# os endr* bien tener un seridor que soporte &6&#
para que el se(undo ejercicio pueda mostrat el contenido
que se ena por &OST!
Espero que estas pr*cticas de Lja) con Mootools siran de
utilidad para los lectores de JesarrolloNeb!com
Tutorial en el que mostraremos c%mo hacer solicitudes Lja)
utili$ando el framework Jaascript &rotot'pe# que tiene
arias clases interesantes para hacer aplicaciones Lja)
r*pidamente!
L estas alturas probablemente todo el mundo debe conocer lo
que es Lja)# o al menos las personas que leen este artculo
asumimos que lo saben ' que desean reali$ar sus propias
p*(inas haciendo uso de Lja) de una manera sencilla! Los
Rrameworks Jaascript nos ienen como anillo al dedo para
simplificar nuestras tareas de desarrollo ' en concreto
&rotot'pe ofrece diersas utilidades que nos permitir*n
construir scripts Lja) en pocos minutos!
Lo m*s complicado de hacer una aplicaci%n web Lja) es que
cada nae(ador tiene sus particularidades a la hora de
hacer solicitudes 6TT& desde Jaascript para traer
contenidos del seridor que se pueden mostrar sin
actuali$ar la p*(ina entera! La tarea de hacer un script
;ross.Trowser es sin duda lar(a ' tediosa# por ello Lja)
permaneci% por un tiempo a disposici%n Gnicamente de
pro(ramadores aan$ados! Sin embar(o# con la lle(ada de los
frameworks Jaascript# cualquier persona con un
conocimiento medio de este len(uaje# puede encarar sus
objetios en pocos minutos ' sin complicaciones deriadas
de las distintas plataformas!
En este artculo amos a dedicar un tiempo a mostrar el
proceso de creaci%n de scripts sencillos en Jaascript que
hacen solicitudes Lja)# utili$ando &rotot'pe# el popular
framework Jaascript!
"ota8 en JesarrolloNeb!com 'a e)plicamos c%mo hacer scripts
Lja) con otros frameworks# como pueden ser Mootools o
jOuer'! Si conocemos otros frameworks Jaascript# eremos
que con &rotot'pe las cosas son bastante parecidas!
Jescar(ar &rotot'pe e incluir el script en nuestra p*(ina
;omo un paso preio a reali$ar cualquier cosa con
&rotot'pe# tenemos que descar(ar el framework e incluirlo
en la p*(ina!
&odemos hacer el download de la ersi%n m*s reciente de
&rotot'pe en su p*(ina web8 http811www!protot'pejs!or(
Tendremos que obtener un archio con e)tensi%n js# que
contiene todo el c%di(o de las libreras de &rotot'pe! Sna
e$ descar(ado lo podremos incluir en nuestra p*(ina con
una etiqueta S;9P&T que colocaremos en la cabecera de la
p*(ina8
+script src,-protot'pe./!U!:!0!js-
;lase Lja) ' Lja)!Spdater de &rotot'pe
En &rotot'pe e)iste una clase llamada Lja) que contiene
todo lo que necesitaremos para hacer llamadas asncronas al
seridor! 9ealmente esta clase Lja) no se puede utili$ar
por si misma# por ser abastracta# sino que tenemos que
usarla a tras de distintas clases que heredan de ella#
con las que podremos hacer cualquier tipo de script se(Gn
nuestras necesidades! Lo bueno es que todo lo que ha(amos
funcionar* en los nae(adores m*s comunes de la misma
manera# con lo que no tendremos que complicarnos en hacer
un c%di(o diferente para cada tipo de plataforma de
cliente! Ldem*s# podremos ahorrar muchas lneas de c%di(o
al hacer las solicitudes ' otras acciones en torno de
stas!
Esta clase Lja) tendra una clase heredada con la que
podemos hacer un ejemplo de uso bien simple! Se trata de la
clase Lja)!Spdater# con el que hacer una solicitud por Lja)
' actuali$ar a la e$ el contenido 6TML de cualquier
elemento de la p*(ina! 7eamos un ejemplo8
new Lja)!Spdater4=contenidoaja)=# =recibir.).aja)!html=5?
;on esta Gnica lnea de c%di(o hacemos todo el trabajo# de
recibir un archio por Lja) ' mostrar los contenidos en un
lu(ar de la p*(ina! En concreto recibiremos el archio
-recibir.).aja)!html- ' actuali$aremos el elemento con
identificador 4atributo id del 6TML5 -contenidoaja)-!
Lhora eamos un c%di(o de una p*(ina que reali$ara una
simple solicitud Lja)8
+html2
+head2
+title29ecibir contenido por Lja)+1title2
+script src,-!!1protot'pe./!U!:!0!js-
+script2
function recibirLja)Lctuali$ar45>
new Lja)!Spdater4=contenidoaja)=# =recibir.).
aja)!html=5?
@
+1script2
+1head2
+bod'2
+di id,-contenidoaja)-2Elemento a actuali$ar con la
solicitud Lja)+1di2
+p2
. +a href,-jaascript8 recibirLja)Lctuali$ar45?-2&ulsame
para recibir un contenido con Lja) ' actuali$ar un elemento
de la p*(ina+1a2
+1bod'2
+1html2
&odemos er este c%di(o en marcha en una p*(ina aparte!
"ota8 la solicitud Lja) iaja por el protocolo 6TT&# por lo
que este ejemplo debe estar alojado en un seridor web para
que funcione! Si colocas el archio tal cual en tu disco
duro ' lo ejecutas no funcionar*# puesto que tienes que
solicitarlo a tras de cualquier seridor web# 'a sea uno
que puedas tener instalado en tu ordenador o bien un
espacio de alojamiento web del que dispon(as en Pnternet!
En el si(uiente artculo eremos otros casos de uso de Lja)
con &rotot'pe que complementar*n las presentes
e)plicaciones!
Ll(unas (uas adicionales para hacer scripts con Lja) con
el framework Jaascript &rotot'pe!
En el pasado artculo de JesarrolloNeb!com imos c%mo
construir scripts Lja) e)tremadamente sencillos con
&rotot'pe! L continuaci%n ampliaremos las e)plicaciones#
para enseEar a personali$ar un poco m*s las solicitudes
Lja) ' tus scripts# para hacer cosas que se(uramente
necesitar*s para mejorar la e)periencia de usuario en tus
p*(inas web!
&ara comen$ar# estara bien comentar que la clase -padre-
de &rotot'pe para reali$ar cone)iones 6TT& asncronas se
llama Lja)# pero que esta clase es abstracta ' para
utili$arla debemos trabajar con al(una de las clases que
heredan de esta! La clase Lja) (eneral permite al(unos
tipos de personali$aci%n de la solicitud mu' Gtiles# los
cuales siren tambin para las solicitudes Lja) que podemos
hacer cuando utili$amos las clases heredadas# como
Lja)!Spdater o Lja)!9equest! &or lo que la ma'ora de las
e)plicaciones que eremos siren para cualquier tipo de
cone)i%n Lja) en &rotot'pe!
En el ejemplo del artculo anterior imos un caso de uso de
Lja)!Spdater ' ahora amos a mostrar c%mo utili$ar otra
clase m*s b*sica llamada Lja)!9equest# que es e)actamente
i(ual# salo que sta no actuali$a la informaci%n de la
respuesta autom*ticamente en la p*(ina!
&or ejemplo eamos el si(uiente c%di(o de uso de la clase
Lja)!9equest8
new Lja)!9equest4=recibir.parametros!php=#>
method8 =(et=#
parameters8 >miparametro8 =El alor]=# otro8 VV@#
onSuccess8 function4respuesta5>
alert4respuesta!responseTe)t5?
@
@5?
;omo se puede er# el constructor de la clase Lja)!9equest
recibe como primer par*metro la S9L que se a a solicitar
con Lja) ' como se(undo par*metro un objeto con todas las
propiedades ' funciones para personali$ar la solicitud!
En este caso hemos especificado diersos alores como8
method8 con un alor -(et- 1 -post-# que es para indicar
c%mo se an a eniar los datos a la S9L# por mtodo (et o
post!
parameters8 con una lista de los par*metros que queremos
eniar con la solicitud Lja)# en notaci%n de objeto!
onSuccess8 que es una funci%n con lo que queremos hacer
cuando la solicitud se ha'a procesado con )ito! En este
caso simplemente mostramos en una caja de alerta la
respuesta recibida por la solicitud! Este mtodo onSuccess
es un eento que soporta la clase Lja) ' que se ejecuta
cuando la solicitud se ha producido ' se ha recibido la
respuesta correctamente!
&odemos er un script que hace uso de esta clase para hacer
una solicitud personali$ada al seridor por medio de Lja)8
+html2
+head2
+script2
function recibirLja)45>
new Lja)!9equest4=recibir.parametros!php=#>
method8 =(et=#
parameters8 >miparametro8 =El alor]=# otro8 VV@#
onSuccess8 function4respuesta5>
alert4respuesta!responseTe)t5?
@
@5?
@
+1script2
+1head2
+bod'2
. +a href,-jaascript8 recibirLja)45?-2&ulsame para recibir
un contenido con Lja)+1a2
+1bod'2
+1html2
Tambin necesitaremos crear una p*(ina# a la que llamamos
por Lja)# que recibe los par*metros eniados en la
solicitud! En este caso a p*(ina es &6&# pero podramos
utili$ar cualquier otra tecnolo(a de pro(ramaci%n del lado
del seridor!
El c%di(o de esa p*(ina sera parecido a esto8
+\
echo -La respuesta]! 6e recibido8 - !
3<QET^-miparametro-_ ! - 1 - ! 3<QET^-otro-_?
\2
Lhora podemos er esta p*(ina en marcha!
&ersonali$ar el script Lja) con el tpico mensaje de car(a
Lhora eamos c%mo reali$ar una solicitud Lja) en el que nos
muestre el tpico mensaje de -;ar(ando!!!-# para aisar al
usuario que se ha producido una solicitud ' que tiene que
esperar a recibir la respuesta!
&ara ello simplemente tenemos que modificar un poco el
script anterior# para crear el comportamiento que muestre
el mensaje de car(a! &or ariar un poco# en este caso
utili$aremos Lja)!Spdater# de una manera mu' similar!
34=car(ando=5!update4-;ar(ando!!!-5?
new Lja)!Spdater4=contenidoaja)=# =recibir.parametros!php=#
>
method8 =(et=#
parameters8 >miparametro8 =lo que sea=# otro8 CZ@#

onSuccess8 function45>
34=car(ando=5!update4--5?
@
@5?
En este caso hemos creado una primera lnea de c%di(o#
justo antes de la solicitud Lja)# que actuali$a el te)to
del elemento con identificador -car(ando-! En ese elemento
colocamos el mensaje de car(a! "osotros hemos actuali$ado
el contenido colocando un te)to# pero podramos haber
colocado una ima(en# 'a que update45 acepta cualquier
c%di(o 6TML!
Lue(o se codifica la solicitud Lja)# en la que hemos
colocado en el eento onSuccess una lnea de c%di(o para
eliminar el mensaje de car(a una e$ hemos recibido una
respuesta correcta del seridor# utili$ando el mismo mtodo
update45 sobre el elemento de la p*(ina deseado!
L continuaci%n se puede er el c%di(o completo de este
ejemplo8
+html2
+head2
+script2
function recibirLja)45>
34=car(ando=5!update4-;ar(ando!!!-5?
new Lja)!Spdater4=contenidoaja)=# =recibir.
parametros!php=# >
method8 =(et=#
parameters8 >miparametro8 =lo que sea=# otro8 CZ@#

onSuccess8 function45>
34=car(ando=5!update4--5?
@
@5?
@
+1script2
+1head2
+bod'2
+di id,-contenidoaja)-2+1di2
+p2
. +a href,-jaascript8 recibirLja)45?-2&ulsame para recibir
un contenido con Lja)+1a2
+p2
+di id,-car(ando-2+1di2
+1bod'2
+1html2
Si se desea# podemos poner en marcha el ejemplo en una
p*(ina aparte!
;on esto hemos isto lo sencillo que es hacer Lja) con
&rotot'pe! &ero sin duda# lo m*s Gtil e interesante es que
con &rotot'pe podemos construir scripts Lja) que son
compatibles con todos los nae(adores# sin necesidad de
preocuparnos por las diferentes particularidades de cada
uno!

MOOTOOLS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

MOOTOOLS

Diunggah oleh

Hak Cipta:

Format Tersedia

MOOTOOLS

El uso del framework puede resultar difcil para las

Anda mungkin juga menyukai