La web 2.0:
Retos y tecnologías para la Internet de nueva generación
Taller: "Programa una aplicación web 2.0 Ajax"
Parte 2. Primeros pasos con Prototype
Aplicación del taller.
1. Parte 1. Introducción
2. Enfrentándonos a Ajax sin ayudas
-
El objeto XmlHttpRequest
-
Controlarlo todo desde Javascript
-
Ejemplo de uso: autocompletar
3. Parte 2: Primeros pasos con Prototype
-
Qué es prototype
-
Algunos aspectos básicos
-
Despreocuparnos de la comunicación asíncrona: Ajax.Updater
-
Ejemplo de uso: autocompletar con prototype
4. Parte 3: Primeros pasos con Script.aculo.us
-
Qué es script.aculo.us
-
Posibilidades que ofrece
-
Ejemplo de uso: tienda de libros
5. Parte 4. Modificando nuestro blog
- Borrado de comentarios arrastrando con script.aculo.us
- Ordenación de comentarios
6. Parte 5. Modificando nuestro blog (II)
-
Prototype en Ruby on Rails
-
Mostrar un formulario sobre el listado de categorías
-
Actualizar el listado de posts desde el formulario
7. Parte 6. La guinda final
-
Efectos de animación con Script.aculo.us
-
Formularios animados
-
Menús animados
3. Parte 2. Primeros pasos con Prototype
Qué es Prototype
Prototype es un framework en Javascript
desarrollado por Sam Stephenson, que simplifica el desarrollo de
aplicaciones altamente interactivas. Para poderlo utilizar, basta con
tener disponible el fichero fuente prototype.js, que ya incluyen muchos frameworks como Ruby On Rails (también disponible en http://www.prototypejs.org). Así, incluiremos en las cabeceras de las páginas donde lo vayamos a usar la siguiente línea:
<html>
<head>
...
<script type="text/javascript" src="prototype.js"></script>
...
</head>
...
Suponiendo, claro está, que tengamos el fichero prototype.js en la misma carpeta que la página que estamos haciendo. Si no habrá que cambiar el path en el atributo src. En el caso de usar Ruby On Rails, donde Prototype viene incluido, basta con incluir en la cabecera (head) la línea:
‹%= javascript_include_tag 'prototype' %›
Algunos aspectos básicos
La principal ventaja que vamos a encontrar utilizando Prototype respecto a usar directamente los objetos de AJAX es que con Prototype vamos a encapsular ciertas operaciones, y a despreocuparnos de controlar ciertos aspectos. Por ejemplo, acceder a un elemento HTML de un id determinado es mucho más sencillo, y el proceso de enviar una petición al servidor, recoger los resultados y mostrarlos en una parte del documento, se realiza con una sola línea de código.
Por ejemplo, para cambiar el contenido HTML del elemento con id id1, con Javascript teníamos que hacer algo como:
document.getElementById("id1").innerHTML= "... nuevo contenido ...";
Utilizando las librerías de Prototype, esto podemos hacerlo con:
$("id1").innerHTML = "... nuevo contenido ...";
En general, existen una serie de funciones del tipo $X(...). Por ejemplo, la función $A() permite convertir el parámetro que le pasamos en un array de Prototype, que dispone de métodos (como each), que permiten un tratamiento más cómodo. Por ejemplo, podríamos construir un array de todos los elementos div que hay en la página:
var lista = document.getElementsByTagName('div');
var vec = $A(lista);
vec.each(function(elemento, indice) {
elemento.innerHTML= "...";
elemento.style.color = "...";
});
Despreocuparnos de la comunicación asíncrona: Ajax.Updater
Además de muchas otras clases y métodos, una de las más útiles es Ajax.Updater. Él solo se encarga de llamar a una URL del servidor (con los parámetros que indiquemos), obtener el resultado y actualizar con él el campo de la página que digamos.
Tiene 3 argumentos:
- Id del elemento a actualizar (o una referencia al propio elemento)
- URL a llamar del servidor (sin parámetros)
- Opciones adicionales, como el método que usar (get o post), y los parámetros de la petición
Por ejemplo, si queremos llamar a la página "
/mipagina.php", obtener su contenido y ponerlo en el elemento con id "
idpagina", lo haríamos así:
new Ajax.Updater("idpagina", "/mipagina.php", {method:"get"});Ejemplo de uso: autocompletar con PrototypeVamos a realizar el ejercicio de la primera parte utilizando Prototype. Para ello, copiamos el archivo
/public/ajax1.html y lo renombramos a
/public/ajax2.html. En el código HTML vamos a cambiar varias cosas:
1. Por un lado, el campo de texto del formulario ya no tendrá evento
onkeyup, ya no le hace falta, se lo quitamos, y queda:
<input type="text" name="campoBusq" id="campoBusq" size="50" />2. Por otra parte, al final del documento (después del
</body>), añadimos un código Javascript para capturar cambios en el formulario.
</body><script type="text/javascript">
new Form.Element.Observer($("campoBusq"), 1, busca);
</script>
Usamos las clases
Form y
Observer de Prototype. La primera sirve para localizar el formulario, y la segunda para añadir un observador sobre él (en concreto sobre el campo con id
campoBusq), que cada segundo, si hay cambios en el campo, llamará a la función busca.
3. Nos falta implementar la función busca. Para ello vamos al código script de la cabecera (
<head>), borramos todo lo que hay dentro, y lo dejamos sólo con una función busca, que simplemente utilizará la clase Ajax.Updater, para llamar al servidor y recuperar resultados:
<script type="text/javascript"> function busca() { var texto=document.formBusq.campoBusq.value; new Ajax.Updater( "resultados", "/pruebaajax/search", {method:"get", parameters:"texto=" + texto}); }</script>Con esta llamada, el Ajax.Updater actualizará el campo con id="resultados", con el contenido que le devuelva la llamada a
/pruebaajax/search, enviándole el texto del formulario como parámetro.
4.- Finalmente, en la cabecera (
head), añadimos una línea para incorporar la librería de
prototype:
<link href="stylesheets/style_blue.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="javascripts/prototype.js"></script>
Eso es todo. Como vemos, utilizamos la misma acción search que implementamos en el ejercicio anterior, para buscar sobre los mismos libros. El funcionamiento deberá ser el mismo... pero la implementación es mucho más sencilla.