El patrón composite MVC

Introducción al problema

La realización de la interfaz de usuario de una aplicación resulta un problema complejo. La principal característica del diseño de una interfaz de usuario es que debe ser lo suficientemente flexible para dar respuesta a las siguientes exigencias, propias de una interfaz moderna:

Estos requisitos hacen casi imposible diseñar una interfaz de usuario que pueda aplicarse en el seno del núcleo funcional de la aplicación. Conviene adoptar, por lo tanto, una solución algo más modular como la que propone el patrón...

El patrón composite MVC

Los autores de Smalltalk-80 proponen una solución a este problema llamada MVC, del acrónimo Model-View-Controller, que preconiza la siguiente separación entre componentes de una aplicación:

El vínculo entre el modelo y una vista se realiza aplicando el patrón Observer, que hemos estudiado en el capítulo El patrón Observer dedicado al mismo. En este patrón, el modelo constituye el sujeto y cada vista es un observador. De este modo, cada actualización de datos que gestione el núcleo funcional genera una notificación a las distintas vistas. Éstas pueden, entonces, actualizar la información que muestran al usuario.

La estructura genérica, en su forma simplificada, de MVC se representa mediante la notación UML de la figura 5-2.1. El modelo se incluye como el sujeto del patrón Observer y, por lo tanto, como una subclase de la clase abstracta Sujeto. La clase Modelo implementa dos métodos: getDatos y modificaDatos. El primero permite acceder a los datos del modelo y el segundo modificarlos. En la práctica, estos métodos darán un acceso más fino a los datos del modelo, así como a los servicios que implementan las funcionalidades de la aplicación.

La clase Vista se incluye como observador del modelo. El método actualiza se invoca cuando se quiere actualizar los datos del modelo. La vista extrae del modelo los datos que se quieren visualizar y los representa. Además del método actualiza, la vista posee el método manipulaRepresentación destinado al controlador. En efecto, algunas acciones del usuario no tendrán ninguna consecuencia sobre el modelo sino, únicamente, sobre la representación: mover una ventana, alguna...

El framework Blazor

El ejemplo que se presenta a continuación se basa en el framework Blazor desarrollado por Microsoft. Se trata de un framework .NET concebido para la programación de aplicaciones web.

Existen dos versiones de Blazor:

Nuestro ejemplo se ha realizado como aplicación de Blazor compilada en WebAssembly y ejecutada en el navegador. Como toda aplicación escrita en Blazor, está formada por componentes de interfaz de usuario como botones, menús, zonas de texto, etc. Estos componentes interactúan...

Ejemplo en C#

1. Introducción

El ejemplo consiste en una pequeña base de datos de vehículos que está disponible en modo de sólo consulta. Existe un menú desplegable en la parte superior de la vista que ofrece la posibilidad, al usuario, de seleccionar el vehículo que quiere visualizar. Se muestran, entonces, la marca, el modelo y el precio del vehículo seleccionado. El botón Anuncio siguiente permite ver el siguiente anuncio relativo al mismo vehículo. Si el usuario pulsa dicho botón una vez mostrado el último anuncio, la interfaz vuelve a mostrar el primer anuncio.

La figura 5-2.5 muestra la interfaz de usuario. Se ejecuta, tal y como hemos indicado, en un navegador web.

Figura 5-2.5 - Interfaz de usuario de la base de datos de vehículos

2. Arquitectura

La figura 5-2.6 muestra la arquitectura del ejemplo y una implementación basada en el patrón MVC. La clase BaseVehiculos constituye el modelo. La clase Indice constituye la vista central compuesta por varias vistas anidadas: la vista descrita por la clase Caracteristicas y las de los componentes de Blazor. Las dos clases ControladorMenuSeleccion y ControladorBotonAnuncioSiguiente representan los dos controladores asociados a la vista Indice.

Figura 5-2.6 - Arquitectura del ejemplo

Comprobamos que se han aplicado los patrones Observer para el modelo, Composite para la vista principal Indice, que es una vista compuesta en Blazor (que implementa la misma interfaz IComponente que sus vistas anidadas, entre ellas, la vista Caracteristicas), y Strategy para los controladores. No obstante, para estos últimos no es posible factorizar a nivel de la clase abstracta Controlador el método de gestión de eventos, puesto que no es el mismo para ambos controladores (el método cambioMenuEleccion del controlador ControladorMenuSeleccion toma un argumento, mientras que el método anuncioSiguiente del controlador ControladorBotonAnuncioSiguiente no toma ninguno). Para poder implementar el patrón Strategy, se han introducido ambos controladores en dos partes: una interfaz que establece el soporte de comunicación con la vista (método llamado por la vista y vínculo hacia la vista para la interfaz IControladorBotonAnuncioSiguiente) y una clase de realización. De este modo, es posible introducir sin problemas otras clases de realización....