Prototype.js: la sombra que se esconde detrás de todo

0
29040

Prototype.js: la sombra que se esconde detrás de todo.

0. Índice de contenidos.

1. Introducción

Prototype.js se define asi mismo como un framework, escrito en javascript, para desarrollar aplicaciones web dinámicas.
Si bien, más que un framework, yo diría que es una librería que implementa toda esa funcionalidad que siempre quisimos que formase parte del estándar ECMAscript, proporciona:

  • una extensión del lenguaje,
  • un acceso sencillo al árbol DOM, con independencia del navegador del cliente,
  • un soporte claro y sencillo de Ajax,
  • soporte para JSON,
  • y otras muchas utilidades que siempre hubieses querido tener trabajando con javascript.

Más de uno puede decir «a buenas horas mangas verdes», pues no tiene años…
y es verdad, y otros dirán «yo no quiero saber nada de javascript!!!», no con menos razón si tenemos en cuenta que nosotros mismos estamos proponiendo el uso de frameworks y,
dentro de estos, librerías de componentes que nos aislen de la problemática de trabajar con un lenguaje del lado del cliente.

Voy a intentar justificar el por qué de este tutorial, aún hoy día. De todos los proyectos que conocéis, ¿cuántos son nuevos desarrollos y cuántos están en fase
de mantenimiento?

  • de los nuevos desarrollos, ¿todos se basan en JSF y librerías de componentes del tipo ICEfaces o RichFaces?
  • de los que están en fase de mantenimiento, ¿cuántos están construidos sobre un framework conocido y con soporte de ajax?
  • de los que no responden a ningún framework o no tienen soporte de ajax, ¿cuántos tienen restricciones (software en el que corren, hardware, presupuesto,…)
    de modo que no pueden ser migrados a un sistema «más moderno», o no pueden incluir nuevas librerías?

Si no conocéis ningún caso que pueda encuadrarse dentro del último grupo, sentiros afortunados, y pedir por no caer en un mantenimiento o incluso evolutivo de una
aplicación que tenga más de 4 años, que no responda a patrones y tenga su propia arquitectura.

Este tutorial va dirigido:

  • a quien necesite imprimir algo de dinamismo a la aplicación que está manteniendo o sobre la que tiene que realizar un evolutivo y no puede evitar en el manejo
    «a mano» de javascript. Vamos a intentar que ese manejo sea más sencillo y a incluir soporte para Ajax de una forma muy simple.
  • a mi cuñado Chema, que está realizando su primer formulario en php dentro de una página web estática y sencilla, en la que no tiene sentido el uso de ningún framework,
    y cada vez que el cliente selecciona una provincia, se recarga toda la página para dar valor
    a las poblaciones de la misma, perdiéndose el valor de los campos de tipo <input type=»file» />. Vamos a ver un ejemplo de recarga controlada de selectores vía
    Ajax con prototypejs.
  • a quien utilice librerías de componentes Ajax, que ya encapsulen todo el código javascript que se ejecuta en cliente, porque prototypejs está detrás de todo…

2. La sombra que se esconde detrás de todo.

A finales de 2006, una encuesta de popularidad de ajaxian.com afirmaba que
prototypejs era el framework más usado con un 43%, y script.aculo.us el segundo con un 33%, sin tener en cuenta
que por debajo de script.aculo.us está prototypejs (43 + 33 = 76).

Ahora seguramente esto no sea así y el ranking de popularidad haya cambiado. Tenemos otras librerías que, sobre la idea base de prototype, implementan mucha más funcionalidad:

Si tuviesemos que escribir hoy día una librería de componentes JSF basándonos en un framework de javascript, seguro que examinaríamos primero estas librerías, pero la
realidad es que las librerías de componentes que usamos hoy día se escribieron hace un par de años y tomaron como base la tecnología más popular en ese momento.

