Universidad de Chile Departamento de Ciencias de la Computacin Anlisis y Diseo Orientado a Objetos

Modelando aplicaciones Web con UML

Prof. Luis A. Guerrero

Contenido

1. Arquitectura de aplicaciones Web 2. Modelamiento de aplicaciones Web

Arquitectura Web

Arquitectura Web
Hasta el da de hoy, lo ms importante en el desarrollo de aplicaciones Web han sido las herramientas. Poco se ha dicho sobre el proceso de desarrollo.
La fcil creacin de hojas HTML y en general de sitios Web, usando herramientas simples, ha hecho que el desarrollo de este tipo de aplicaciones se haga sin un trabajo serio de anlisis y diseo. Cualquier sistema de complejidad no trivial, necesita ser analizado y modelado. Las aplicaciones Web, al igual que otras aplicaciones, necesitan mtodos formales de anlisis y diseo.

Arquitectura Web
Cul es la diferencia entre un sitio Web y una aplicacin Web? Una aplicacin Web es un sitio Web donde la navegacin a travs del sitio, y la entrada de datos por parte de un usuario, afectan el estado de la lgica del negocio. En esencia, una aplicacin Web usa un sitio Web como entrada (front-end) a una aplicacin tpica. ...Si no existe lgica del negocio en el servidor, el sistema no puede ser llamado aplicacin Web. [Conallen 99] Es Altavista (o cualquier search engine) un sitio Web o una aplicacin Web? Qu pasa con un sitio Web como el de Microsoft donde hay que registrase antes de bajar algn software?

Arquitectura Web
La arquitectura de un sitio Web tiene tres componentes principales: un servidor Web, una conexin de red, y uno o ms clientes (browsers). El servidor Web distribuye pginas de informacin formateada a los clientes que las solicitan. Los requerimientos son hechos a travs de una conexin de red, y para ello se usa el protocolo HTTP.

Arquitectura Web
Arquitectura bsica de una aplicacin/sitio Web La informacin mostrada en las pginas est tpicamente almacenada en archivos. Sin embargo, muchas veces esta informacin est almacenada en una base de datos, y las pginas son creadas dinmicamente. Los sitios Web que usan este esquema, son llamados sitios dinmicos.

Arquitectura Web
Pginas Web Las pginas Web son el componente principal de una aplicacin o sitio Web. Los browsers piden pginas (almacenadas o creadas dinmicamente) con informacin a los servidores Web.

En algunos ambientes de desarrollo de aplicaciones Web, las pginas contienen cdigo HTML y scripts dinmicos, que son ejecutados por el servidor antes de entregar la pgina.
Una vez que se entrega una pgina, la conexin entre el browser y el servidor Web se rompe (a diferencia de otros esquemas tipo cliente/servidor). Es decir que la lgica del negocio en el servidor solamente se activa por la ejecucin de los scripts de las pginas solicitadas por el browser (en el servidor, no en el cliente).

Arquitectura Web
Scripts en el cliente
Cuando el browser ejecuta un script en el cliente, ste no tiene acceso directo a los recursos del servidor. Hay otros componentes que no son scripts, como los applets o los componentes ActiveX. Los scripts del cliente son por lo general cdigo JavaScript o VBSscript, mezclados con cdigo HTML.

Arquitectura Web
Formularios
La forma ms comn de capturar la informacin dada por el usuario, es a travs de formularios. Un formulario (form) es una coleccin de campos de entrada: textbox, text area, checkbox, radio button group, button y selection list. Cuando un formulario es llenado, se enva al servidor usando una operacin submit solicitada por el usuario tpicamente al hacer click en un botn.

Arquitectura Web
Servidor Web

En muchas aplicaciones Web hay una capa intermedia, compuesta por un conjunto de componentes, que se ejecutan no necesariamente en el servidor Web, sino en otros servidores de aplicaciones. Esta capa encapsula la lgica del negocio, y, al ser componentes compilados puede contener objetos, con sus mtodos y atributos (llamados business objects).

Arquitectura Web

Arquitectura generalizada de una aplicacin Web

Modelando aplicaciones Web

Modelando aplicaciones Web

Conallen propone una extensin al UML para disear aplicaciones Web:

Modelando aplicaciones Web

Dado que las pginas Web son los principales componentes de la arquitectura Web, hay que poder modelarlas. Usando UML podemos ver una pgina Web como un objeto. Cules seran entonces las propiedades de estos objetos? Es conveniente hacer la distincin entre pginas del servidor y pginas del cliente. Los scripts de las pginas del servidor representan los mtodos de esta clase. Las pginas del cliente tienen mtodos que se ejecutan solamente del lado del cliente, como por ejemplo, Java Applets y controles ActiveX.

