EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

EXTENSION DE UML PARA APLICACIONES WEB

ING. OSCAR ASCN VALDIVIA

PAG. 1

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

INTRODUCCIN

Desde la consolidacin de UML como lenguaje estndar para el modelado, tras su aceptacin por el OMG, se ha definido un buen nmero de procesos para el desarrollo de aplicaciones orientadas a objetos que utilizan este lenguaje como medio de expresin de los diferentes modelos que se crean durante el ciclo de vida. Quizs uno de los inconvenientes de UML y de los diagramas que proporciona es que no son del todo adecuados para desarrollar complejos sitios Web. Por ello, se ha desarrollado esta extensin, que se adapta perfectamente a la Web, tanto para generacin de pginas dinmicas como para el diseo de sitios estticos. El principal objetivo de este documento es presentar los conceptos bsicos para crear un Aplicaciones web basadas en UML.

ING. OSCAR ASCN VALDIVIA

PAG. 2

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

MODELADO

Las aplicaciones web, como otros sistemas de software, se representan normalmente por un conjunto de modelos: modelo de casos de uso, modelo de implementacin, etc. Un modelo adicional exclusivo de una aplicacin web es el mapa del sitio (una abstraccin de las paginas web y las rutas de navegacin a travs del sistema). Los creadores de UML (Lenguaje de Modelado Unificado) se dieron cuenta que podra haber situaciones en las que UML, tal y como est, no sera suficiente para capturar la semntica relevante a una arquitectura o dominio particular. Para afrontar esto, definieron un mecanismo formal de extensin para permitir a los practicantes extender la semntica de UML. El mecanismo de extensin nos permite definir estereotipos, valores etiquetas y restricciones. Un estereotipo es un adorno que define un nuevo significado semntico a un elemento de modelado. Los valores etiquetados son pares llave-valor que pueden asociarse con el elemento de modelado para permitirnos etiquetar cualquier valor como un elemento de modelado. Las restricciones son reglas que definen la buena formacin del modelo.

ING. OSCAR ASCN VALDIVIA

PAG. 3

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

MODELADO DE PAGINAS WEB Las pginas web, ya sean compiladas o en cdigo, direccionan uno a uno los componentes en UML. Un componente es una parte fsica y reemplazable del sistema. La implementaron visual del modelo describe los componentes del sistema y sus relaciones. En una aplicacin web el componente visual describe todas la paginas web del sistema y sus relaciones ente ellas (hyperlinks). Se puede decir que cada pagina web es una clase en UML y que una relacin a otra pagina representa un hyperlink. Pero esta abstraccin es falsa cuando consideras que cualquier pagina web puede ser potencialmente representada por un conjunto de funciones y colaboraciones que existen solo en el servidor y un conjunto completamente diferente que existe en el cliente. La solucin para este problema puede ser el estereotipar cada atributo u operacin en la clase para indicar si es o no valido tenerlo en el lado del cliente o en el lado del servidor. El comportamiento de una pagina web en el servidor es completamente diferente al comportamiento en el cliente. Mientras se ejecuta en el servidor, tiene que accesar recursos del lado del servidor (bases de datos, sistema de archivos). En el lado del cliente, la pagina tiene relaciones con el navegador mismo, y con Applets en java, controles Active X o plug-ins que la pagina especifique. La pagina web del lado del servidor puede ser modelada con una clase y la del lado del cliente con otra, distinguiendo las dos usando el mecanismo UML para definir estereotipos e iconos para cada pagina de servidor y pagina de cliente. Para paginas web los estereotipos indican que la clase es una abstraccin del comportamiento lgico de una pagina web tanto del lado del cliente como del servidor. Estas dos abstracciones estn relacionadas una con la otra con una relacin direccional entre las dos. Esta asociacin es estereotipada <<construida>> que se puede decir que un servidor de paginas construye la pagina del cliente. Toda pagina dinmica (pagina que su contenido es construido en ejecucin) es construido con un servidor de paginas. Toda pagina del cliente es construida por lo menos por un servidor de paginas, es posible que un servidor de paginas construya mltiples paginas de clientes. Una relacin comn entre paginas web es el hyperlink. Un hyperlink representa la navegabilidad en el sistema. Esta relacin es representada en el modelo con una asociacin estereotipada <<link>>. Los hyperlinks son implementados en el systema como una solicitud de otra pagina web, que han sido modelados como componentes en la implementacion visual. Los valores etiquetados son usados para definir los parmetros que se recibieron junto con la solicitud. Los parmetros son una lista de nombre de parmetros y valores, que espera y usa el servidor de paginas para procesar la solicitud. Usando estos estereotipos es mas fcil el modelar relaciones entre las pginas. Las operaciones de la clase <<pagina del servidor>> se convierten en funciones y los atributos se convierten en variables de pagina. Las operaciones y los atributos de la clase <<pagina del cliente>> se convierten en funciones y variables visibles del lado del cliente. Usando estereotipos de clases para modelar el comportamiento lgico de paginas web significa su colaboracin con los componentes del lado del servidor. La <<pagina del servidor>> es simplemente otra clase que participa en la lgica del sistema. En otro nivel conceptual, las paginas del servidor usualmente toman un rol de controladores. Del lado del cliente las colaboraciones pueden ser un poco mas complicadas, debido a la variedad de tecnologas que se pueden desplegar. La pagina cliente es tan simple como un documento HTML que contiene informacin. Formas El mecanismo principal para enviar datos en una pagina web es la forma. Las formas son definidas en un documento HTML con etiquetas <form> . La forma contiene un numero de elementos de entrada, todas representadas como etiquetas HTML. Las etiquetas mas comunes son <input>, <select> y <textarea>. Una

