Ingeniería de Software.

Disciplina de Arquitectura.

Consideraciones para las Capas

de Cliente y Presentación.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 0

 Mapa del Proceso.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 1

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

• Hay muchas y diferentes tecnologías de UIs.

• La usabilidad de un sistema es crítica para su éxito.

• Las UIs proporcionan:

o Menús
o Campos de entrada y acciones para manipular el sistema.
o Presentaciones visuales que representan el estado del
sistema. (Respuestas.)

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 2

 Prototipos de Interfaces de Usuario.

La creación de prototipos de las interfaces proporcionan:

• Visualización del sistema para los involucrados.

• Análisis de flujo.

• Análisis de usabilidad.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 3

 Tecnologías de Interfaces de Usuario.
• Los tipos principales de UIs son:

– Interfaces gráficas o Graphical User interface (GUIs).

– Interfaces de usuario Web (Web GUIs).

• Otros tipos existentes:

– Touchpads
– Joystick
– Reconocimiento de voz.
– Teclados.
– Línea de comandos.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 4

 Componentes Genéricos de las Aplicaciones.

• Hay cuatro tipos fundamentales de componentes en una

aplicación:

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

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 5

 Interfaces de Usuario Gráficas (GUIs).

• Una GUI proporciona una interfaz de usuario basada en

ventanas.

• Las GUIs tienen las siguientes características:

– El sistema debe manejar muchas acciones de usuario pequeñas.

– 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.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 6

 Diseño de GUIs.
• El diseño de cualquier GUI debe ser hecho por un diseñador
profesional.

• Sin embargo, hay cuestiones que el Ingeniero de Software

debe conocer:

– Una GUI generalmente se construye como una jerarquía de

pantallas relacionadas.
– Cada pantalla tiene una jerarquía de componentes de GUI.
– Una GUI presenta la vista del usuario de la lógica de la
aplicación, así como los controles de las acciones del usuario.
– Una sola pantalla puede soportar varios casos de uso.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 7

 Ejemplo.
• El programa HotelAPP puede ser visto como una jerarquía de
pantallas de la UI.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 8

 El Patrón de Diseño PAC.
• PAC, Presentation, Abstraction, Control define una serie de
agentes que interactúan entre sí.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 9

 Elementos del PAC.
Cada agente es una combinación 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.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 10

 Ejemplo de un Agente PAC.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 11

 Los Tipos de Componentes del PAC.

• PAC agrupa los componentes Controller y View en un solo

componente llamado Presentation.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 12

 El Framework SWING de Java (1).

• Swing es un toolkit para creación de GUIs muy sofisticado.

• Es parte de JFC, Java Foundation Classes.

• Swing fue desarrollado para proporcionar un conjunto de

componentes GUI más elaborado que su antecesor el AWT,
Abstract Window Toolkit.

• Swing proporciona un “look and feel” nativo que permite

que las aplicaciones tengan una apariencia no relacionada
con la plataforma en que corren.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 13

 El Framework SWING de Java (2).

• Además de los componentes tradicionales como botones,

check boxes y etiquetas, Swing tiene componentes
avanzados como paneles con pestañas, paneles tipo scroll,
árboles, tablas y listas.

• A diferencia de AWT los componentes de Swing no están

implementados en forma dependiente de la plataforma ,
sino escritos completamente en java y por tanto
independientes de la plataforma.

• El framework JavaFX es oficialmente el reemplazo de

Swing, pero no ha tenido el éxito esperado.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 14

 Ejemplo del Diseño de una GUI.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 15

 Jerarquía de Componentes del Ejemplo Anterior.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 16

 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.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 17

 Los Escuchadores de Eventos Son Componentes
de Control.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 18

 El Patrón Arquitectónico MVC

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 19

 Los Tipos de Componentes del MVC.

• MVC agrupa los componentes Service y Entitiy en un solo

componente llamado Model.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 20

 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 arquitectónica para el diagrama de

Deployment detallado.

3. Documentar las tecnologías de la capa Cliente en un

diagrama de capas y estratos.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 21

 Ejemplo: 1. Introducir los Componentes de la Capa
Cliente en el Dagrama de Deployment.

Client & Presentation Tier

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 22

 Ejemplo: 2. Creación de la Plantilla Arquitectónica

Client & Presentation Tier

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 23

 Ejemplo: 3. Documentar las Tecnologías de la Capa
Cliente en un Diagrama de Capas y Estratos.
Client &
Presentation

App

VP

AI

ES

C&S

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 24

 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 características:

– 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 navegación entre
pantallas.
– Solamente hay una pantalla abierta a la vez.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 25

 Diseño de Web GUIs.

• Las Web GUIs tienden a ser construidas como una

secuencia de pantallas relacionadas.

• Cada pantalla es una jerarquía 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.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 26

 Ejemplo del flujo de páginas Web.

• El caso de uso de Crear una Reservación Online puede ser

visto como una secuencia de pantallas Web.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 27

 Ejemplo de una Página Web Típica.

• 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>

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 28

 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.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 29

 El Patrón Arquitectónico MVC para las Web GUIs.

• El patrón de diseño MVC llamado WebMVC es igual al MVC

tradicional pero sin actualizaciones del modelo a la vista.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 30

 Los Tipos de Componentes en el WebMVC.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 31

 Ejemplo: Diagrama de Deployment para una Aplicación
Web usando Tecnología Java.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 32

 Implementación del Patrón de Diseño WebMVC
Usando Tecnología Java.

• El patrón de diseño WebMVC se implementa en JavaEE

mediante la llamada arquitectura Modelo 2, con los siguientes
componentes:
• Servlets de Java (controladores) procesan los requests de HTTP
y hacen las siguientes funciones:
• Validación de la forma HTML.
• Actualización del Modelo de la Aplicación.
• Selección y despacho de la siguiente Vista.
• JSPs de Java actúan como Vistas que se envían al usuario.
• Clases normales de Java (POJOs) o EJBs implementan el
modelo.
• Entities de Java representan las entidades de la aplicación.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 33

 Registro de la Capa de Presentación en el Modelo
de la Arquitectura.

1. Introducir los componentes de la capa de Presentación en

un diagrama de Deployment detallado.

2. Crear la plantilla arquitectónica para el diagrama de

Deployment detallado.

3. Documentar las tecnologías de la capa de Presentación en

un diagrama de capas y estratos.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 34

 Ejemplo: 1. Introducir los Componentes de la Capa de
Presentación en el Diagrama de Deployment.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 35

 Ejemplo: 2. Creación de la Plantilla Arquitectónica

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 36

 Ejemplo: 3. Documentar las Tecnologías de la Capa de
Presentación en un Diagrama de Capas y Estratos.

App

VP

AI

ES

C&S

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 37

 Comparación de las GUIs y las Web GUIs

GUI Web GUI

El sistema debe manejar muchas El sistema maneja unas cuantas
acciones pequeñas del usuario. acciones macro (requests de HTTP).
Las acciones pequeñas 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.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 38

 Ejercicios.

1. Diseñar la GUI del menú principal del subsistema Web del

Sistema BrokerTool.

2. Crear la plantilla arquitectónica para las capas de

cliente y presentación del subsistema Web del Sistema
BrokerTool mediante un diagrama de deployment de
UML.

3. Documentar la tecnología a usar mediante un diagrama de

capas y estratos para las capas de cliente y presentación
del subsistema Web del Sistema BrokerTool.

Ingeniería de Software. Arquitectura de las Capas de Cliente y Presentación Página 39