Cuando es necesario presentar formularios web cuyos campos deben generarse de manera dinámica, muchas veces se decide almacenar la definición de los mismos en bases de datos relacionales o en XML, lo cual requiere un esfuerzo importante para la recuperación de la información, procesamiento, etc.

Las bases de datos documentales ofrecen una alternativa interesante para almacenar la definición de un formulario, sin perjuicio de la utilización de una base de datos relacional para la persistencia de los datos ingresados por el usuario. En este artículo se muestra cómo es posible generar una interfaz dinámica en HTML con muy poco código, haciendo uso de inputEx. Además se propone almacenar el documento con la definición de dicha interfaz en CouchDB, empleando JSON y accediendo a la misma mediante REST.

Introducción

CouchDB es una base de datos orientada a documentos, sin esquema, desarrollada en Erlang. Tiene una interfaz REST, por lo que no es necesario ningún driver propietario para la conexión, y los datos son intercambiados utilizando la popular notación JSON. Posee características que favorecen la alta escalabilidad, como la tecnología en la cual está desarrollada, la capacidad de replicación automática, etc.

inputEx es un framework Javascript Web RIA basado en Yahoo! UI (YUI), que permite generar formularios HTML dinámicamente en el cliente, a partir de un objeto Javascript, habitualmente representado utilizando notación JSON.

RESTTemplate es una clase de utilidad provista por Spring 3 que nos posibilita interactuar con servicios REST de manera sencilla. En nuestro ejemplo la utilizaremos para acceder a CouchDB.

Para este artículo se utilizó Ubuntu Linux 10.04.

Instalación de CouchDB

    $ sudo apt-get install couchdb

Una vez instalada, es posible verificar su correcto funcionamiento utilizando el comando curl:

    $ curl http://localhost:5984/
    {"couchdb":"Welcome","version":"1.0.0"}

Creación de un formulario HTML inicial

Para crear un formulario HTML de manera rápida, podemos ayudarnos con el “Form Builder” de inputEx:

http://neyric.github.com/inputex/tools/builder/index.html

Como resultado de la creación del formulario, obtenemos un fragmento de JSON que insertaremos en CouchDB.

Carga del formulario en CouchDB

Ingresando a http://localhost:5984/_utils/ se accede a Futon, la interfaz de administración de CouchDB.

Desde allí es posible crear una base de datos llamada “forms” presionando el botón “Create database”.

Dentro de la base de datos recién creada, presionar el botón “New Document”. Puede observarse un documento con un único field llamado “_id” y un valor generado automáticamente.

Seleccionar la pestaña “Source” y hacer doble clic en el código JSON, pegando el código generado en el Form Builder de inputEx.

Importante: No eliminar el atributo “_id” generado automáticamente por CouchDB, ya que es necesario para la identificación del documento.

Esta es la configuración del formulario recientemente creado:

Desde nuestra aplicación Spring 3, agregamos un Controller que interactúe con la base de datos y nos retorne el JSON necesario para renderizar el formulario.

    @Controller
    public class FormController {
        ...
        @RequestMapping("/form/${id}")
        public String showForm(ModelMap model, @PathVariable String id) {
            // Recuperación del JSON del formulario desde CouchDB
            String form = restTemplate.getForObject(url, String.class, id);
            // Se coloca en el Model de Spring MVC
            model.put("formDefinition", form);
            // Se indica al view resolver que muestre la vista llamada dynamicForm
            // (que será resuelta a dynamicForm.jsp)
            return "dynamicForm";
        }
    }

Finalmente, escribimos la página JSP (dynamicForm.jsp) responsable de generar dinámicamente el formulario, haciendo uso de inputEx:

    ...
    <script type="text/javascript">
        var formDef = ${formDefinition};
        formDef.parentEl = 'formContainer';
        YAHOO.util.Event.onDOMReady(function(){ new inputEx.Form(formDef); });
    </script>
    ...

Lo único que hace la página JSP es volcar el JSON retornado por CouchDB en un objeto inputEx.Form.

Este es el resultado terminado:

La configuración del formulario dinámico se encuentra en la base de datos, por lo que es posible regresar a Futon y agregar un fragmento de JSON dentro de la colección “fields”, con los datos de un nuevo campo “birthday”:

    fields: [
    ...
        {
            "name": "birthday",
            "type": "datepicker",
            "label": "Fecha de Nac."
        },
    ...
    ]

Refrescando la página, sin necesidad de reiniciar la aplicación, se puede apreciar el resultado de la modificación:

Para más detalles, el código fuente completo del ejemplo se encuentra en: http://github.com/bairesit/dynamicforms/archives/master

Conclusión

Es posible combinar una base de datos documental, que intercambie datos en formato JSON, con la interfaz web para la generación rápida y ágil de contenido dinámico. Si bien podríamos haber almacenado el JSON en un archivo de texto, o .js, nos pareció interesante externalizarlo a una DB, para lograr el mayor grado de dinamismo y facilidad de administración posibles.

Por el Laboratorio de Investigación Tecnológica (LIT) de Baires IT