JavaScript sin dolor usando Prototype (2da parte)

Prototype es una librería JavaScript muy bien desarrollada y que nos libra de gran parte del trabajo asociado a crear páginas web altamente interactivas. Si haz buscado información recientemente, probablemente haz notado que su documentación es muy escasa.

En esta segunda parte del artículo escrito por Dan Webb: Painless JavaScript Using Prototype, nos introducimos al uso del objeto XMLHttpRequest y recopilamos los documentos publicados en la red, que nos serán de suma utilidad...

Manejando Formularios

Los objetos Form y Field prevén un número de funciones simples pero convenientes para trabajar con formularios y campos “input”, así como el código que soporta la puesta en práctica de Ajax con Prototype.

El objeto Form

Generalmente, los métodos del objeto Form toman una ID o una referencia del objeto a un elemento:

// disables the form making all elements read only
Form.disable(form)
// enables a form again
Form.enable(form)
// clears values from all form elements
Form.reset(form)
// returns an array of all form fields in the form
Form.getElements(form)
// focuses on the first form field
Form.focusFirstElement(form)

El objeto Field

El objeto Field trata con elementos individuales del formulario y sus métodos típicamente toman un ID o una referencia del objeto a un elemento de un modo muy similar al objeto Form:

// clears the field, will accept any number of arguments
Field.clear(field)
// returns true if all given fields have a value
Field.clear(field, anotherField)
// gives focus to the field
Field.focus(field)
// selects any text in the field
Field.select(field)

La Serialización del Formulario

En términos de Prototype, serializar un formulario significa leer todos los elementos del formulario y convertirlos en un string URL-codificado (casi) idéntico a la que sería enviada si usted aceptara el formulario. Por ejemplo, considere este formulario:

<form id="search" action="search.php" method="post">
<input type="text" name="query" value="thing" />
<select name="field">
<option value="artistname">Artist Name</option>
<option value="title" selected="selected">Title</option>
</select>
<input type="submit" name="submit" value="Search" />
</form>

// query=thing&field=title&submit=Search
Form.serialize($("search"))

Note que Form.serialize ingeniosamente deja de lado las diferentes maneras en que los elementos del formulario son accesados, de modo que inputs, selects, checkboxes y los radio buttons son manejados correctamente. Form.serialize es útil para varias tareas, pero es el mejor cuando trabajamos con Ajax, como lo veremos dentro de poco.

Form.serialize muestra un comportamiento extraño que vale la pena mencionar aquí. Usted recordará que dije el string URL-codificado que Form.serialize produce son muy parecidos a los que serían enviados si usted aceptara el formulario. Bien, es "casi idéntico" porque Form.serialize no trata el botón submit o el image inputs correctamente. Esto incluye todos los botones submit en el string, independientemente de haber sido presionados e ignorando completamente los “image and button inputs”. Mientras sea consciente de esto, puede codificarlo.

Form Observers

Form.Observer y Form.Element.Observer le permiten observar un formulario (o simplemente, un elemento del formulario) y enviar “callbacks” cuando los datos cambien. Estos son actualmente dos versiones de cada “observer” que verifican el valor actualizado. El primero es un observador periódico, que trabaja así:

new Form.Observer($("myform"), 1, myCallBackFunction);
new Form.Element.Observer($("myfield"), 1, myCallBackFunction);

Estos “observadores” comprueban cada segundo si los datos se han modificado y, si esto es así, llamará a myCallBackFunction.

El segundo tipo de “observador” esta basado en los eventos y sólo realizará la comprobación cuando se produzca la modificación o un clic-evento para los elementos. Usted puede usarlo con algo como esto:

