Ejemplo 2 de Ajax con Prototype: interfaz de usuario

Introducción.

Hace un año largo que publiqué el primer ejemplo de Ajax utilizando Prototype: partes 1, 2, 3, 4 y demostración.  En esa época estaba apenas empezando a aprender acerca de los frameworks de JavaScript y había utilizado principalmente MooTools. Me gusta mucho probar diferentes métodos de hacer las cosas porque encuentro gratificante aprender cosas nuevas.  Ahora, un año después, he desarrollado dos proyectos con MooTools y estoy terminando exitosamente otro con Prototype y he aprendido bastante de estos frameworks como para mejorar sustancialmente este mini-tutorial.

Diseño.

La idea de esta nueva versión es la de implementar una aplicación similar que permita la administración de contactos.  Un contacto relaciona la siguiente información de una persona.

  • Nombres.
  • Apellidos.
  • Dirección de correo electrónico.
  • Fecha de nacimiento.

Las acciones que se podrán realizar sobre los contactos son las siguientes.

  1. Crear a un nuevo contacto.
  2. Editar a un contacto existente.
  3. Remover a un contacto existente.
  4. Listar los contactos registrados permitiendo filtrarlos por campo (nombres o apellidos) y por letra inicial del campo elegido.

Implementación.

Sin ser visualmente atractiva la interfaz de usuario se diseña para que sea funcional y que cumpla con las características del sistema propuesto. El siguiente es el esquema de lo que se desea implementar con la interfaz del usuario de la aplicación AJAX.

Esquema del UI
Esquema del UI

El diseño cuenta con las siguientes secciones.

  1. Cabecera con título, subtítulo y mensaje de estado.
  2. Pie de página.
  3. Formulario para la edición de los datos del contacto.
  4. Botones para elegir la acción a realizarse.
  5. Filtro de listado.
  6. Listado de contactos registrados.

Ese capítulo no requiere de demasiada información o esfuerzo con respecto al tema principal del tutorial, es simplemente un documento XHTML para el contenido con clases CSS para su presentación.  A continuación se referencian algunos apartes de su implementación que serán útiles tener en cuenta para los capítulos siguientes.

Referencia a el archivo con la hoja de estilos.

Los estilos se encuentran especificados en un archivo diferente ubicado en css/style.css, su referencia desde el archivo demo.php que contiene el código XHTML se realiza en la cabecera (head) de la siguiente manera.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <!-- Meta Data -->
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <meta name='author' content='Jorge Iván Meza Martínez <jimezam@gmail.com>' />
    <meta name='description' content='Demostración del uso de Ajax con Prototype y PHP' />
    <!-- Site Title -->
    <title>Demostración de Ajax con Prototype y PHP</title>
    <!-- Link to standard Style Sheets -->
    <link href='css/style.css' type='text/css' rel='stylesheet' />
</head>
<body>
[...]
</body>
</html>

Debe tenerse en cuenta que para hechos prácticos la cadena […] reemplaza a una sección específica de código y no debe interpretarse de manera literal.

El mensaje de estado.

El mensaje de estado se utiliza para informarle al usuario que la aplicación web se encuentra realizando algún tipo de procesamiento asíncrono o para informarle el resultado del mismo.  Para esta aplicación se reservará un espacio para los mensajes en la parte inferior de la cabecera de la siguiente forma.

    <div id='mensaje'>
        &nbsp;
    </div>

El formulario de datos.

        <form id='formulario' action='#' method='post'>
            <input type='hidden' id='tId' name='tId' value='' />

            <fieldset>
                <legend class='SeccionTitulo'>Información del contacto</legend>

                <table>
                    <tr>
                        <td class='CampoTitulo'>Nombres</td>
                        <td><input class='CampoEstilo' type='text' id='tNombres' name='tNombres' size='30' maxlength='30' title='Nombres' /></td>
                    </tr>
                    <tr>
                        <td class='CampoTitulo'>Apellidos</td>
                        <td><input class='CampoEstilo' type='text' id='tApellidos' name='tApellidos' size='30' maxlength='30' title='Apellidos' /></td>
                    </tr>
                    <tr>
                        <td class='CampoTitulo'>Correo electrónico</td>
                        <td><input class='CampoEstilo' type='text' id='tCorreo' name='tCorreo' size='30' maxlength='128' title='Correo Electrónico' /></td>
                    </tr>
                    <tr>
                        <td class='CampoTitulo'>Fecha de nacimiento</td>
                        <td><input class='CampoEstilo' type='text' id='tFNacimiento' name='tFNacimiento' size='10' maxlength='10' title='Fecha de Nacimiento' /></td>
                    </tr>
                    <tr>
                        <td class='SeccionBoton' colspan='2'>
                            [...]
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>

