Ingeniera de Software.

Arquitectura de las Capas de

Cliente y Presentacin.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 0

 Mapa del Proceso.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 1

 Interfaces de Usuario.
Por qu son importantes las interfaces de usuario
(UIs) para el arquitecto?

Hay muchas y diferentes tecnologas de UIs.

La usabilidad de un sistema es crtica para su xito.

Las UIs proporcionan:

o Campos de entrada y acciones para manipular el sistema.

o Presentaciones visuales que representan el estado del
sistema.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 2

 Prototipos de Interfaces de Usuario.

La creacin de prototipos de las interfaces proporcionan:

Visualizacin del sistema para los involucrados.

Anlisis de flujo.

Anlisis de usabilidad.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 3

 Tecnologas de Interfaces de Usuario.
Los tipos principales de UIs son:

Interfaces grficas o Graphical User interface (GUIs).

Interfaces de usuario Web (Web GUIs).

Otros tipos existentes:

Touchpads
Joystick
Reconocimiento de voz.
Teclados.
Lnea de comandos.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 4

 Componentes Genricos de las Aplicaciones.

Hay cuatro tipos fundamentales de componentes en una

aplicacin:

Las UIs son componentes tipo View que interaccionan con los
otros tres tipos.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 5

 Interfaces de Usuario Grficas (GUIs).

Una GUI proporciona una interfaz de usuario basada en

ventanas.

Las GUIs tienen las siguientes caractersticas:

El sistema debe manejar muchas acciones de usuario pequeas.

Una pantalla puede manejar varios casos de uso.
El sistema permite un flujo de acciones de usuario sin
restricciones.
Es posible accesar (tener abiertas) varias pantallas a la vez.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 6

 Diseo de GUIs.
El diseo de cualquier GUI debe ser hecho por un diseador
profesional.

Sin embargo, hay cuestiones que el Ingeniero de Software

debe conocer:

Una GUI generalmente se construye como una jerarqua de

pantallas relacionadas.
Cada pantalla tiene una jerarqua de componentes de GUI.
Una GUI presenta la vista del usuario de la lgica de la
aplicacin, as como los controles de las acciones del usuario.
Una sola pantalla puede soportar varios casos de uso.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 7

 Ejemplo.
El programa HotelAPP puede ser visto como una jerarqua de
pantallas de la UI.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 8

 El patrn de diseo PAC.
PAC, Presentation, Abstraction, Control define una serie de
agentes que interactan entre s.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 9

 Elementos del PAC.
Cada agente es una combinacin de tres subcomponentes.

Presentation Presenta al usuario una vista del

componente Abstraction y le facilita las
acciones para manipular el componente
Control.

Abstraction Representa una entidad del sistema.

Control Representa un servicio del sistema.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 10

 Ejemplo de un agente PAC.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 11

 Los tipos de componentes del PAC.

PAC agrupa los componentes Controller y View en un solo

componente llamado Presentation.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 12

 Ejemplo del diseo de una GUI.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 13

 Jerarqua de componentes del ejemplo anterior.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 14

 Manejo de Eventos en la GUI.

Las GUIs deben tener un mecanismo para manejar las

acciones del usuario.
Java, por ejemplo, utiliza un mecanismo de escuchadores
de eventos.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 15

 Los escuchadores de eventos son componentes
de control.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 16

 El patrn de diseo MVC

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 17

 Los tipos de componentes del MVC.

MVC agrupa los componentes Service y Entitiy en un solo

componente llamado Model.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 18

 Ejemplo del uso del patrn MVC.

Se pueden tener diferentes vistas de los mismo datos.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 19

 Registro de la Capa de Cliente en el Modelo de la
Arquitectura.

1. Introducir los componentes de la capa Cliente en un

diagrama de Deployment detallado.

2. Crear la plantilla arquitectnica para el diagrama de

Deployment detallado.

3. Documentar las tecnologas de la capa Cliente en un

diagrama de capas y estratos.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 20

 Ejemplo: 1. Introducir los componentes de la capa
Cliente en el diagrama de Deployment.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 21

 Ejemplo: 2. Creacin de la Plantilla Arquitectnica

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 22

 Ejemplo: 3. Documentar las tecnologas de la capa
Cliente en un diagrama de capas y estratos.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 23

 Interfaces de Usuario Web (Web GUIs).

Una Web GUI es una interfaz de usuario basada en un

navegador de Internet.
Las Web GUIs tienen las siguientes caractersticas:

