Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Prototype PDF
Prototype PDF
0 para profesionales
Prototype
Qu es
Prototype es una librera Open Source creada para extender las funcionalidades de Ja-
vaScript y reducir la tarea de codificacin a los programadores. Tiene la gran ventaja
de distribuirse en un solo archivo .js, es muy liviana y en se ha convertido un estndar
de facto en el mercado al inicio del lanzamiento de AJAX. Su uso ha cado desde la sa-
lida de jQuery al mercado que realiza tareas similares de manera ms simple.
Instalacin
Su instalacin es muy sencilla. Slo basta con visitar el sitio web www.prototypejs.org
y descargar la ltima versin, que no es ms que un archivo prototype.js que se debe
incorporar en nuestro proyecto y, luego, incluirlo en un tag script (fig. 1).
En el sitio web se puede consultar toda la documentacin de las API que incorpora la
librera. A continuacin se detallarn los agregados ms utilizados.
Utilitarios
$
Dentro de la gama de utilitarios, hay muchos y muy tiles. El primero que se va a ana-
lizar es el signo $. Aunque hasta el presente no se usaba para mucho, es posible que
una variable (y, por lo tanto, tambin una funcin) en JavaScript comience con el signo
$, incluso que su nombre sea slo ese smbolo. Es por eso que Prototype ha creado
1
Maximiliano R. Firtman
una funcin llamada $ que reemplaza a una de las funciones ms utilizadas en una
aplicacin AJAX: document.getElementById. Es as que con hacer:
$(divContenido)
se estara recibiendo un objeto que represente al elemento XHTML que tenga id div-
Contenido. Queda muy simple y sencillo de leer, adems de la obvia reduccin de c-
digo a escribir y a transferir desde el servidor al cliente. De esta forma, si se quiere
cambiar el color de fondo de una celda que posee id, se podra hacer:
$(celda1).bgColor = red;
2
AJAX. Web 2.0 para profesionales
Este cdigo devolvera un vector de 3 posiciones con tres objetos de tipo botn, con
los ids solicitados.
$$
La funcin $$ recibe uno o ms selectores de tipo CSS (de clase, de etiqueta o de id)
y devuelve un vector con todos los elementos que cumplen con el o los selectores
dados. Hay combinaciones completas que se pueden hacer para encontrar con facili-
dad y rapidez elementos HTML que cumplan con alguna condicin. Ejemplos:
$F
Devuelve el valor (la propiedad value) del elemento HTML dado, por lo general una eti-
queta de formulario (un textbox, o un select).
3
Maximiliano R. Firtman
$w
Copiada del lenguaje Ruby, esta funcin recibe un string con palabras separadas por
espacio y devuelve un vector con cada palabra.
Try.these
Esta funcin recibe una lista de funciones por parmetro y devuelve el resultado de la
primera de ellas que no genere una excepcin (error). Por ejemplo, se podra mejorar
nuestra librera de AJAX cuando se instancia el objeto XMLHttpRequest evitando ifs:
function obtenerXHR() {
return Try.these(
function() { return new XMLHttpRequest() },
function() { return new ActiveXObject(Msxml2.XMLHTTP) },
function() { return new ActiveXObject(Microsoft.XMLHTTP) }
) || false;
}
Otros
Hay otros utilitarios menos usados, como $R, $A y $H. El primero permite generar un
objeto ObjectRange, el segundo, convertir cualquier objeto enumerable a un Array y el
ltimo, cualquier objeto a un HashTable (array asociativo). Dejamos para revisar en la
documentacin oficial de Prototype su uso y ejemplos. $R permite obtener una se-
cuencia de objetos de tipo enumerables, por ejemplo, para recibir una lista con los n-
meros 1 a 1000, se puede hacer $R(1, 1000) y las letras del alfabeto $R(a, z). Si se
quieren convertir esos objetos a Array, slo resta aplicarle tambin $A (fig. 2).
Agregados a objetos
Strings
Todos los strings ahora poseen, entre otros, los mtodos siguientes:
4
AJAX. Web 2.0 para profesionales
Fig. 2. La documentacin de Prototype incluye ejemplos de cada funcin y est disponible en la web,
en PDF y en formato Ayuda de windows.
Mtodo Descripcin
camelize Devuelve una versin en formato camello del string en cuestin. Por ejemplo: nombre-
cliente devuelve nombreCliente
desherize Reemplaza todos los guiones bajos (_) por medios (-)
empty Devuelve true si el string est vaco por completo (no tiene ni siquiera espacios)
endsWith Recibe una cadena e indica si el string finaliza con ella. Por ejemplo, es til para
comprobar extensiones de nombre de archivo
evalJSON Evala el string como un JSON y devuelve un objeto. Recibe un parmetro lgico opcional
e indica si queremos comprobar que no sea cdigo malicioso
5
Maximiliano R. Firtman
Mtodo Descripcin
strip Elimina todos los espacios antes y despus del texto (equivalente a un Trim en otros
lenguajes)
stripScripts En caso que el string fuera HTML, elimina todos los tags script que hubiera
stripTags En caso que el string fuera HTML elimina todos los tags (aunque no el texto que tuvieran
dentro)
times Recibe un parmetro numrico y devuelve una versin con el string repetido n veces.
truncate Recibe una cantidad y un sufijo opcional. Trunca el string a la cantidad dada e incorpora
el sufijo al final. Por defecto el sufijo es .... Permite mostrar textos largos en espacios
reducidos.
unescapeHTML Devuelve una versin en texto normal de un string con caracteres en formato Escape
HTML.
Tambin aparece una nueva clase en JavaScript llamada Template, que permite defi-
nir cierta plantilla y un objeto estilo JSON, as como reemplazar cada propiedad del
objeto en la plantilla en las ocurrencias que se indiquen. Por ejemplo:
// sta es la plantilla
var plantilla = new Template(El curso de #{curso} es dictado por
#{profesor}.);
6
AJAX. Web 2.0 para profesionales
Arrays
Todos los arrays reciben los mtodos siguientes. Cuando el objeto que tenemos no es
estrictamente un array, sino una coleccin (p. ej., document.getElementsByTagName)
podemos convertirlo a array en forma explcita para tener estos mtodos utilizando $A.
Mtodo Descripcin
compact Devuelve una versin comprimida del array, eliminando todas las posiciones nulas
o indefinidas.
each Ejecuta una funcin recibida por parmetro en cada posicin del array. Equivale
a un for que recorra todo el array y ejecute la funcin a cada elemento.
flatten En el caso de un vector multidimensional (p. ej., una matriz), lo convierte a una sola
dimensin.
without Recibe una lista de valores y devuelve el vector, pero sin los valores recibidos.
Si trabajamos con Prototype, debemos dejar de utilizar for in para recorrer los vec-
tores. Sin entrar en demasiados detalles tcnicos, los mtodos que Prototype tienen
problemas con el for in. La solucin es cambiar el cdigo siguiente:
7
Maximiliano R. Firtman
vector.each(function(item) {
alert(tem)
}
Tambin aparecen mtodos nuevos que se pueden aplicar a todos los elementos
que sean enumerables, que los podemos ver en la documentacin. Algunos de estos
mtodos son en realidad muy tiles.
Elementos DOM
Cuando se acceda a un elemento DOM por medio de las funciones propias de Prototype,
como $ o $$, entonces se estar accediendo a un elemento nodo extendido, que posee
ms propiedades y mtodos.
Event
Prototype incorpora a JavaScript un manejo de eventos algo superior al clsico que trae
el estndar del lenguaje. Con Prototype se puede hacer uso del patrn de diseo Ob-
server para agregar o eliminar un observador a un evento de un elemento HTML. Esto
permite una forma ms sencilla de agregar y eliminar funciones que escuchan a que
cierto evento ocurra.
Para ello, hay una clase Event que posee los mtodos observe y stopObserving.
Veamos un ejemplo:
function mostrarMensaje() {
alert(Gracias);
// Dejamos de observar el click del botn
Event.stopObserving(btnEnviar, click, mostrarMensaje);
// El prximo click no ejecutar esta funcin
}
Form
Si a un formulario HTML le incluimos un ID (p. ej., form1) y lo accedemos a travs de
$(form1), tendremos los mtodos siguientes:
8
AJAX. Web 2.0 para profesionales
Mtodo Descripcin
disable Desactiva de manera funcional todos los elementos que estn dentro del formulario.
findFirstElement Devuelve el primer control que est activado y no sea de tipo hidden.
getElements Devuelve una coleccin con todos los controles de ingreso del formulario.
getInputs Devuelve una coleccin con todos los controles INPUT. Es posible restringir cules
queremos mediante los parmetros.
serialize Devuelve todos los controles en formato string URL para enviarlos en una
peticin AJAX va GET o POST.
serializeElements Devuelve una serie de controles enviados por parmetro en formato string URL.
Fig. 3. Se puede transformar cualquier formulario para que enve los datos va AJAX sin refrescar la
pgina.
9
Maximiliano R. Firtman
formulario.html
<head>
<meta http-equiv=Content-Type content=text/html; charset=iso-
8859-1 />
<title>Formulario de Envo</title>
<script type=text/javascript src=prototype.js></script>
<script type=text/javascript src=ajax.js></script>
<script type=text/javascript src=formulario.js></script>
</head>
<body>
<form id=form1 name=form1>
<p>Nombre:
<input name=txtNombre type=text id=txtNombre />
</p>
<p>Apellido:
<input name=txtNombre2 type=text id=txtApellido />
</p>
<p>Dirección:
<input name=txtNombre3 type=text id=txtDireccion />
</p>
<p>País:
<select name=lstPaises id=lstPaises>
<option value=AR>Argentina</option>
<option value=ES>España</option>
<option value=MX>México</option>
</select>
</p>
<p>
<input type=button onclick=enviarPost() value=Botón
/>
</p>
</form>
</body>
</html>
10
AJAX. Web 2.0 para profesionales
formulario.js
function enviarPost() {
var peticion = obtenerXHR();
peticion.open(POST, recibirDatos.php, true);
peticion.onreadystatechange = procesarPeticion;
function procesarPeticion() {
if (peticion.readyState==4) {
// La peticin termin
if (peticion.status==200) {
// Mostramos el texto en una alerta
alert(peticion.responseText);
}
}
}
Objeto AJAX
Prototype provee su propio mecanismo para realizar peticiones AJAX que nos abstrae
de los problemas de incompatibilidad entre browsers, entre otras cosas.
Para ello, provee los objetos siguientes que se deben instanciar:
Ajax.Request(url, opciones)
Permite realizar una peticin AJAX a la url indicada, definiendo distintos parmetros
opcionales para partir del segundo parmetro, que se enva en formato JSON.
11
Maximiliano R. Firtman
requestHeaders Headers por defecto Se puede enviar un objeto (p. ej., JSON) o un
vector con los headers que se quieren enviar
Tambin los tres tipos de peticiones en las opciones permiten definirle los even-
tos siguientes que podrn ser capturados por una funcin:
Propiedad Descripcin
on999 Siendo 999 algn cdigo HTTP (p. ej., on404). Se ejecuta cuando ese cdigo HTTP
se produce en la peticin
12
AJAX. Web 2.0 para profesionales
Por ejemplo, para enviar una peticin al servidor y actualizar un DIV con el conte-
nido de un archivo html, el cdigo sera el siguiente:
function enviarPost() {
new Ajax.Request(recibirDatos.php, {
onSuccess: function(respuesta) {
// En respuesta tenemos la devolucin del servidor
alert(respuesta.responseText);
}
parameters: $(form1).serialize();
}
}
Otros agregados
Prototype tambin agrega comportamiento a los objetos siguientes:
Class. Aparece un mtodo Class.create que devuelve una funcin al estilo de-
finicin de clases en el lenguaje Ruby.
Date. Aparece el mtodo toJSON que convierte la fecha.
Enumerable. Aparecen varios mtodos nuevos en todos los objetos que sean
enumerables (colecciones).
Function. Aparecen los mtodos bind y bindAsEventListener, que permiten
enlazar las funciones cuando hay problemas con el mbito (scope) de stas.
13
Maximiliano R. Firtman
Hash. Permite trabajar de mejor forma cuando se trata con objetos de tipo
Hash (o vectores asociativos).
Number. Contiene algunas funciones tiles para nmeros, como times que
ejecuta una funcin n cantidad de veces o toPaddedString que devuelve el
nmero con ceros a la izquierda.
Object. La librera agrega mtodos a todos los objetos, entre ellos extend que
permite heredar del mismo o toJSON que lo convierte a un string con nota-
cin JSON.
PeriodicalExecuter. Permite ejecutar una funcin en forma peridica. Lo que
hace es encapsular el funcionamiento de setInterval y clearInterval propios de
JavaScript.
Fig. 4. Objeto respuesta recibido en el evento onSucess. Cada evento tiene sus propios atributos.
14
AJAX. Web 2.0 para profesionales
Script.aculo.us
Qu es
Fig. 5. El sitio web de Script.aculo.us es un buen punto de inicio para encontrar ejemplos y docu-
mentacin.
15
Maximiliano R. Firtman
Instalacin
<script src=scriptaculous.js?load=lista
type=text/javascript></script>
donde lista es una secuencia separada por comas de alguno de los mdulos siguien-
tes: builder, effects, dragdrop, controls, slider.
Efectos visuales
16
AJAX. Web 2.0 para profesionales
Efectos de ncleo
Los Core Effects o efectos de ncleo disponibles son los siguientes:
Opacity: cambia la opacidad (transparencia) del elemento.
Scale: cambia el tamao del elemento.
Morph: cambia una propiedad CSS del elemento.
Move: mueve el elemento en la pgina.
Highlight: genera una animacin de resaltado del fondo del elemento.
Parallel: ejecuta un conjunto de efectos en paralelo.
17
Maximiliano R. Firtman
Scale scaleX Valor lgico que define si se debe escalar en sentido horizontal.
Scale scaleY Valor lgico que define si se debe escalar en sentido vertical.
Scale scaleContent Define si tambin se debe escalar el contenido del elemento.
Scale scaleFromCenter Define si se escala desde el centro.
Scale scaleMode Puede ser box o contents.
Morph style Define un objeto JSON con los valores CSS nuevos que debe
tener el elemento.
Move x Especifica la coordenada x del destino.
Move y Especifica la coordenada y del destino.
Move mode Puede ser absolute (considera pxeles reales) o relative (mueve
el elemento desde donde est n cantidad de pxeles).
Highlight startcolor Color inicial del efecto.
Highlight endcolor Color final del efecto.
highlight restorecolor Valor lgico que indica si se debe devolver el color original al elemento.
18
AJAX. Web 2.0 para profesionales
As, por ejemplo, con el cdigo siguiente se puede crear un efecto que apaga de
a poco un botn al ser presionado:
El nico distinto es Parallel, que recibe un vector de efectos que se deben apli-
car, por ejemplo:
Evento Descripcin
En todas estas funciones se recibir un objeto por parmetro, que contendr pro-
piedades tiles para saber el estado del efecto, entre ellas element (referencia el ele-
mento que se anima), currentFrame (el cuadro actualmente dibujado), startOn
(milisegundos pasados desde el inicio) y finishOn (milisegundos restantes).
19
Maximiliano R. Firtman
Efectos combinados
Los efectos combinados ofrecen una funcionalidad mayor y ms simple, as como ms
atractivos. Los disponibles son:
Appear SlideDown
Fade SlideUp
Puff Pulsate
DropOut Squish
Shake Fold
SwithOff Grow
BlindDown Shrink
BlindUp
SlideDown
En wiki.script.aculo.us/scriptaculous/show/CombinationEffects se encontrar un
detalle y una descripcin de cada uno, junto con las opciones adicionales de las que
se pueden disponer en cada uno de ellos.
Toggle
Hay un efecto especial llamado Toggle que permite prender o apagar un elemento con
rapidez (segn su estado actual), aplicando algn tipo de efecto entre appear, blind o
slide.
Por ejemplo:
<div id=divContenido>Contenido</div>
Ejemplos
Veamos un ejemplo en el que al presionar un botn aparece en pantalla una especie
de ventana que estaba oculta, que tiene una opcin para cerrarse. Las operaciones
de abrir y cerrar se realizan con una animacin, y al finalizar el cierre aparece una alerta
(figs. 7 a 10).
20
AJAX. Web 2.0 para profesionales
Fig. 7. Nuestra pgina web recin abierta. Ntese que el divVentana no se muestra.
Fig. 8. Al utilizar el link Abrir Ventana, sta se abre con un efecto de transicin y el resultado es ste.
21
Maximiliano R. Firtman
Fig. 9. Al cerrar se ve cmo se aplica un efecto de cierre y se abre una alerta al terminar el efecto.
Fig. 10. Utilizar overflow:auto permite que un div con ancho y alto definidos tenga su propia barra de
desplazamiento si el contenido no cabe.
22
AJAX. Web 2.0 para profesionales
mostrarVentana.html
<div id=divVentana>
<a id=lnkCerrar>Cerrar Ventana</a>
<br />
<br />
mostrarVentana.css
#divVentana {
width: 400px;
height: 200px;
position: absolute;
top: 20px;
right: 100px;
background-color: yellow;
border: 1px red solid;
margin: 15px;
overflow: auto;
}
23
Maximiliano R. Firtman
mostrarVentana.js
window.onload = function() {
$(divVentana).hide();
$(lnkMostrar).href=javascript:abrirVentana();
$(lnkCerrar).href=javascript:cerrarVentana();
}
Builder
24
AJAX. Web 2.0 para profesionales
Los nombres de las propiedades del JSON equivalen a los de HTML, salvo class,
que se utiliza className y for, que se utiliza htmlFor.
La variable tabla ahora se puede usar para anexarla a otro element DOM, por
ejemplo:
$(divContenido).appendChild(tabla);
$(div1).appendChild(Builder.node(div,
[ Builder.node(a,{id: link1})]);
25