Descripción del Patrón:
- Modelo: Esta es la representación específica de la información con la cual el sistema opera
- Vista: Este presenta el modelo en un formato adecuado para interactuar, usualmente la interfaz de usuario
- Controlador: Este responde a eventos, usualmente acciones del usuario, e invoca peticiones al modelo y, probablemente, a la vista."
Un diagrama sencillo que muestra la relación entre el modelo, la vista y el controlador.
Nota: las líneas sólidas indican una asociación directa, y las discontinuas una indirecta
Después de todo esto vamos a poner un sencillo ejemplo en el que podamos ver la interacción y separación de cada una de las partes anteriormente descritas.
Vamos a suponer que nos encontramos en una página web donde se nos de la posibilidad de comprar algún tipo de producto. Los pasos a seguir para realizar, por ejemplo, la acción de añadir un producto o ítem al "carrito de la compra" y su consecuente visualización serían los siguientes:
- El Usuario se encuentra en la interfaz (vista) y observa un articulo de su agrado. Pulsa el enlace de "añadir al carrito".
- El controlador recibe (por parte de la vista) la notificación de la acción realizada por el usuario ("añadir al carrito") y la gestiona.
- El controlador accede al modelo, actualizándolo y haciendo que el modelo modifique en este caso la lista de objetos añadidos al "carrito" (con sus comprobaciones de existencia y demás). Aclaramos que el modelo es la parte que se encarga de acceder al sistema de almacenamiento (de datos), siendo independiente de éste.
- El controlador da la responsabilidad a los objetos de la vista de que muestre los datos (el carrito de la compra). La vista obtiene los datos actualizados a través del modelo y lo hace visible al usuario (lo artículos que se han añadido al carrito) en la interfaz gráfica.
- La interfaz (vista) espera de nuevo otra acción por parte del usuario, iriamos al punto 1, y así comenzaría el ciclo sucesivamente.
Si aún no quedo claro del todo añadiremos un esquema (que encontré navegando) en el cual se clarifica todo un poco más:
(Pincha en la imagen para agrandar)