Scriptaculous es una librería que extiende a Prototype proporcionándonos la capacidad de crear efectos visuales e incluso animaciones a partir de unas funciones muy sencillas. Para poder implementar listas ordenadas necesitamos usar una de las funciones de Scriptaculous que convierte una lista convencional en una lista ordenable en tiempo real.

Para crear la lista ordenada nos basaremos en  el ejemplo que podemos encontrar en la wiki de scriptaculous.

En primer lugar crearemos un documento html en el que añadiremos nuestra lista:

<ul id="lista">
  <li style="position:relative;">Lorem</li>
  <li style="position:relative;">ipsum</li>
  <li style="position:relative;">dolor</li>
  <li style="position:relative;">sit</li>
  <li style="position:relative;">amet</li>
  <li style="position:relative;">consectetur</li>
  <li style="position:relative;">adipisci</li>
  <li style="position:relative;">velit</li>
</ul>

Como veis hemos asignado una id al elemento ul llamado “lista” que después utilizaremos para decirle a Scriptaculous que lista debe convertir en ordenable. Por otra parte también hemos añadido position:relative; como estilo de cada ítem de la lista para que al convertirse en ordenable se puedan mover.

Para poder hacer uso de Prototype y Scriptaculous tenemos dos maneras de incluir las librerías, la primera de ellas es descargárnoslas y llamarlas desde nuestro html y la segunda manera es incluirlas directamente desde la web oficial (cabe destacar que google tiene una versión cacheada de estas librerías y podemos acceder a ellas desde el apartado API’S).

En nuestro código optamos por incluírlas directamente, para ello escribiremos el siguiente fragmento html entre las etiquetas head (aunque recientemente ha aparecido una Best Practice que indica que para cargar la página más rápidamente hay que llamar a javascript al final de la página justo antes del cierre del body) :

<script src="http://script.aculo.us/prototype.js" type="text/javascript"></script>
<script src="http://script.aculo.us/scriptaculous.js" type="text/javascript"></script>

Por último debemos decirle a Scriptaculous que lista debe convertir, para ello utilizaremos la siguiente instrucción:

<script language="javascript">
  Sortable.create("lista");
</script>

Con la línea “Sortable.create(“lista”);” convertimos nuestra lista convencional en una lista ordenable mediante Drag&Drop que esta muy de moda en la web 2.0. Si os fijáis en la llamada a la función create pasamos como primer parámetro el id de la lista que queremos convertir, esta función tiene otro parámetros que podemos descubrir en la página de la wiki referente a esta función, entre otras opciones podemos especificar que elementos son los que se van a mover por la lista (como por ejemplo tr en el caso de querer una tabla con sus filas ordenables) e incluso podemos especificar un handler (un elemento que va a actuar como el punto desde el que arrastrar el elemento).

Si os interesa saber más sobre los efectos que puede realizar esta librería sólo es cuestión de investigar en la wiki de scriptaculous dónde tenéis otra manera de ordenar listas como por ejemplo escoger que parte del ítem es la que queréis mover.

Aquí os dejo una pequeña demo de nuestra lista:

• Lorem
• ipsum
• dolor
• sit
• amet
• consectetur
• adipisci
• velit

document.getElementById('element').style.display = 'none';

La gente que desarrolla Prototype ha caído en la cuenta de estas instrucciones y nos proporciona una serie de atajos claros y cortos (esa es la gracia de los atajos) y aquí vamos a tratarlos todos.

Para empezar cabe destacar que al utilizarlos Prototype automáticamente extiende todos los objetos con todas las funcionalidades disponibles.

Hay siete atajos en total y estos se caracterizan por estar construidos con el símbolo “$” y una letra.

$() Extracción rápida de objetos inteligentes

Este atajo nos permite extraer objetos especificando la ID, como ya he comentado Prototype extiende su funcionalidad automáticamente.

/**
*
* Uso del atajo $() para extraer objetos mediante su ID
*
*/

// Código clásico
document.getElementById('element').style.display = 'none';

// Mediante los atajos de Prototype
$('element').style.display = 'none';

// Utilizando los métodos extendidos
$('element').hide();

$w() Crear arrays nunca fue tan fácil

Este atajo nos permite crear arrays sin necesidad de preocuparnos de las comillas y comas que separan a cada elemento, para crear una array lo único que hay que pasarle es una string y los valores separados por un espacio (de ahí la “w” de whitespace).