new Form.EventObserver($("myform"), myCallBackFunction);
new Form.Element.EventObserver($("myfield", myCallbackFunction);

Si en todos los campos del formulario se colocan “observadores”, tendremos una manera mucho más eficiente de observar el formulario. Pero, si usted quiere “observar” los cambios de elementos que no soportan estos eventos, use los observadores periódicos.

Trabajando el DOM

Prototype tiene 4 objetos (Element, Insertion, Observer y Position) que permiten varias formas de manipular DOM y deja de lado muchas de los altercados entre los navegadores que tratan a DOM con mucho enfurecimiento. En vez de lanzar su computadora por fuera de la ventana, observe esta sección.

El Objeto Element

El objecto Element trabaja de la forma en que usted probablemente lo esperaba: La mayor parte de los métodos de “Element” simplemente toman un ID o una referencia del objeto a Element que usted quiere manipular. Aquí tiene una mirada a algunos de los métodos más útiles:

// Hides an element
Element.hide(element)
// Shows an element
Element.show(element)
// Adds a CSS class to the element
Element.addClassName(element, "cssClassName")
// Removes a CSS class from the element
Element.removeClassName(element, "cssClassName")
// Returns true if element has the CSS class
Element.hasClassName(element, "cssClassName")
// {width: 394, height: 20}
Element.getDimensions(element)
// replaces the innerHTML of element with newHtml
Element.update(element, newHtml)

Observe la lista completa en el Sitio de Sergio Pereira.

El Objeto Insertion

Sé lo que esta pensando: ¿esto parece un poco extraño, correcto? Bien, el objeto Insertion añade pedazos de HTML en, y alrededor de, un Elemento. Hay 4 tipos de Insertion: Befote (Antes), Alter (Después), Top (Cima) and Bottom (Inferior). Esto le muestra como añadiría algún HTML antes de un elemento con el ID "myelement":

new Insertion.Before("myelement", "<p>I'm before!</p>");

Este diagrama muestra donde cada tipo de Insertion dejará su contenido HTML en relación con el elemento dado.

El Objeto Position

El objeto Position ofrece una carga de métodos que pueden indicarle la posición dada en la pantalla, y proporcionarle información sobre dicha posición en relación con otros elementos de forma compatible con los navegadores. Esto debe ocupar la mayor parte del código complicado de animaciones, efectos y del código de drag-and-drop. De una mirada a la referencia de Position para más detalles.

Consiga su Web 2.0

¡Por fin! Estará pensando, "Él esta poniendo lo que realmente queremos saber". Sí, lo he dejado al final para ingresar en los asistentes Ajax de Prototype, porque ellos están construidos por encima de todo lo que hemos estado leyendo y esto ayudará a entender la forma de serialización de Prototype, “observadores” e “insertions” cuando hablamos de Ajax.

Ajax, en caso de que usted haya sido enterrado en un agujero muy profundo el año pasado, se refiere a la utilización del objeto XMLHttpRequest del navegador (o equivalente) para comunicarse con el servidor sin recargar la página. Prototype deja de lado la mayor parte de los detalles, pero estaría bien conocer un poco más a fondo XMLHttpRequest, lo que usted encontrará en este artículo de Cameron Adams.

Bien, ahora usted esta listo para conseguir algo de acción de la Web 2.0, de una mirada a esta sencilla petición Ajax:

new Ajax.Request("hello.php", {
onSuccess : function(resp) {
alert("The response from the server is: " + resp.responseText);
},
onFailure : function(resp) {
alert("Oops, there's been an error.");
},
parameters : "name=Fred"
});

El constructor Ajax.Request toma una URL y un objeto de opciones (Options). En este caso, enviamos un parámetro a hello.php, y alertamos su respuesta (o alertamos un error si esto no funciona). Esto merece tomarnos un tiempo para familiarizarnos con las opciones que están disponibles. Aquí un cuadro que describe las opciones y sus valores por defecto.

Prototype añade una cabecera HTTP a todas sus peticiones Ajax, de modo que su aplicación en el servidor pueda descubrir que ésta es una llamada Ajax, más que una llamada normal. La cabecera es:

X-Requested-With: XMLHttpRequest

Aquí esta por ejemplo una function PHP usada para detector una llamada Ajax sería:

function isAjax() {
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER ['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
}

Usando este acercamiento, usted puede escribir aplicaciones Ajax que trabajen incluso si el usuario tiene un navegador antiguo o si tiene JavaScript deshabilitado, pero esto se merece todo un artículo completo...

Usando Form.serialize para Pasar Datos a Ajax.Request

Como hemos visto, la opción de parámetros es usada pasar un string URL-codificado de variables. Si los datos que necesita enviar son puestos por un formulario, como lo es con la mayor parte de aplicaciones Ajax, usted simplemente puede usar Form.serialize para generar un string URL-codificado de todos los campos del formulario y pasar la opción de parámetros como tal:

function addComment(e) {
// submit the form using Ajax
new Ajax.Request("comment.php", {
parameters : Form.serialize(this),
onSuccess : updateComment
});
Event.stop(e);
}

Event.observe($("commentform"), "submit", addComment, false);

Escribiendo AJAX Event Handlers

En el ejemplo anterior, onSuccess y onFailure son dos ejemplos del manejo de eventos Ajax. El manejo de eventos funciona porque en el objeto de opciones Ajax.Request se peticiona un argumento, cual es el objeto XMLHttpRequest, para aquella petición de Ajax. Yo normalmente llamo a este argumento response o resp. Usted puede usar este argumento para conseguir la respuesta del servidor de esta manera:

function successHandler(resp, jsonObj) {
// returns the response from the server as raw text
resp.responseText
// returns the response as an XML document that you can navigate with the DOM
resp.responseXML
// alert some property of the returned JSON
alert(jsonObj.name);
}

Recuerde, que resp es sólo el objeto XMLHttpRequest, luego todas las propiedades estarán disponibles.

Usted puede enviar datos como JSON desde su servidor, puede añadir los datos JSON a la cabecera de respuesta X-JSON. Esto entonces automáticamente sería evaluado por Prototype y enviado como el segundo argumento.

Ajax.Updater y Ajax.PeriodicalUpdater

Muchas operaciones de Ajax simplemente implican la actualización de algún HTML de su página con el HTML devuelto por el servidor. El objeto Ajax.Updater cubre a Ajax.Request y simplifica su empleo común por nosotros. Aquí tiene un ejemplo simple:

new Ajax.Updater("mydiv", "hello.php", {
parameters : "name=Fred",
onFailure : function(resp) {
alert("Oops, there's been an error.");
}
});

El trocito de código simplemente sustituye el contenido del elemento cuyo ID sea "mydiv" con cualquier contenido devuelto del servidor Ajax.PeriodicalUpdater similar, pero hace la llamada de Ajax repetidamente en un intervalo que usted asigna:

new Ajax.PeriodicalUpdater("mydiv", "hello.php", {
// initial number of seconds interval between calls
frequency : 1,
decay : 2
});

La opción decay le permite dar a su servidor un poco de soltura si se devuelven muchas respuestas idénticas. Esencialmente, PeriodicalUpdater siempre hace una petición que compara los resultados con lo que el servidor devolvió la vez anterior. Si los valores son los mismos, se multiplica el intervalo por el valor de decay. De esta manera, para el ejemplo antedicho, se haría la siguiente petición dos segundos después, cuatro segundos después, etcétera, hasta que se recibiera un resultado diferente del servidor. En aquel punto, el intervalo sería reinicializado a un segundo.

AJAX con Responders

AJAX responders le permite registrar los eventos globales que son provocados por cada y toda petición Ajax que se encuentra en la página. Ellos son muy útiles para el manejo de aplicaciones con gran cantidad de actividad Ajax. Por ejemplo, usted puede usarlos para mostrar un estándar que cargue una animación siempre que una petición de Ajax suceda:

Ajax.Responders.register({
onCreate : showLoader,
onComplete : hideLoader
});

Si usted busca algunos ejemplos de Ajax desarrollados con Prototype, pruebe este artículo.

¿A dónde vamos?

Como hemos visto en este artículo, Prototype no sólo es útil, además proporciona un punto de partida excelente para escribir otra, más especializada, librería. Esto es exactamente lo que un número creciente de gente ha estado haciendo.

Script.aculo.us y Moo.fx

Script.aculo.us de Thomas Fuchs ha obtenido mucha atención por sus geniales efectos y UI widgets inteligentes. Esto fue, al principio, parte de la librería principal de Prototype, pero pronto superó el control de su padre y se liberó.

Usando Prototype como base, script.aculo.us se especializa en suministrar una rica experiencia al usuario con efectos animados, de arrastrar y soltar (drag and drop) y los componentes poderosos UI. Hay un buen Wiki sobre el sitio, con un rápido crecimiento de documentación de calidad para ayudarle ha comenzar y páginas de ejemplos.

Como script.aculo.us crece bastante en el tamaño de sus archivos, ha sido dividido en varios paquetes, entonces sus usuarios no tendrán que descargar la librería completa, solamente puede usar determinados efectos. Sin embargo, aún los archivos individuales son bastante voluminosos.

Si usted es de efectos simples, yo le recomendaría Moo.fx. Sólo 3 kilobytes de tamaño, y obtendrá efectos que utilizan Ajax de manera simple. Lo que también es un gran punto de partida si usted quiere escribir sus propios efectos.

Behaviour

Behaviour es una gran adición a su juego de herramientas DOM Scripting que le permite usar selectores CSS para añadir comportamientos a sus documentos. Aquí está una muestra de lo que puede hacer:

Behaviour.register({
"#comment_form form" : function(el) {
// catch form submission and complete with XHR if possible
el.onsubmit = function() {
Form.disable(this);
new Ajax.Request(this.action, {
method: this.method,
postBody: Form.serialize(this),
onComplete: updateComments});
return false;
};
}
});

Lea más sobre esto en el sitio de Behaviour. Ahora es posible alcanzar un tipo similar de cosas usando la nueva función $$ que mencionamos en el artículo anterior, por lo que volverlo a mencionar sería redundante.

jQuery

jQuery es una pequeña y compacta librería que combina bien con Prototype y crea una versión superhéroe de la función de $ que puede tomar Xpath y selectores CSS 3. Esto acopla aquella capacidad con algún método sumamente inteligente que encadena la aproximación que hace al código muy conciso. Tenga cuidado con esto.

Wrap up

Prototype es una pieza poderosa del conjunto de herramientas cuando vaya a añadir algún código DOM a sus aplicaciones web. ¡Lamentablemente, sus capacidades e instrumentos han crecido a un precio mucho mayor que su documentación! Hemos logrado cubrir cada esquina de Prototype en este artículo, pero no cada método. Espero que usted ahora sepa a donde ir para conseguir esa información extra que necesite.

Si usted quiere conocer más pruebe en prototypedoc.com de Ronnie Roller, un recurso que lo mantiene actualizado de la creciente documentación de Prototype. ¡Diviértase!