ING. OSCAR ASCN VALDIVIA

PAG. 4

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

etiqueta de entrada puede ser: caja de texto, caja para checar, botn, imagen, un campo oculto. Cada forma tambin tiene relacin con la pagina del servidor que procesa la peticin de la forma. Marcos Los marcos nos permiten que mltiples paginas estn activas y visibles para el usuario. Usando cdigo dinmico y componentes en estas paginas permiten que nter acten entre ellas mismas. Sea que uses marcos o mltiples instancias de navegadores en una aplicacin es decisin del arquitecto. Para modelar los marcos se definen dos mas estereotipos de clases <<frameset>> y <<target>>, y un estereotipo asociado <<targeted link>>. Una clase frameset representa un objeto contenedor y direcciona directamente a la etiqueta de HTML <frameset>. Una clase target es nombrada marco o instancia de navegador que es referenciada por otras paginas cliente.

ING. OSCAR ASCN VALDIVIA

PAG. 5

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

EXTENSIN DE UML Esta extensin de UML define un conjunto de estereotipos, valores etiquetados y restricciones que nos permiten modelar aplicaciones web. Los estereotipos y restricciones se aplican a ciertos componentes que son particulares de sistemas web y nos permiten representarlos en el mismo modelo, y en los mismos diagramas que describen el resto del sistema. El elemento principal especfico de aplicaciones web es la pgina web. Hay varios estereotipos que pueden ser aplicados a una pgina web, y otros adicionales que son asignados a otros elementos de HTML y que representan componentes arquitecturalmente significativos del sistema (frames, formularios...). La mayora de los valores etiquetados mencionados en esta extensin pueden ser considerados como una presentacin ms bien estructurales.

ING. OSCAR ASCN VALDIVIA

PAG. 6

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

ESTEREOTIPOS Estereotipos de Clase Server Page Client Page Form Frameset Target JavaScript Object Server Page

Clase Metamodelo: Clase Descripcin: Una pgina de servidor representa una pgina web que tiene scripts que son ejecutados por el servidor. Estos scritps interactan con recursos del servidor como bases de datos, lgica de negocio y sistemas externos. Las operaciones del objeto representan las funciones en el script, y sus atributos representan las variables que son visibles en el mbito de la pgina (accesibles por todas las funciones de la pgina). Restricciones: La pgina de servidor slo puede tener relaciones con objetos localizados en el servidor. Valores Etiquetados: Motor del Script Tanto el lenguaje como el motor que se debera usarse para ejecutar o interpretar esta pgina (JavaScript, VBScript, Perl, etc.) Client Page

Clase del metamodelo: Clase Descripcin:Una instancia de una pgina cliente es una pgina Web con formato HTML y es una mezcla de datos, presentacin e incluso lgica. Las pginas clientes son representadas por los navegadores clientes, y pueden contener scripts que son interpretados por el navegador. Las pginas cliente pueden tener asociaciones con otras pginas cliente o servidor. Restricciones: No Valores Etiquetados: EtiquetaTtulo El ttulo de la pgina lo muestra el Navegador EtiquetaBase El URL base por referencia de URLs relativos. EtiquetaCuepo El conjunto de atributos para la etiqueta <cuerpo> que establecen el color de fondo y los atributos del texto por defecto. Form