/**
*
* Uso del atajo $w() para crear arrays
*
*/

// Código clásico
var frutas = ['manzana','pera','fresas','melocotón','melón'];

// Mediante $w()
var frutas = $w('manzana pera fresas melocotón melón');

$$() Buscando con estilo

Este atajo nos permite obtener cualquier objeto que cumpla las reglas CSS que le pasemos. No solo permite especificar nombres de clases sino que también podemos utilizar selectores CSS avanzados ya que $$() contempla la gran mayoría del estándar CSS 3.

/**
*
* Ejemplos de uso del atajo $$()
*
*/

$$('div');
// Selecciona todos los DIV's en el documento
// Es similar al uso de document.getElementsByTagName('div');
// Devuelve una array de elementos extendidos

$$('#container');
// Igual que $('container') solo que este devuelve siempre una array

$$('li.even');
// Todos los elementos LI con la clase 'even'

$$('#container a[rel]');
// Todos los links que tengan un atributo 'rel' que estén dentro del elemento con ID 'container'

$$('a[href="#"]');
// Todos los links cuyo atributo href sea '#'

$$('#container li', '#menu li');
// Todos los elementos LI que estén dentro de los elementos con ID 'container' o 'menu'

$$('a:not([rel~=nofollow])');
// Todos los links excluyendo aquellos que tengan la palabra 'nofollow' en el atributo 'rel'

$$('table tbody > tr_nth-child(even)');
// Todas las filas pares de todas las tablas

$$('div:empty');
// Todas los objetos DIV que estén vacíos

Para ver un listado completo de los selectores CSS soportados podéis visitar la documentación oficial

$A() Unificando colecciones

El atajo $A() nos permite convertir cualquier colección de datos array-compatible en un objeto Array.

/**
*
* Ejemplo de uso del atajo $A()
*
*/

// Usando tipos regulares
var p = document.getElementsByTagName('p');
for( var i = 0; i < p; ++i)
 Element.hide(p.item(i));
Element.update(p.item(p.length -1), 'Un poco largo');

// Al estilo Prototype (sin usar los elementos extendidos)
var p = $A(document.getElementsByTagName('p'));
p.each(Element.hide);
Element.update(p.last(), 'Esto está mejor');

Otro ejemplo podría ser el siguiente:

/**
*
* Ejemplo de uso del atajo $A()
*
*/

// Usando tipos regulares
function showArgs(){
 alert(Array.prototype.join.call(arguments, ', ');
}

// Mediante Prototype
function showArgs(){
 alert($A(arguments).join(', '));
}

$F() Trabajando como expertos con los campos

Este atajo nos permite conocer el valor de cualquier campo que se encuentre en un formulario, puede parecer una tontería pero pensad en los campos radio button, en los checkbox o en las listas de selección múltiple y además hay que tener en cuenta las inconsistencias entre navegadores, pues bien Prototype tiene en cuenta todo esto y retorna los siguientes valores:

• Para listas de selección múltiple devuelve un array de valores, una entrada por cada valor, en otro caso simplemente devuelve un valor simple.
• Para radio butons o checkboxes sin marcar devuelve null
• Para cualquier otra cosa devuelve un valor simple

Todos los valores son retornados como Strings, en caso de que en las listas el atributo value= no existe en cada tag option este método devuelve el texto contenido entre las tags option

$H() Crear Hashes de cosas

Es un acceso directo para la creación de Hashes, realmente lo que estamos haciendo es new Hash(…).

$R() Manipulando rangos

Este es uno de los atajos menos utilizados en Prototype, básicamente permite crear rangos de números.

/**
*
* Ejemplos de uso del atajo $R()
*
*/

$R(1,5).each(function(n){
 // Esta función es llamada 5 veces, desde 1 hasta 5
});

$A($R(1,7));
// -> [1,2,3,4,5,6,7]
// Crea un array con los valores desde 1 hasta 7

$R(1,10).findAll(function(n){
 return 0 != n % 2;
});
// -> [1,3,5,7,9]
// Devuelve todos los número impares del rango desde 1 hasta 10

Como podéis ver los atajos de Prototype nos facilitan la vida y sobretodo evitan que tengamos la necesidad de escribir muchas líneas de código.

Probad y ya me contaréis.

Bibliografía:

[1] Christophe Porteneuve. Prototype and script.aculo.us 2007 Ed. The Pragmatic Programmers. ISBN:13 978-1-934356-01-2