Librería Manager.js (2). Uso

En la entrada previa presenté la librería Manager.js, que he desarrollado para la creación de ciertas aplicaciones web sencillas. El requisito necesario, como comentaba, era que la información que maneja tenga una estructura jerárquica, relacionándose las tablas entre sí, y en último término con la del usuario que se ha registrado. Este requisito se cumple con bastante frecuencia, y con esta librería la programación en el lado del cliente puede hacerse muy ágil. Para describir la API escogí un ejemplo: una página web en la que los usuarios pueden gestionar proyectos, cada uno de ellos compuesto por uno o varios controladores, a los que se le puede introducir una configuración dando de alta señales. En la imagen de la derecha se muestra un caso posible, con un controlador que registra una temperatura.
La aplicación, para gestionar la información, debe replicar su estructura a tres niveles. El primero es la base de datos, donde se han de crear las tablas y relaciones correspondientes. En nuestro caso, sería una tabla user para gestionar los usuarios, cosa que hacíamos con la librería User.js, que comenté en su momento; y las tablas project, controller y channel. Cada una de ellas posee un campo (user_id, project_id, controller_id) que enlaza con la clave principal de la tabla previa.
En dicha entrada también vimos cómo se introduciría la configuración necesaria para instanciar la representación de las tablas de la base de datos. Se hacía proporcionando al constructor de Manager información acerca del nombre de la tabla, su denominación en la web, información sobre su contenido y representación, y por último, su relación con la tabla padre. El código necesario era el siguiente:

En realidad, hecho esto, hay poco más que programar, puesto que la definición de las tablas contiene el grueso de la información que se necesita para determinar el comportamiento en la página web. Veámoslo.
Lo primero que tendríamos que desarrollar es el código HTML para el navegador. Habría que construir los formularios correspondientes para introducir o editar la información, botones para enviarla, borrar elementos, cancelar la edición, etc. Ésta es una labor tediosa, que los entornos de programación como Django o Ruby on Rails agilizan enormemente con el uso de plantillas. Por supuesto, para nuestra aplicación sería posible el recorrido largo, y llevar a cabo un desarrollo personalizado del código, pero la librería proporciona una alternativa extremadamente rápida. El método form() genera el código HTML correspondiente a cada tabla. Podemos crear el contenido de nuestra página tan solo con estas líneas:

Las capas project, controller y channel sirven para posicionar dicho contenido dentro de la página. Con esto, ya tendríamos los elementos que se muestran en la imagen superior. Ahora es necesario asociarles eventos. Manager trabaja con los siguientes:

• populate(): Pide al servidor las claves principales y descripciones de cada elemento de la tabla, para rellenar los desplegables.
• change(): Cuando se selecciona un registro en un desplegable, este método actualiza las descendientes.
• edit(): Pide un registro de la tabla, para mostrarlo o editarlo.
• destroy(): Elimina un elemento.
• create(): Muestra el formulario para crear un nuevo registro.
• close(): Cierra el formulario sin hacer modificaciones.
• submit(): Envía los datos tanto para la creación como para la edición de un registro.

Los métodos populate(), change, edit(), destroy() y submit() actúan contra el servidor. No voy a detallar aquí la comunicación, que dejo para una documentación más formal, pero baste decir que Manager.js trabaja de forma similar lo hacía la librería User.js. Es decir, se hacen llamadas asíncronas a una URL en cuyos parámetros se especifica la acción a realizar y los datos necesarios, y con la respuesta se actualiza la página.
Para animar la página, sería necesario asociar al botón project_create el método create(), a project_collection el método change(), etc. Nuevamente podemos hacerlo paso a paso, o optar por una vía rápida. El método events() asocia de una tacada todos los eventos necesarios, con lo cual nuestro código quedaría así:

Por último, es necesario un pequeño empujoncito para que todo eche a andar. Se trata tan solo de poblar las tablas hijas de la de gestión de usuarios en el momento en que éste se identifica:

Esto es todo. Código minimalista para un desarrollo rápido y sin florituras. Se puede embellecer con CSS o programar por separado lo que la librería no contempla (como crear máscaras para los campos de texto), pero eso es un capítulo aparte.
Recursos asociados:
Librería Manager.js para gestión de información con estructura de árbol
Ejemplo de uso de la librería Manager.js