Uso de UML en aplicaciones Web: pginas y relaciones

Frecuentemente somos cuestionados en nuestros cursos acerca de las formas para representar de manera ms explcita cierto tipo de aplicaciones utilizando UML, pero sin lo aburrido de la notacin. Cierto es que UML es grfico de por s, pero usar los mismos elementos independientemente del tipo de aplicacin, a algunas personas les genera ruido y prefieren algo ms explcito. Por ejemplo cuando estudiamos el modelado de aplicaciones web, el modelado del negocio, de sistemas de tiempo real o de bases de datos con UML. Para resolverlo aprovechamos una de las caractersticas peculiares que le dan flexibilidad a la notacin de UML. Y consiste en el conjunto de mecanismos de extensin (de significado): estereotipo, restriccin y valor etiquetado. Estos mecanismos le permiten a UML extender y enriquecer el significado de sus elementos y smbolos bsico de tal suerte que pueden ser empleados para representar dominios en donde nunca se tuvo una intencin explcita de origen de aplicarlos. Haberlo hecho as supondra una limitante para la aplicacin genrica del lenguaje unificado. Ejemplos de estos dominios son el modelado de negocio (aunque ya existe BPMN como un estndar ms especfico), el modelado de bases de datos, el modelado de aplicaciones Web o el modelado de circuitos electrnicos, por mencionar algunos. Arquitectura para web La mayora de las aplicaciones desarrolladas hoy en da son las aplicaciones llamadas Web, es decir, aquellas que tienen como elemento significativo de su arquitectura un navegador y un protocolo de comunicacin HTTP. Cuando capacitamos a la gente en arquitectura y patrones, buscamos que el alumno comprenda las formas de elaborar este tipo de aplicaciones, como su ubicacin en algunos de los patrones de arquitectura Web: Cliente Delgado Web, Cliente Robusto Web o Reparto Web. El estndar de facto en WEB En 1998, Jim Conallen defini una extensin a la que denomin WAE (Web Application Extension) para UML. Esta extensin es la convencin ms difundida y aceptada hasta nuestros das y podramos decir que define el estndar de facto. En esta entrega, formada por dos artculos, presentaremos los elementos que definen el 20-80 en el modelado de aplicaciones Web usando la WAE. El foco de este artculo es la WAE en los diagrama de clases. Extensiones WAE para el diagrama de Clases Algunos de los ejemplos ms comunes de estereotipos que se pueden asociar a las clases y a las relaciones entre estas, para representar una aplicacin en web son las siguientes:

Estereotipos para las Clases Estereotipo Descripcin Representa una pgina Web que tiene scripts ejecutados por el servidor. Estos scripts interactan con los recursos que se encuentran al alcance del servidor. Slo puede mantener relaciones con objetos que se encuentren en el servidor Server Page Representan pginas que son dibujadas por el navegador web y pueden ser una combinacin de algn o algunos lenguajes de marcado, scripts del lado del cliente, islas de datos, etc.

Client Page

Representa una coleccin de campos de entrada que forman parte con una pgina del lado cliente (Client Page). Tiene una correspondencia directa con la etiqueta <FORM> de XHTML.

Form Es una coleccin de scripts del lado del cliente que existe como un archivo separado y que son incluidos mediante una peticin independiente por parte del navegador.

ClientScript Object Estereotipos para las Relaciones entre las Clases Link Representa un apuntador desde una client page hacia una client page o server page. Corresponde directamente con una etiqueta <a> (ancla) de HTML Esta relacin siempre se da entre una form y una server page, por supuesto, la server page procesa los datos que la form le enva (submits) Sirve para identificar cuales server page son responsables de de la creacin de una client page. Una server page puede crear varias client page, pero una client page slo puede ser creada por una sola server page. Esta relacin siempre es unidireccional Esta es tambin una relacin unidireccional que indica que una pgina Web redirige hacia otra. En caso de que la pgina origen sea una client page esta asociacin corresponder con la META etiqueta y valor HTTP-EQUIV de Refresh*.

Submit

Build

Redirect

Un ejemplo de sistema en Web Si bien no presentaremos el modelo de casos de uso para ejemplificar el uso de esta notacin, para resaltar el modelo de clases con sus extensiones, si necesitamos ubicar el ejemplo en algn escenario. Por ejemplo: en nuestro sitio nuestros alumnos pueden consultar los datos del curso en el que estn inscritos y, desde este mismo lugar, pueden tambin contestar una encuesta de satisfaccin durante el ltimo da del mismo. En la Figura 1 vemos parte del modelo de clases de dicho sistema utilizando los estereotipos propios de WAE. Anotaciones bsicas Suponemos que est de ms comentar que las relaciones entre las clases en los diagramas de clases no sugieren o asumen ningn tipo de flujo, que las puntas de flechas slo son restricciones en cuanto al sentido en que la relacin puede ser transitada. Recordemos que el diagrama de clases es un diagrama estructural. Tambin cabe sealar que el diagrama de clases que aqu se presenta tiene un punto de vista de diseo y no uno conceptual (Figura 1). Nombres o iconos Igual que cuando brindamos nuestra capacitacin presencial, y antes de analizar este modelo de clases, consideramos conveniente recordarle a nuestro pblico que algunos elementos estereotipados cuentan con iconos alternativos que pueden utilizarse, aunque esto es algo opcional. En nuestro ejemplo se muestran directamente los nombres de los estereotipos para cada clase y relacin, en lugar de los iconos asociados a cada uno de esos estereotipos. Muchas herramientas de modelado te permiten, de manera simple, elegir entre una u otra forma de representacin.

Figura 1: Modelo de sistema de cursos y encuestas con extensiones WAE Aplicacin de WAE en las pginas En el diagrama de la Figura 1 podemos observar varias clases a las que se les han asociado los estereotipos antes descritos, tambin podemos observar que entre las clases slo existen relaciones de asociacin, de las cuales algunas usan los estereotipos WAE y otras no. Las que no usan los estereotipos WAE como por ejemplo la relacin entre LoginForm y LoginValidator es la veterana relacin de composicin, la cual indica lo de siempre, que el script del lado del cliente LoginValidator es una pieza inseparable de la forma LoginForm. Relaciones WAE entre las pginas del sistema Tambin podemos ver que la pgina del lado del servidor PresentarDatosCurso es la responsable de procesar los datos que la forma Login le enva (relacin submit). Otra de las cosas que podemos ver es que la pgina del lado del servidor PresentarDatosCurso es la que se encarga de construir la pgina del lado del cliente CursoForm (relacin build) o, en caso de presentarse un error, redirigir el control a la pgina del lado del servidor que se encarga de manejarlo ReportarError (relacin redirect). Finalmente, podemos notar tambin que la pgina del lado del cliente CursoForm mantiene una liga hacia la pgina del lado del servidor EncuestaParticipante (relacin link). Slo el comienzo Existen algunos otros elementos definidos en la WAE que aqu hemos omitido. Este artculo presenta slo unos pocos de los ms utilizados. Prximamente presentaremos los estereotipos y aplicacin de estos en los diagramas de componentes; y recuerda que al elaborar tus modelos, en muchos casos, entre ms simple mejor. Al fin y al cabo un modelo busca simplificar, no complicar las cosas. Por Charlie Macas y Sergio Orozco