Afirmar que «prototypejs es la sombra que se esconde detrás de todo» es un poco ambicioso, pero podéis comprobar que:

  • ICEfaces se basa en script.aculo.us para incluir «efectos especiales» y ésta a su vez prototypejs, solo tenéis que abrir el fichero icefaces-d2d.js y ver
    las primeras líneas de código,
  • Ajax4j que ahora forma parte de RichFaces importa el fichero framework.pack.js, al igual que en el caso anterior, revisad las primeras líneas del código del fichero,
  • cuando en Ruby On Rails necesitamos realizar alguna recarga controlada de la página se importan las librerías vía «&lt%= javascript_include_tag ‘prototype’ %>»
    que importa directamente la librería prototypejs que incorpora el RoR.
  • el framework de desarrollo de aplicaciones php de Zend importa, del mismo modo, directamente la librería prototypejs,

Podríamos continuar con algún ejemplo más, pero con los dos primeros, para los que desarrollamos habitualmente aplicaciones JEE, nos debería bastar, puesto que son los más usados.

3. Funciones principales.

Para obtener una información detallada sobre las múltiples posibilidades que nos proporciona prototypejs, echad un vistazo a la
documentación del site. Ahora ya tenemos una documentación detallada en el site de la librería, y no solo
existe la documentación de antaño, la de Sergio Pereira.

Aquí solo voy a comentar brevemente las funciones que me parecen más relevantes.

3.1. Acceso al árbol DOM.

Prototypejs nos da una serie de funciones que nos facilitan el acceso a los nodos del árbol DOM y sus atributos:

  • $(»);: la función dolar obtiene un nodo por id como si de un getElementById(») se tratase, pero abstrayéndonos del browser en el que se ejecute,
  • F(»): la función $F obtiene todos los valores de un formulario, para enviarlos a través de una petición Ajax por ejemplo,
  • $A(»): la función $A convierte un objeto a un array de objetos
  • $H(»): la función $H convierte un objeto en un hash
  • document.getElementsByTagName(»): devuelve una colección de nodos que responden al mismo nombre,
  • mediante el objeto Form: podemos obtener una serialización del formulario: Form.serialize(»)

3.2. Uso de Ajax.

Prototypejs proporciona soporte de ajax a través del objeto Ajax, de modo que no tenemos que preocuparnos si el navegador da soporte al objeto XMLHttpRequest de forma nativa
o a través de un control ActiveX.
Podemos realizar:

  • peticiones síncronas al servidor:
  • peticiones asíncronas al servidor:
  • recarga controlada de componentes:

4. Ejemplo: recarga controlada de un selector con prototypejs.

Vamos a realizar un ejemplo sencillo, la recarga controlada de un selector en una página html básica, en función de la selección realizada en otro.

El código de la aplicación se podría ejecutar en cualquier servidor web, de aplicaciones,… salvo por el hecho de que la página que da servicio al listado de poblaciones
es un jsp, pero podría ser un php, un cgi, un servlet, cualquier «cosa» del lado del servidor que devolviese un xml en función de un parámetro.

Vamos a por el html:

  • 07: Nos descargamos la última librería de prototypejs y la importamos en la cabecera.
  • 08: Importamos la librería que controlará la recarga del selector, cuyo código incluimos más abajo.
  • 17: Incluimos el selector de provincias con un par de ellas para la prueba y asignamos al evento onchange la llamada a una función javascript que
    implementaremos en la librería que importamos en la línea 08, pasándole como parámetro todo el objeto selector de provincias.
  • 24: Incluimos el selector de provincias que se recargará de forma dimánica. Le asignamos un name, en el ámbito del formulario (para poder obtener los
    parámetros de la request en su caso) y un id, para poder acceder al mismo a través de la lectura del árbol DOM.

La librería de javascript script/reloaders.js, que controla las peticiones y la recarga del selector, sería la siguiente (incluye un comentario para cada línea):

Dejar respuesta

Please enter your comment!
Please enter your name here