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 3. Primeros pasos con Script.aculo.us



Del 21/07/2008 al 25/07/2008

Foro del taller:
http://estiu20.ning.com/forum/topic/show?id=2018352%3ATopic%3A1647





Imparten:
Sergio Gisbert Ribes
http://www.univerano.ua.es/es/curriculum.asp?id=2204

Ignacio Iborra Baeza
http://www.univerano.ua.es/es/curriculum.asp?id=2079

Universidad de Verano "Rafael Altamira"
http://www.univerano.ua.es/es/curso.asp?id=112

Universidad de Alicante
http://www.ua.es

Aplicación del taller.


1. Parte 1. Introducción

2. Enfrentándonos a Ajax sin ayudas

    1. El objeto XmlHttpRequest
    2. Controlarlo todo desde Javascript
    3. Ejemplo de uso: autocompletar

3. Parte 2: Primeros pasos con Prototype

    1. Qué es prototype
    2. Algunos aspectos básicos
    3. Despreocuparnos de la comunicación asíncrona: Ajax.Updater
    4. Ejemplo de uso: autocompletar con prototype

4. Parte 3: Primeros pasos con Script.aculo.us

    1. Qué es script.aculo.us
    2. Posibilidades que ofrece
    3. Ejemplo de uso: tienda de libros

5. Parte 4. Modificando nuestro blog

    1. Borrado de comentarios arrastrando con script.aculo.us
    2. Ordenación de comentarios

6. Parte 5. Modificando nuestro blog (II)

    1. Prototype en Ruby on Rails
    2. Mostrar un formulario sobre el listado de categorías
    3. Actualizar el listado de posts desde el formulario

7. Parte 6. La guinda final

    1. Efectos de animación con Script.aculo.us
    2. Formularios animados
    3. Menús animados

4. Parte 3. Primeros pasos con Script.aculo.us


Qué es Script.aculo.us


Script.aculo.us es una librería de utilidades AJAX creada sobre el framework de Prototype, y que proporciona utilidades para hacer sitios web mucho más atractivos e interactivos. Al contrario que Prototype, cuyo código se distribuye en un fichero fuente prototype.js, en script.aculo.us las funcionalidades vienen distribuidas normalmente (en Ruby on Rails las encontraremos así) en varios ficheros fuente, como son effects.js (para efectos de animación), dragdrop.js (para efectos de arrastrar y soltar), controls.js (para mostrar controles como barras de desplazamiento)... etc. Según lo que queramos, hacer, deberemos incluir unas u otras librerías en la cabecera de nuestras páginas.

<html>
<head>
...
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
...
</head>
...


Posibilidades que ofrece

Como decíamos antes, script.aculo.us comprende un conjunto de distintas funcionalidades, orientadas a la mejora de la apariencia visual de las aplicaciones web, y de la interactividad con el usuario. En resumen, las librerías de script.aculo.us nos permitirán incorporar funcionalidades como:


Ejemplo de uso: tienda de libros

Vamos a simular una tienda de libros simple, donde eliminaremos (por simplicidad) elementos como buscadores y bases de datos. Vamos a suponer que ya hemos buscado unos libros con el buscador contra un catálogo de libros, y tenemos las portadas de los libros que nos interesan:

Copiamos estas cuatro imágenes dentro de la carpeta /public/images.

También vamos a utilizar unos estilos CSS adicionales. Creamos un fichero drag.css en la carpeta /public/stylesheets, con el contenido:

#productos {margin-bottom:10px;height:150px}
.producto, #carro img {cursor:move;}

#carro {
    width: 500px; height:150px; padding:1ex;
    border:1px solid #fa0;
}

#papelera {
    width:64px; margin: 0; padding: 1ex;
}

Vamos a crear una página donde mostremos un listado de los libros (de sus portadas), y podamos arrastrarlos dentro de un carro de la compra, además de poder eliminar del carro los libros que ya no queramos.

Para ello, creamos un fichero ajax3.html en la carpeta /public. Este fichero va a tener todo el código script.aculo.us para gestionar el arrastre de libros. Vamos a ir explicando poco a poco el contenido de esta página.