Llevan a cabo pocas acciones de usuario grandes (HTTP

requests).
Un caso de uso usualmente se descompone en varias
pantallas.
Normalmente hay un solo camino de navegacin entre
pantallas.
Solamente hay una pantalla abierta a la vez.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 24

 Diseo de Web GUIs.

Las Web GUIs tienden a ser construidas como una

secuencia de pantallas relacionadas.

Cada pantalla es una jerarqua de componentes UI.

Una Web GUI presenta al usuario la vista del modelo, as

como los controles de las acciones del mismo.

Es raro que una pantalla pueda ser reutilizada en varios

casos de uso.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 25

 Ejemplo del flujo de pginas Web.

El caso de uso de Crear una Reservacin Online puede ser

visto como una secuencia de pantallas Web.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 26

 Ejemplo de una pgina Web tpica.

Los componentes de las Web GUIs se basan normalmente

en formas de HTML, por ejemplo:
<FORM ACTION=makeResv METHOD=POST>
<INPUT TYPE=hidden NAME=action VALUE=roomSearch>
Enter arrival date: <INPUT TYPE=text NAME=arrivalDate>
<BR>
Enter departure date: <INPUT TYPE=text NAME=departureDate>
<BR>
Select room type:
<SELECT NAME=roomType>
<OPTION VALUE=Single> Single
<OPTION VALUE=Double> Double
<OPTION VALUE=Suite> Suite
</SELECT>
<BR>
<INPUT TYPE=submit VALUE=Search...>
</FORM>

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 27

 Modelo de eventos en las Web GUIs.

Los eventos micro se pueden manejar directamente en el

cliente mediante JavaScript.
Los eventos macro son manejados como requests de HTTP
del navegador de Internet al Web Server.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 28

 El patrn de diseo MVC para las Web GUIs.

El patrn de diseo MVC llamado WebMVC es igual al MVC

tradicional pero sin actualizaciones del modelo a la vista.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 29

 Los tipos de componentes en el WebMVC.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 30

 Ejemplo: Diagrama de Deployment para una aplicacin
Web usando tecnologa Java.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 31

 Implementacin del patrn de diseo WebMVC
usando tecnologa Java.

El patrn de diseo WebMVC se implementa en Java mediante

la llamada arquitectura Modelo 2, con los siguientes
componentes:
Servlets de Java (controladores) procesan los requests de HTTP
y hacen las siguientes funciones:
Validacin de la forma HTML.
Actualizacin del Modelo de la Aplicacin.
Seleccin y despacho de la siguiente Vista.
JSPs de Java actan como Vistas que se envan al usuario.
Clases normales de Java (POJOs) o EJBs implementan el
modelo.
Entities de Java representan las entidades de la aplicacin.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 32

 Registro de la Capa de Presentacin en el Modelo
de la Arquitectura.

1. Introducir los componentes de la capa de Presentacin en

un diagrama de Deployment detallado.

2. Crear la plantilla arquitectnica para el diagrama de

Deployment detallado.

3. Documentar las tecnologas de la capa de Presentacin en

un diagrama de capas y estratos.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 33

 Ejemplo: 1. Introducir los componentes de la capa de
Presentacin en el diagrama de Deployment.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 34

 Ejemplo: 2. Creacin de la Plantilla Arquitectnica

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 35

 Ejemplo: 3. Documentar las tecnologas de la capa de
Presentacin en un diagrama de capas y estratos.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 36

 Comparacin de las GUIs y las Web GUIs

GUI Web GUI

El sistema debe manejar muchas El sistema maneja unas cuantas
acciones pequeas del usuario. acciones macro (requests de HTTP).
Las acciones pequeas se pueden
manejar con JavaScript.

Una pantalla puede manejar varios Un solo caso de uso puede dividirse
casos de uso. en varias pantallas.

El sistema usualmente permite un Normalmente hay un solo flujo

flujo ilimitado de acciones del usuario. definido entre pantllas.

Se pueden accesar varias pantallas a El usuario utiliza una sola pantalla a la

la vez. vez.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 37

 Ejercicios.

1. Disear la Web GUI para la aplicacin SATUFWeb.

2. Hacer un Diagrama de Deployment Detallado para las

capas de cliente y presentacin de la aplicacin
SATUFWeb.

3. Hacer un Diagrama de Capas y Estratos para las capas de

cliente y presentacin de la aplicacin SATUFWeb.

Ingeniera de Software. Arquitectura de las Capas de Cliente y Presentacin Pgina 38