Modelando aplicaciones Web

Hay una relacin fundamental entre las pginas del servidor y las pginas del cliente, y es que las pginas del servidor crean las pginas del cliente. Esta relacin es en una sola direccin, y para modelarla se usa el estereotipo <<builds>>. De este modo, se indica cul pgina del servidor es encargada de crear la pgina del cliente. Por ejemplo:

Modelando aplicaciones Web

Algunas pginas del servidor podran redireccionar ciertas solicitudes de procesamiento a otras pginas servidoras (una especie de IF). Permitir modelar estas situaciones es til para la reutilizacin. Para esto se utiliza el estereotipo <<redirects>>. Por ejemplo:

Pgina que delega funcionalidad

Modelando aplicaciones Web

Otra relacin importante en el diseo de aplicaciones Web es el vnculo (link, o anchor) entre pginas. Las pginas vinculadas podran ser pginas de cliente o del servidor. El estereotipo <<links>> define relaciones entre pginas cliente y otras pginas (cliente o servidoras). Ejemplo:

Modelando aplicaciones Web

Si un vnculo (hyper link) incluye parmetros, stos son modelados como atributos del link fuera de la asociacin. Por ejemplo:

Modelando aplicaciones Web

Dado que una pgina podra tener varios formularios (forms) es posible que desde esta pgina se acceda a diferentes pginas. Los formularios se modelan con el estereotipo <<form>> (un estereotipo por cada formulario). Las pginas cliente contienen formularios. Ejemplo:

Modelando aplicaciones Web

Usando frames, una pgina cliente podra estar compuesta por mltiples pginas al mismo tiempo. Los frames se implementan en HTML usando un frameset. Un frameset podra a su vez estar contenido en otro frameset. Las pginas Web contenidas en un frame se llaman targets. El estereotipo <<targeted link>> hace referencia a pginas que van ser cargadas en un frame distindo del que contiene la pgina que tiene el link.

Modelando aplicaciones Web

<<link>>
SearchResults Home

Home page

<<link>> {productID}

0--*

GetProduct

<<build>>

ProductDetail

La pgina SearchResults contiene un nmero variable de links (0..*) hacia la pgina del servidor GetProduct. Para cada productID se construye una pgina ProductDetail diferente.

Modelando aplicaciones Web

Otro ejemplo: modelando el mapa de navegacin segn actores.

<<boundary>> Home page

<<boundary>> Orders

<<boundary>> Schedule

<<boundary>> Order status

<<boundary>> Account Summary

User Maintenance

Full Site Navigation Map

<<boundary>> Detailed info

<<boundary>> Account distribution

Modelando aplicaciones Web

Account Executive <<boundary>> Home page

<<boundary>> Orders

<<boundary>> Order status

<<boundary>> Account Summary

Account Executive Navigation Map

<<boundary>> Detailed info

<<boundary>> Account distribution

Modelando aplicaciones Web

Registered User <<boundary>> Home page

<<boundary>> Orders

<<boundary>> Order status

Registered User Navigation Map

Clases abstractas
Una clase que contiene un mtodo abstracto, debe ser declarada como abstracta. Una clase abstracta obliga a todas las clases herederas a sobreescribir todos sus mtodos abstractos (tambin llamados responsabilidad de la subclase). No se pueden crear instancias de clases abstractas con el operador new, dado que es una implementacin incompleta.
abstract class A { abstract void abs(); void xyz() { System.out.println(Dentro del metodo xyz de la clase A); } } class B extends A { void abs() { System.out.println(Dentro del metodo abs de la clase B); } } class Abstracta { public static void main(String args[]) { A a = new B(); a.abs(); a.xyz(); } }

C:\java Abstracta Dentro del metodo abs de la clase B Dentro del metodo xyz de la clase A

Interfaces
Las interfaces estn diseadas para permitir la resolucin dinmica de mtodos (durante la ejecucin). Las interfaces son como clases, pero sin variables de instancia, y con mtodos declarados sin cuerpo. Se puede seleccionar una interfaz sin tener que conocer nada sobre el cdigo llamado.
interface prueba { void llamado(int parametro); } class nombre [extends superclase] [implements interfaz0 [, interfaz1]] { cuerpo } class cliente implements prueba { public void llamado(int p); System.out.println(Llamado con + p); } } class test { public static void main(String args[]) { prueba c = new cliente(); c.llamado(42); } }

C:\java test Llamado con 42