En primer lugar, definimos la cabecera, con las librerías de prototype y script.aculo.us que vamos a utilizar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
       <title>Tienda de libros</title>
       <link href="stylesheets/style_blue.css" rel="stylesheet" type="text/css"/>
       <link href="stylesheets/drag.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="javascripts/prototype.js"></script>
       <script type="text/javascript" src="javascripts/effects.js"></script>
       <script type="text/javascript" src="javascripts/dragdrop.js"></script>
    </head>

En el cuerpo del documento, aparte del título de la página, mostramos un listado con los 4 libros de ejemplo:

    <body>
        <div id="header">
       
            <div id="header_inner" class="fixed">
       
                <div id="logo">
                    <h1><span>Pruebas AJAX</span></h1>
                    <h2>Taller Estiu 2.0</h2>
                </div>
               
            </div>
        </div>

        <h1>Tu tienda de libros</h1>

        <div id="productos">
            <img src="images/libro1.jpg" id="libro1" class="producto" />
            <img src="images/libro2.jpg" id="libro2" class="producto" />
            <img src="images/libro3.jpg" id="libro3" class="producto" />
            <img src="images/libro4.jpg" id="libro4" class="producto" />
        </div>

        <h2>Tu carro:</h2>

        <div id="carro"></div>

        <p id="papelera">
          <img src="images/trash.png" alt="Papelera" width="50" height="50" />
        </p>

    </body>
</html>

Vemos que, además del listado de libros (los libros son de class="producto", veremos después para qué sirve eso), tenemos un div id="carro", donde pondremos los libros que elijamos para el carro de la compra, y una papelera para quitar del carro. Nos falta añadir el icono de la papelera en la carpeta /public/images.

Ya sólo nos queda decir qué objetos arrastrar y cómo. Para ello, al final de la cabecera (head), añadimos un nuevo bloque de código Javascript, con el código de script.aculo.us que gestionará el arrastre de objetos.

        <script type="text/javascript">

            document.observe('dom:loaded', function() {

                //#1

                $$('.producto').each(function(libro) {
                    new Draggable(libro, {revert:true});
                });

                //#2

                Droppables.add('carro', {
                    accept: 'producto', onDrop: function(libro) {
                        var comprado = new Element('img');
                        comprado.src = libro.readAttribute('src');
                        new Draggable(comprado, {revert:true});
                        $('carro').appendChild(comprado);
                    }
                });

                //#3

                Droppables.add('papelera', {
                    containment: 'carro', onDrop:function(comprado) {
                        comprado.remove();
                    }
                });
            });
       
        </script>
    </head>

Para comprender mejor el código, lo hemos dividido en 3 bloques, numerados #1, #2 y #3

El bloque #1 sirve para tomar todos los objetos cuya clase sea producto (eso se consigue con la función de prototype $$(...nombreclase...)), y para cada uno definir una función que lo declara como "arrastrable" (clase Draggable de script.aculo.us). El parámetro revert sirve para deshacer el arrastre en el caso de que se suelte en una zona no permitida.

El bloque #2 sirve para definir la zona del carro de la compra como una zona donde se pueden soltar libros. Estas zonas "soltables" se definen con la clase Droppable de script.aculo.us. En este caso, la zona con id carro es soltable, y aceptará cualquier objeto de clase producto. Para cada objeto que se suelte, se crea una función que genera un objeto imagen (img) con la misma portada que hemos arrastrado. Esta nueva imagen se convierte también en "arrastrable" (Draggable), para poderla llevar a la papelera y quitarla del carro.

El bloque #3 sirve para definir la zona de la papelera como "soltable". Esta zona admitirá los elementos del contenedor carro, y al soltarlos en esta zona se activa una función que elimina al objeto de la página.

Y eso es todo, ya tenemos lista nuestra tienda de libros con su carro de la compra.

Notar que si quisiéramos interactuar con el servidor en algún momento (por ejemplo, llamar a una página que guarde en la base de datos cierta información), bastaría con usar un Ajax.Updater en el lugar adecuado. Por ejemplo:

     Droppables.add('papelera', {
         containment: 'carro', onDrop:function(comprado) {
              Ajax.Updater('unid','/tienda/borracarro.php');
               comprado.remove();
         }
     });