En el formulario deben notarse varios aspectos interesantes para el trabajo con AJAX.

  • La etiqueta <form> no requiere de un action específico, por ello le indicamos la mísma página (#).
  • El identificador del formulario de los datos es formulario.  Este valor se utilizará frecuentemente desde el código JavaScript.
  • El campo para el código del contacto (tId) es oculto ya que es para el manejo interno únicamente.
  • Muchas funciones de Prototype como es el caso de Form.serialize se basan en el atributo name de la etiqueta en lugar del id habitualmente utilizado, por esto es altamente aconsejable definir los dos tal y como se realizó con los input [type=’text’] anteriormente.

Los botones de acción.

Estos botones van en la sección td.SeccionBoton justo donde se dejó una marca […] en el código anterior y se especifican de la siguiente manera.

<input class='Boton' id='bListar'  type='button' value='Listar' />
<input class='Boton' id='bNuevo'   type='button' value='Nuevo' />
<input class='Boton' id='bAccion'  type='button' value='Agregar' />
<input class='Boton' id='bRemover' type='button' value='Remover' />
  • Los botones son button y no submit porque su misión es la de iniciar a una función JavaScript, no la de enviar al formulario como normalmente se hace durante un postback.
  • La definición de los botones no incluye información del manejo de sus eventos (onClick) ya que por la separación de funciones: XHTML -> contenido, CSS -> presentación y JS -> funcionalidad; esta se definirá en el correspondiente archivo de funciones de JavaScript.
  • El botón bAccion servirá para crear registros o para editarlos de acuerdo con la selección del usuario.

El filtro de búsqueda.

Permitirá filtrar al listado de contactos registrados que se visualizarán en la sección de resultados de la búsqueda (6).  Se especifica de la siguiente manera. El primer componente de selección permite elegir la letra con la cual se filtrará el contenido o Todos si no se desea realizar un filtro.

                        <select id='sLetra' name='sLetra'>
                            <option value='todos'>Todos</option>

                        <?php

                            for($i=65; $i<=90; $i++)
                            {
                                $c = chr ($i);

                                echo "<option value='{$c}'>{$c}</option>n";
                            }

                        ?>

                        </select>

El segundo componente de selección permite especificar el campo sobre el cual se realizará el filtro, ya sea el de nombres o el de apellidos.

                        <select id='sCampo' name='sCampo'>
                            <option value='nom'>Nombres</option>
                            <option value='ape'>Apellidos</option>
                        </select>

De manera similar a lo sucedido con los botones de acción, para estos select no se define en este archivo ningún tipo de manejo de eventos.

El listado de contactos registrados.

En esta sección se mostrará el listado de contactos registrados filtrados según los criterios seleccionados en la sección anterior. Por ahora se encuentra vacío.

            <div id='Resultados'>
                &nbsp;
            </div>

Conclusiones.

En este primer capítulo se definió el proyecto a implementarse y se realizó la especificación de la interfaz de usuario sobre la cual se construirá la aplicación asíncrona. Este subproducto se encuentra separado en dos partes: la especificación del contenido (demo.php) y la especificación de su presentación (css/style.css).

En los siguientes capítulos de este tutorial se irá complementando paso a paso la aplicación de demostración, añadiéndosele diferentes funcionalidades hasta alcanzar el objetivo final aquí trazado.

Enlaces.

2 thoughts on “Ejemplo 2 de Ajax con Prototype: interfaz de usuario”

Leave a Reply

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