ING. OSCAR ASCN VALDIVIA

PAG. 7

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

Clase del metamodelo: Clase Descripcin: Una clase estereotipada como form es una coleccin de campos de entrada que forman parte de una pgina cliente. Una clase form se mapea directamente con la etiqueda HTML form . Los atributos de esta clase representan los campos de entrada del formulario HTML (input boxes, text areas, radio buttons, check boxes, y campos hidden). Un form no tiene operaciones, por lo que no pueden ser encapsuladas en un formulario. Cualquier operacin que interacte con el formulario es una propiedad de la pgina que contiene al formulario. Restricciones: Ninguna Valores Etiquetados : Method el mtodo usado para enviar datos al URL del action, puede tomar los valores GET o POST. Frameset

nomb re

Descripcin: Contenedor de mltiples pginas web rea visible dividida en rectngulos o frames Cada frame puede asociarse con un target puede contener una pgina Web u otro Frameset Un Frameset es una Client Page: Puede tener atributos y operaciones Pero las operaciones slo pueden ser activadas por browsers que no soportan frames Restricciones: Ninguna Valores etiquetados Rows : cadena de alturas de fila separadas por comas Cols : anchuras de columna separadas por comas Target

Nombr e

Descripcin: Compartimento (con nombre) en una ventana de browser en donde puede mostrarse pginas web Puede ser: Frame en una ventana definido por un Frameset Una nueva instancia de browser o ventana Una asociacin Targeted Link especifica un Target como el lugar en el que una pgina web ha de ser mostrada Restricciones: El nombre de un Target ha de ser nico por cada cliente del sistema: Slo puede existir una instancia de un Target en el mismo cliente Valores etiquetados : Ninguno

ING. OSCAR ASCN VALDIVIA

PAG. 8

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

JavaScript Object

<<JavaScript nombre Object>>

Descripcin: Objeto a medida (definido por el usuario) instancia de objeto genrico al que puede asociarse propiedades y funciones puede ser utilizado por los scripts Una instancia JavaScript Object slo existe en el contexto de Client Page's Restricciones: Ninguna Valores etiquetados : Ninguno

ING. OSCAR ASCN VALDIVIA

PAG. 9

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

ESTEREOTIPOS DE ASOCIACIN Link Targeted Link Frame Content Submit Builds Redirect DCOM IIOP RMI Link Clase del metamodelo: Asociacin Descripcin: Un link (enlace) es un puntero desde una pgina cliente a otra Page. En un diagrama de clases, un link es una asociacin entre una client page y cualquier otra client page o una server page. Una asociacin Link se mapea dirctamente con la etiqueta HTML ancla. Restricciones: Ninguna Valores Etiquetados : Parmetros una lista de nombres de parmetros que deberan ser pasados con la peticin de la pgina enlazada Targeted Link Descripcin: Vnculo entre una pgina y otra que debe ser mostrada en un target determinado Restricciones: Ninguna Valores etiquetados Parameters : -- igual que en Link -TargetName : target en el que debe ser mostrada la pgina apuntada por el vnculo (destino) Frame Content Descripcin: Agregacin que expresa el contenido de un frame : pgina o target Puede tambin apuntar a otro frameset, indicando frames anidadas Restricciones: Ninguna Valores etiquetados Row, Col : fila y columna concretas del frame en el frameset al que pertenece la pgina o target asociado Submit Clase del metamodelo: Asociacin Descripcin: Una asociacin submit es siempre entre un form (formulario) y una server-page(pgina servidor). Los formularios envan los valores de sus campos al servidor a travs de pginas servidor para procesarlos. El servidor web procesa la pgina servidor, la cual acepta y usa la informacin dentro del formulario enviado Restricciones: Ninguna Valores Etiquetados : Parmetros una lista de nombres de parmetros que deberan ser pasados con la peticin de la pgina enlazada Build Clase del metamodelo: Asociacin Descripcin: La relacin builds es un tipo especial de relacin que une el vaco entre las pginas cliente y de servidor. Las pginas de servidor existen nicamente en el servidor. Son usadas para crear pginas cliente. La asociacin builds identifica que pgina de servidor es responsable de la creacin de una pgina cliente. sta es una relacin direccional, pues la pgina cliente no tiene conocimiento de cmo ha sido creada. Una pgina de servidor puede crear mltiples pginas cliente, pero una pgina cliente tan solo puede ser construida por una pgina de servidor. Restricciones: Ninguna Valores Etiquetados : No

