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
   

7. Parte 6. La guinda final

Efectos de animación con Script.aculo.us

Una de las funcionalidades más demandadas de script.aculo.us, junto con la de arrastrar y soltar, son los múltiples efectos visuales que ofrece. Mediante sencillas instrucciones Javascript (y más sencillas aún funciones Rails) podemos lograr que cualquier componente de nuestra web se mueva siguiendo ciertos patrones: efectos persianas ascendentes y descendentes, crecimiento, iluminación, opacidad... todo depende del efecto que elijamos.

Formularios animados

Vamos a retomar el formulario de edición de categorías que añadimos en el administrador de categorías en el paso anterior, y le vamos a poner un efecto de persiana llamado BlindDown, para que no aparezca de golpe cuando pinchemos en "Nueva Categoría", sino que se muestre con ese efecto.

Para ello, editamos el archivo /app/views/admin/categorias/index.html.erb, y dejamos estas líneas:

    <p id="add_link"><%= link_to_function("Nueva Categoria",
    "Element.remove('add_link'); Element.show('add_subject');")%></p>

de esta otra forma (habría que quitar la llamada a Element.show y poner el texto en negrita a continuación):

    <p id="add_link"><%= link_to_function("Nueva Categoria",
    "Element.remove('add_link'); Effect.BlindDown('add_subject');")%></p>

Podemos probar el nuevo efecto al pinchar en el enlace de "Nueva Categoría".

Menús animados

Vamos ahora a aplicar efectos sobre los menús de la parte pública de la web. Para eso editamos el fichero /app/views/layouts/publico.html.erb, y modificamos los elementos del menú, añadiéndole un id a cada uno:

   <div id="menu">
       <ul>
           <li id="menu1"><a href="/" class="active">Inicio</a></li>
           <li id="menu2"><%= link_to "Admin", admin_posts_path %></li>
       </ul>
   </div>

Al final del documento añadimos un bloque script. Vamos a utilizar el helper de Rails visual_effect que ya coloca el código Javascript necesario para realizar la animación que digamos. En este caso vamos a utilizar la animación grow en los dos menús, en el primero con una duración de 3 segundos, y en el segundo con 1 segundo.

<script type="text/javascript">
  <%= visual_effect :grow, "menu1", :duration => 3.0 %>
  <%= visual_effect :grow, "menu2", :duration => 1.0 %>
</script>

Ya podemos probar la página (la página raíz de nuestro blog), y veremos cómo se animan sus menús. Podemos también ver el código fuente de la página, y observar qué código Javascript se ha introducido al usar el helper visual_effect:

new Effect.Grow("menu1",{duration:3.0});
new Effect.Grow("menu2",{duration:1.0});