Ejemplo 2 de Ajax con Prototype: preparando el escenario con JavaScript

Creación de los archivos JavaScript.

Después de crearel nivel de presentación con XHTML y CSS, continuamos con la preparación de la infraestructura funcional de la aplicación utilizando JavaScript.

Para esto descargamos la última versión de Prototype, la cual para este caso era la 1.6.0.3 y lo ubicamos en un nuevo directorio llamado /js bajo el directorio de la aplicación.

En ese mismo directorio creamos el archivo funciones.js donde se van a agregar a continuación las funciones que determinarán el comportamiento del sistema.

Referencia desde el archivo XHTML.

Es necesario incluir a estos dos nuevos archivos (prototype-1.6.0.3.js y funciones.js) en la aplicación para que el navegador los descargue cuando el usuario la acceda.  Para hacer esto se incluye su referencia en la cabecera del archivo demo.php de la siguiente manera.

    <script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
    <script src="js/funciones.js" type="text/javascript"></script>

Estableciendo el estado inicial.

Lo primero que se debe hacer establecer el manejo de eventos de la aplicación, si se recuerda toda la información que conectaba los componentes XHTML a sus eventos (onclick, onchange, etc.) fue omitida voluntariamente para promover la separación de contenido.  Esto se debe realizar tan pronto como la aplicación es cargada para que cuando el usuario interactúe con ella los eventos ya se encuentren disponibles.  Para esto se utiliza el evento on DOM loaded el cual sucede tan pronto como la estructura (XHTML) de la página ha sido cargada.  Se aprovecha también para llamar a la función que listará a los contactos registrados (6) para que aparezcan tan pronto como el usuario accede al sitio.  Esta función como otras será implementada próximamente.

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

    enActualizarBusqueda(null);
});

Requerimientos funcionales.

Como se mencionó anteriormente, la función establecerManejoEventos especifica que funciones se van a invocar ante cual evento generado y determinar con esto el flujo de la aplicación.  El esquema general de este flujo se basa en las siguientes premisas.

  • Si el usuario desea crear a un nuevo registro (bNuevo) se deberá limpiar el formulario para que se ingresen los nuevos datos y la acción siguiente será la de agregar el registro.
  • Si el usuario presiona el botón de acción (bAccion) su funcionamiento dependerá de si se está agregando a un registro nuevo o si por el contrario se está editando a un registro ya existente.  El texto de la etiqueta define su funcionalidad.
  • Si el usuario presiona el botón de remover (bRemover) se deberá solicitar la remoción del registro y actualizar la lista de contactos registrados la cual ya no deberá incluír al mensaje antes seleccionado.
  • Si el usuario presiona el botón de listar (bListar) se deberá actualizar la lista de contactos registrados.
  • Si el usuario modifica alguno de los filtros de búsqueda (sLetra y sCampo) se deberá actualizar el listado de los contactos registrados mostrando únicamente los que cumplan con el criterio de búsqueda seleccionado.
  • Si el usuario decide editar a un registro específico haciendo click sobre su enlace desde el listado de contactos registrados, sus datos deben ubicarse en el formulario de edición y la próxima acción deberá ser la de editar a dicho registro.
  • En cualquier caso se deberá mostrar un mensaje de éxito (verde) o de error (rojo) al usuario indicándole el estado de su solicitud.

Establecimiento del manejo de eventos.

Para manipular formalmente el flujo de la aplicación a partir de los eventos sucitados, se establecen observadores sobre los diferentes componentes los cuales relacionan a un determinado tipo de eventos sobre ellos con una función JavaScript que será ejecutada cuando sucedan.  Los tipos de eventos utilizados por esta aplicación de demostración son onClick sobre los botones y onChange en los campos de selección.

function establecerManejoEventos()
{
    $('bNuevo').observe('click',   enNuevo);
    $('bAccion').observe('click',  enCrearActualizar);
    $('bRemover').observe('click', enRemover);
    $('bListar').observe('click',  enActualizarBusqueda);
    $('sLetra').observe('change',  enActualizarBusqueda);
    $('sCampo').observe('change',  enActualizarBusqueda);
}