ING. OSCAR ASCN VALDIVIA

PAG. 10

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

Redirect Clase del metamodelo: Asociacin. Descripcin: Una relacin redirect es una asociacin unidireccional con otra pgina web. Puede ser dirigida desde y hasta una pgina cliente o de servidor. Si la relacin se origina desde una server page entonces indica que el procesado de la pgina solicitada debe continuar en la otra pgina. Esto indica que la pgina destino siempre participa en la creacin de la pgina cliente. Esta relacin no es completamente estructural, pues la invocacin de una operacin de redireccin se debe hacer a travs de programacin en el cdigo de la pgina origen. Si la relacin se origina desde una client page entonces esto indica que la pgina destino ser automticamente solicitada por el navegador, sin la participacin activa del usuario. Se puede especificar un tiempo de demora (en segundos) antes de que la segunda pgina sea solicitada. El uso de la redireccin se corresponde con la etiqueta META y HTTP-EQUIV el valor de "Refresh". Restricciones: Ninguna Valores Etiquetados : Demora Cantidad de tiempo que una pgina cliente debera esperar para ser redirigida a la siguiente pgina. Este valor se corresponde con el atributo Content de la etiqueta Meta. DCOM, IIOP y RMI Descripcin: Relacin entre objetos cliente y objetos servidor Representa un mecanismo alternativo a HTTP para comunicaciones cliente/servidor Restricciones: Ninguna Valores etiquetados :Ninguno

ING. OSCAR ASCN VALDIVIA

PAG. 11

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

ESTEREOTIPOS DE ATRIBUTO Input Element Select Element Input Element Clase del Metamodelo: Atributo Descripcin:Un Input Element es un atributo de un objetoForm. Se mapea directamente con la etiqueta HTML <input>. Este atributo es usado para introducir una palabra o una lnea de texto. Los Valores Etiquetados asociados con este atributo estereotipado se corresponden con los atributos de la etiqueta <input>. Para completar los valores requeridos por la etiqueta HTML; el nombre del atributo se usa como el nombre de la etiqueta <input>, y el valor inicial del atributo es el valor de la etiqueta. Restricciones: Ninguna Valores Etiquetados: Type El tipo del control input puede ser { Text, Number, Password, Checkbox, Radio, Submit, Reset }. Size Especifica la longitud del rea que aparece en pantalla, en caracteres. Maxlength El mximo nmero de caracteres que el usuario puede introducir. Select Element Clase del Metamodelo: Atributo Descripcin: Un control input usado en los formularios. Este control permite al usuario seleccionar uno o ms elementos de una lista. La mayora de los navegadores representan este control como un combo o un list box. Restricciones: Ninguna Valores Etiquetados: Size Especifica cuantos campos se muestran al mismo tiempo. Multiple Booleano que indica puede ser seleccionados mltiples campos de la lista.

ING. OSCAR ASCN VALDIVIA

PAG. 12

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

ESTEREOTIPOS DE COMPONENTE Web Page ASP Page JSP Page Servlet Web Page

Clase del Metamodelo: Componente . Restricciones: NingunaDescripcin: Un componente pgina es una pgina web. Puede ser solicitada por su nombre por un navegador. Un componente pgina puede contener o no scripts cliente o servidor. Tpicamente los componentes pgina son ficheros de texto accesibles por el servidor web, pero tambin pueden ser mdulos compilables que son cargados e invocados por el servidor web. Finalmente cuando se accede a travs del servidor web una pgina produce un documento con formato HTML que se enva como respuesta a la peticin de un navegador Valores Etiquetados: Path La ruta requerida para especificar la pgina web en el servidor web. Este valor debera ser relativa a directorio raz de la aplicacin web.. Pgina ASP

Clase del Metamodelo: Componente Descripcin: Son pginas Web que implementan cdigo del lado del servidor. Este estereotipo es aplicable solamente en aplicaciones basadas en Microsoft Active Server Pages. Restricciones: Ninguna Valores Etiquetados: Los mismos que una pgina Web Pgina JSP

