Este manual contiene información de DCLPS así como explicaciones referentes a un ejemplo de aplicación de DCLPS que se ha generado como ejercicio expreso para una mejor comprensión del sistema. El manual está aún sin completar. Tanto el código del sistema DCLPS como el del ejemplo se pueden descargar de la página principal de DCLPS y la información para instalarlos se encuentra en el archivo readme.txt.
Dclps es un robusto método de trabajo para creación de sistemas en entornos web que a través de una estructura bien pensada es capaz de ser usado tan sólo escribiendo código Javascript. Esto puede ser logrado porque se utilizan unos pocos scripts fijos en servidor para recibir y mandar las respuestas entre la web en el cliente y el servidor. De esta manera se podrían cargar datos o escribir datos de la base de datos a través de llamadas de funciones javascript. Se utiliza además una estructura de datos encadenados en árbol que tiene una determinada implementación en la base de datos relacional. De esta manera mandando muy pocos datos se pueden recibir gran cantidad de elementos de la base de datos los cuales estarán relacionados entre sí mediante esta estructura jerárquica. DCLPS se incluye en los llamados ORM Frameworks [1] category.
El concepto de diseño de este entorno de trabajo está orientado a una organización del sistema en elementos los cuales pueden tener representación en la visualización, en el almacenamiento de datos y en la ejecución de tareas. De esta manera se pueden concebir los diferentes elementos del programa como unidades diferenciadas que actúan de forma independiente y que pueden tener correspondencia con los otros elementos del programa. Estos elementos son identificados como elementos de diseño independientes (objetos) en el proceso de la programación.
Las personas que tengan experiencia en programación en el entorno flash (action script) pueden hacerse una idea del concepto de funcionamiento de este sistema de trabajo.
La primera fase de la programación en este entorno consiste en identificar los diferentes elementos que tendrán predominancia en el programa. Los elementos pueden tener campos de datos y pueden tener elementos asociados. Son representados en la programación a través del tipo objeto a partir del prototipo o clase específica genérica del elemento básico o una versión más completa del mismo.
Para comprender mejor cómo funcionan estos elementos veámoslos en un ejemplo. Para este ejemplo se ha generado el código para que sirva como demo. Se recomienda completar este documento teniendo cerca el código generado para este ejemplo para irlo examinando paralelamente.
En el ejemplo queremos realizar el diseño de un sistema de reserva de plazas de un hotel. Tendríamos por tanto un primer elemento que sería el elemento reserva el cual podría tener campos de datos como por ejemplo la fecha de la reserva y también podría tener elementos asociados como por ejemplo la habitación a reservar y el cliente que realizó la reserva. La asociación de elementos es uno de los puntos fuertes de este sistema de trabajo. Y se basa en un sistema de relaciones jerárquico que organiza los elementos en padres e hijos. Por ejemplo, en el sistema de reservas hoteleras tendríamos que la reserva actuaría como padre del elemento habitación y del elemento cliente.
Tendríamos así que el elemento reserva tiene dos tipos de hijos unos del tipo cliente y otros del tipo habitación. En este caso lo normal es que por cada reserva haya un sólo cliente pero sin embargo una reserva podría ser de varias habitaciones por lo que los hijos del tipo habitación podrían ser múltiples. Esto normalmente se define en el proceso de diseño de la estructura de datos para que conste y así se delimiten las posibilidades.
Como hemos dicho habría dos líneas de hijos por reserva una línea del tipo cliente y otra del tipo habitación. Dicho de otro modo, el objeto reserva tendría dos relaciones una sería la relación reserva-cliente y otra la relación reserva-habitación. Fruto de esas relaciones :) nacerían los hijos los cuales en el caso de la relación reserva-cliente sería sólo uno y en el otro podrían ser varios.
A su vez los clientes pueden tener diversas líneas de relaciones por ejemplo la relación cliente-dirección o cliente-usuario por ejemplo. En el caso de las habitaciones también podría haber una relación habitación-plazas que ha su vez podría tener otra relación plaza-cliente, etc...
Los hijos se almacenan en una variable del objeto denominada children y se trata de un array de objetos mientras que las relaciones se almacenan en la variable relationships que es tambien aun array de objetos. Esto será comprendido mejor cuando empecemos a ver ejemplos de código.
En la carpeta dbmanager se encuentra una aplicación que maneja los registros de la base de datos y a través de ésta se puede ver el sistema de relaciones. Se recomienda ejecutar esta aplicación y observar las relaciones. Para modificar una reserva, añadir nuevas o cambiar los elementos asociados a una reserva (hijos), hay que pinchar en bookings. Se pueden añadir también nuevos clientes o habitaciones pulsando sobre esos elementos en el menú principal.
ellas podremos modificar los elementos de las mismas. En el caso de bookings (reservas) podemos navegar por las relaciones añadiendo o quitando hijos o modificando los campos de datos.
El sistema de relaciones y los elementos que han de ser almacenados tienen un reflejo en la base de datos. El sistema utiliza llamadas a la base de datos las cuales pueden ser para recoger datos de elementos o para administrar los elementos: actualizar los datos del elemento, organizar elementos, añadir o eliminar elementos. Los elementos se corresponden con registros de la base de datos y los elementos del mismo tipo son los pertenecientes a una misma tabla de la base de datos. Los elementos de una misma tabla tendrán por tanto los mismos campos (columnas de la tabla) pero con valores diferentes. Por norma general todo elemento tendrá un campo numérico que se utiliza como identificador único llamado “id”.
Las relaciones entre elementos se establecen a través de dos tablas de la base de datos dedicadas exclusivamente a este propósito. Estas tablas se llaman: relationships y links. La tabla relationships especifica que relaciones que existen entre tablas (que es lo mismo que decir las relaciones que pueden existir entre los elementos de una tabla con respecto a los de la otra tabla) y cómo son estas relaciones. Especifica por tanto cuál hace de padre y cual hace de hijo. También algunas opciones extras de la relación que limitan situaciones no deseadas como por ejemplo si se permite que haya más de un padre para un mismo hijo o viceversa.
Una vez especificadas el tipo de relaciones que puede haber entre los elementos de las tablas ahora es posible añadir las conexiones entre los elementos. Es donde entra la tabla links la cual registra las conexiones (relaciones padre-hijo) entre los elementos de las tablas especificadas en relationships. Para añadir hijos a padres dentro de las relaciones dadas podemos utilizar la herramienta dbadmin creada para tal fín. Esta herramienta permite administrar los elementos de la base de datos y las conexiones entre ellos pero no permite establecer nuevas relaciones entre tablas. Para especificar nuevas relaciones entre tablas hay que recurrir a insertar directamente estas relaciones en la tabla relationships.
Los elementos susceptibles de ser visualizados tienen la posibilidad de mostrarse en pantalla a través de plantillas HTML. Por cada grupo de elementos de un mismo tipo puede haber asociada una plantilla HTML [3]. En el ejemplo anterior podría haber una plantilla HTML para las habitaciones. De esta manera cuando quisiéramos mostrar una habitación por pantalla se recogería esta plantilla y se rellenaría con los datos de la habitación. Después se mostraría por pantalla en la posición correspondiente. Para ello hay que definir también el elemento del documento html que hace de contenedor del elemento a mostrar. Después se puede mostrar ya el elemento.
Hay otra opción y es la de que se muestren varios elementos a la vez mediante una sóla instrucción. Esto es útil cuando queremos mostrar varios elementos del mismo tipo, por ejemplo las habitaciones reservadas por un cliente. Se muestran por tanto éstas dentro de un mismo contenedor HTML una tras de otra.
Para rellenar las plantillas existen unos atributos (se llaman así a las "propiedades" de los elementos HTML) especiales que son: data-correspondences y data-js. Data-correspondencies sirve para rellenar la plantilla directamente con datos del objeto mientras que data-js contiene código Javascript que se ejecuta al rellenar la plantilla.
Como ya hemos dicho él código a escribir para la realización de una aplicación en éste sistema es código javascript utilizando llamadas al servidor para mandar o recibir datos de los objetos. Para transmitir los objetos del servidor al cliente y viceversa se utiliza el protocolo JSON. Para mandarlas se utiliza normalmente un campo de un formulario el cual tiene en el atributo action la dirección http de la aplicación del servidor (en php) la cual mandará de vuelta los datos directamente en la respuesta. Los datos se reciben mediante HTTPRequest y se cargan en el objeto javascript en cuestión.
Una aplicación típica desarrollada en este sistema comenzaría creando mediante Javascript un elemento del tipo que hemos explicado el cual haría una llamada http para cargar los datos propios y/o sus descendientes y otra para cargar la plantilla o plantillas si hay varias. Una vez cargados los datos y la o las plantillas se procedería a mostrar el objeto y/o sus descendientes en pantalla en el formato indicado en la plantilla y dentro del elemento del documento Html elegido para tal propósito. El resultado visual es el típico de una aplicación Ajax: partes del documento Html que se cargan independientemente unas de otras.
Veamos un poco más sobre los elementos (prototipo de elementos) que se utiliza como “ladrillo” del sistema. Éste objeto se crea a partir de un prototipo en javascript que hemos llamado nodeApi. Tiene una serie de métodos (funciones) que realizan las llamadas http y la carga de datos. Veamos como funciona siguiendo con el ejemplo anterior.
A continuación se muestra el código que sería necesario para realizar la siguiente operación de carga de datos. Éste código está contenido en el archivo default.php. Supongamos que queremos cargar los datos de una reserva teniendo el identificador de la misma (o número de reserva). Utilizaríamos el sigueinte código:
Primero (1) creamos el objeto mireserva a partir del prototipo “nodeApi” que es el prototipo que se utiliza genéricamente como objeto base. Después (2) le damos el número de identificador de la reserva en cuestión. El siguiente paso es cargar en mireserva unos datos necesarios (3). Estos datos se refieren a la tabla de la base de datos en la que se almacenan las reservas y es necesario especificarlo para que la consulta tenga éxito. Después cogemos una copia del formulario genérico (4) para las consultas y tras actualizar los datos del formulario con los de mireserva (5) lo enviamos (6) cargando los datos recibidos en mireserva. La función cargadareserva (7) es llamada tras recibir los datos de la consulta enviada en (6). Es un listener para cuando la carga de datos ha sido efectuada.
Tras cargar los datos de la reserva podríamos insertarlos en el documento HTML. Para ello utilizaríamos un código como el de a continuación que iría dentro de la función cargadareserva.
El identificador mycontainer es el elemento html dentro del cual serán mostrados los datos de la reserva mientras que booking.html es el archivo que contiene el formato html en el que se mostrarán los datos. Este archivo tendrá (para cada elementos html) código javascript y/o campos específicos en los cuales se indica el dato a mostrar dentro de cada elemento html. Como pueden contener código javascript no hay restricciones a la hora de que dentro de una plantilla se procedan a cargar nuevas plantillas por ejemplo.
Antes de examinar el código de las plantillas se recomienda ejecutar el programa (index.php) de ejemplo para ver los resultados y examinar por encima el código del archivo principal: default.php y de las plantillas: includes/templates/.
Dentro de las plantillas se encuentra código javascript como en el caso de la plantilla booking.html. Éste código viene en un atributo del elemento html que hemos denominado data-js. También puede haber otro atributo denominado data-correspondences que se utiliza cuando no es necesario insertar código javascript si no que sólo se requiere rellenar datos para optimizar la ejecución del programa. Existen dos variables a las que podemos recurrir cuando generemos el código de las plantillas. Éstas son: thisNode y thisElement. Mientras que thisNode se refiere al objeto nodo que está cargando la plantilla y que contiene los datos a rellenar (en nuestro ejemplo sería mireserva) thisElement se refiere al elemento html actual que contiene el atributo data-js o data-correspondences. El código para insertar el id de la reserva es:
El código inserta dentro del elemento HTML el id de la reserva.
Lo siguiente que hace la plantilla booking.html es insertar los datos de cliente. Para ello carga otra plantilla, la del cliente, y la introduce rellenada en el elemento de booking.html que contiene el código js. Para rellenarla con los datos del cliente se hace la llamada a refreshView con el nodo que contiene los datos del cliente que es el único hijo de la relación booking-customer.
Dado que sabemos que sólo hay un cliente por reserva podemos directamente a él a través del array que contiene los elementos hijos: children[0].
El siguiente paso es cargar las habitaciones. En este caso como puede haber varias habitaciones en la reserva en lugar de refreshView se utiliza refreshChildrenView. Este método se ejecuta en la relación rooms y carga los hijos y los inserta uno tras de otro en el elemento indicado: thisElement.
Las plantillas customerview y roomlist tienen código similar. Podemos examinarlas ver como funciona data-correspondences, que no contiene codigo js si no un objeto en formato JSON indicando las correspondencias de datos.
[1] ORM son las siglas de Object Relational Mapping. Se refiere a la característica del sistema de mediante objetos sustraer información de bases de datos relacionales mediante un sistema de mapeo de objetos. Framework es un sistema o librearía sobre la cual se puede desarrollar un programa.
[2] Json es el nombre de un conocido formato de texto para guardar o transferir los valores de objetos (en programación).
[3]
Las plantillas HTML son archivos que contienen partes de código HTML. Es requisito de diseño que estas plantillas partan siempre de un sólo elemento, es decir, que estén contenidas en un sólo elemento por ejemplo:
<div> … </div> estando todo dentro.