Mostrar mensajes de estado.

El mensaje de estado es un texto que le indica al usuario final el éxito o fracaso de la solicitud que le hizo al sistema.  Para tal fin se definió a mensaje el cual es un div que se encuentra en la parte superior del formulario después de la cabecera con el título.

Las siguientes funciones se utilizan para escribir un texto en el mensaje de estado y para limpiarlo.

function ponMensajeEstado(mensaje)
{
    $('mensaje').update(mensaje);
}

function limpiarMensajeEstado()
{
    ponMensajeEstado('');
}

Mensajes de estado buenos y malos.

Los mensajes de estado indican del éxito o fracaso de un procedimiento, para diferenciarlos visualmente se decidió que los mensajes de éxito se presenten de color verde y los mensajes de error sean de color rojo.  Para esto se crearon dos funciones por separado que facilitarán su presentacion y que a su vez se basan en las funciones recientemente creadas.

function ponMensajeBien(mensaje)
{
    $('mensaje').addClassName('MensajeBien');
    $('mensaje').removeClassName('MensajeMal');

    ponMensajeEstado(mensaje + '.');
}

function ponMensajeMal(mensaje)
{
    $('mensaje').addClassName('MensajeMal');
    $('mensaje').removeClassName('MensajeBien');

    ponMensajeEstado(mensaje + '.');
}

MensajeBien y MensajeMal son dos clases CSS definidas en css/style.css que determinan el formato del texto a desplegarse.  Consulte dicho archivo para complementar su utilización.

Crear un nuevo registro.

Como se mencionó anteriormente, la creación de un nuevo registro involucra tres actividades: limpiar el formulario para que el usuario ingrese la nueva información, modificar el tipo de acción próximo a Agregar y limpiar el mensaje de estado para no confundir al usuario con cualquier mensaje previo.

function enNuevo(evento)
{
    $('bAccion').value      = 'Agregar';

    $('tId').value          = '';
    $('tNombres').value     = '';
    $('tApellidos').value   = '';
    $('tCorreo').value      = '';
    $('tFNacimiento').value = '';

    limpiarMensajeEstado();
}

Modificar la información.

El manejo de una solicitud de acción es levemente mas elaborado ya que puede ser de dos tipos: Agregar a un nuevo registro o Editar a uno ya existente.  Por claridad, la función que maneja el evento va a determinar el tipo de acción solicitada y realizará la invocación de una función específica, con su apropiada implementación.

function enCrearActualizar(evento)
{
    if($('bAccion').value == 'Agregar')
        return enAgregarRegistro(evento);

    if($('bAccion').value == 'Editar')
        return enEditarRegistro(evento);

    alert('La acción especificada es desconocida!');

    limpiarMensajeEstado();

    return false;
}

Manipulación y acceso a los datos.

Las funciones restantes: enAgregarRegistro, enEditarRegistro, enActualizarBusqueda, enCargarRegistro y enRemover que permiten manipular la información de los registros serán implementadas utilizando AJAX, sin embargo su implementación tendrá que esperar un poco ya que antes es necesario determinar e implementar el modelo de datos de la aplicación.

Conclusiones.

En este capítulo se realizó la implementación de la estructura que provee el flujo de eventos de la aplicación en general, esto se realizó en JavaScript y utilizando las facilidades de la librería de Prototype.

Algunas de las funciones de este nivel, las relacionadas con la manipulación de información, quedarán pendientes de implementación hasta que se realice la implementación de la persistencia en un próximo capítulo del tutorial.

La aplicación a este nivel ya es funcional, teniendo en cuenta que por ahora, las funciones sin implementación se limitarán a mostrar en pantalla un mensaje informativo.

Enlaces.

2 thoughts on “Ejemplo 2 de Ajax con Prototype: preparando el escenario con JavaScript”

Leave a Reply

Your email address will not be published. Required fields are marked *