ING. OSCAR ASCN VALDIVIA

PAG. 13

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

Clase del Metamodelo: Componente Descripcin: Pginas web que implementan cdigo JSP del lado del servidor. Este estereotipo es aplicable nicamente en entornos de aplicaciones web que usen JavaServer Pages. Restricciones: Ninguna Valores Etiquetados: Los mismos que una pgina Web Servlet

Clase del Metamodelo: Componente Descripcin: Un componente Java Servlet. Este estereotipo es aplicable nicamente en entornos de desarrollo con soporte para los Servlets de Sun Restricciones: Ninguna Valores Etiquetados: Los mismos que una pgina Web

ING. OSCAR ASCN VALDIVIA

PAG. 14

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

OTROS ESTEREOTIPOS Libreras Script Text Area Element Libreras Script

Clase del Metamodelo: Componente Descripcin: Componente que proporciona una serie de subrutinas de funciones que pueden ser incluidas por otros componentes de pginas Web Restricciones: Ninguna Valores Etiquetados: Los mismos que una pgina Web Text Area Element Clase del Metamodelo: Atributo Descripcin: Un control input usado en los formularios que permite introducir mltiples lneas. Restricciones: Ninguna Valores Etiquetados: Rows Nmero de filas de texto visibles. Cols El ancho visible del control in average character widths.

ING. OSCAR ASCN VALDIVIA

PAG. 15

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

REGLAS DE MODELOS BIEN-FORMADOS Realizacin de componentes En general, los componentes pueden realizar las clases estereotipadas server page, client page, frameset,form,JavaScript Object,ClientScript object, y target. Generalizacin Todo el modelado de elementos en una generalizacin debe estar en el mismo estereotipo. Asociacin La pgina cliente puede tener como mximo una relacin builds con una pgina de servidor, aunque una pgina de servidor puede tener mltiples relaciones builds con diferentes pginas cliente. Adems de las combinaciones UML estndar, se permiten las siguientes combinaciones para cada estereotipo:

ING. OSCAR ASCN VALDIVIA

PAG. 16

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

CONCLUSIONES El modelado de aplicaciones web es muy similar al de cualquier otro sistema, solo es cuestin de realizar algunas extensiones a UML, para representar ciertas caractersticas propias de estas aplicaciones, para lo cual debemos de centrarnos en los detalles de la funcionalidad, a la hora de desarrollar aplicaciones web y no tanto en la presentacin, ya que si se considera el caso opuesto se pueden crear sitios que pudieran ser muy atractivos en un principio, pero con el tiempo dejen de ser funcionales. En una pagina web, los estereotipos pueden usarse para definir pagina cliente, pagina servidor, etc. Los valores etiquetados se usan para definir los parmetros que se pasan con la solicitud de un hipervnculo. La asociacin hipervnculo valor etiquetado parmetros es una lista de nombres de parmetros (y opcionalmente valores) que son esperados y usados por la pgina servidor que procesa la peticin.

ING. OSCAR ASCN VALDIVIA

PAG. 17

EXTENSIN DE UML PARA APLICACIONES WEB

INGENIERIA DE SOFTWARE II

REFERENCIAS Ttulo: Modeling Web Application Arquitectures with UML Autor: Jim Conallen http://www.cicese.mx/~estrella/internet/lectura5.html Titulo: Modelando arquitecturas de aplicaciones web con UML. Autor: Jim Conallen. http://www.cicese.mx/~orodrigu/internet/resumen_5.html Titulo:Tecnologas actuales para desarrollo de aplicaciones Web Autores: Alberto Bernal, Mario Garca http://alcala.upmdie.upm.es/~uml/TechWeb/ Titulo: Modelando Arquitecturas de Aplicaciones Web con UML Autores: Doug Rosenberg and Kendall Scott http://www.cicese.mx/~mimunoz/tareas/DisenoA/resumen/modelando.html Ttulo: "Desarrollo de un S.I. con UML, la Extensin de Aplicaciones Web (WAE) y SGBD" Autor: Andrs del Campo Novales http://www.informatica.uma.es/docencia/infgeneral/pfc/Pleidos/etsii/2000-2001.html

ING. OSCAR ASCN VALDIVIA

PAG. 18