El patrón modelo-vista-controlador es uno de los patrones más utilizados hoy en día. En realidad este patrón, es un conjunto de 3 patrones. Cuando hay dos o más patrones juntos se les llama patrones compuestos.
Este es el caso del patrón modelo-vista-controlador (MVC), ya que, se compone de 3 patrones principalmente:
Algunas veces, tratamos de entender este patrón sin saber que en realidad es un conjunto de patrones que juntos, nos facilitan el diseño de nuestra aplicación.
Aprender o comprender este patrón de esa forma puede resultar muy frustrante, ya que son muchas piezas juntas que se comunican entre sí. Por eso, es mejor dividirlo en las funciones de cada uno de sus componentes.
- Vista: Es la interfaz gráfica que utilizamos para realizar alguna acción, como editar un registro, dar clic a un botón, etc. Por lo general, accede a ciertos atributos del Modelo para desplegar información. Por ejemplo, mostrar los datos de una persona.
- Controlador: Se encarga de recibir la solicitud desde la interfaz gráfica. Es el encargado de llamar a los métodos dentro del Modelo para que ejecute alguna acción.
- Modelo: Es el encargado de la lógica del negocio. Además contiene la información que es requerida por la vista, es decir, son las clases que contienen los datos. Por ejemplo, los atributos de una persona (Nombre, Apellidos, Teléfono, etc).
Veamos el siguiente diagrama de secuencia para tener una idea más clara.
- El cliente realiza una acción en la interfaz gráfica, por ejemplo, presionar un botón.
- La vista envía la solicitud al controlador, que se encarga de procesar la solicitud y determina cuál es el método correcto que debe ser invocado desde el modelo.
- El modelo recibe la solicitud y ejecuta el proceso requerido. Una vez completado el proceso, notifica a las vistas que lo utilizan para desplegar información. El modelo termina la ejecución del proceso y retorna el resultado (de ser necesario) al controlador.
- El controlador termina su ejecución.
- La vista fue notificada por el modelo, por ende, solicita el estado actual (valores actuales de atributos) al modelo.
- El modelo retorna los valores actuales.
- La vista actualiza los valores.
- El cliente puede ver el resultado de la acción que se ejecutó (presionar el botón).
Ahora que ya entendimos el flujo de los mensajes de este patrón, veamos la relación entre los componentes (Modelo-Vista-Controlador) y los 3 patrones que mencionamos antes (Observador-Compuesto-Estrategia).
- Estrategia: es utilizado por la Vista y el Controlador. La vista solo se preocupa de la interfaz gráfica y delega al Controlador cualquier decisión con respecto al comportamiento de la interfaz. Al utilizar Estrategia, la Vista y el Modelo se encuentran desacoplados, por lo que cualquier Vista puede utilizar el Modelo sin tener dependencias directas.
- Compuesto: este patrón es más difícil de identificar, ya que muchas interfaces gráficas son generadas automáticamente. Por lo general las interfaces se componen de Paneles, Formularios, Frames, Botones, Etiquetas, etc. Todos estos elementos son agregados como un árbol en una jerarquía, El Formulario principal contiene más formularios y botones, etc.
- Observador: El Modelo puede notificar a todas las vistas que lo utilizan que su estado ha cambiado, sin necesidad de saber cuales vistas lo utilizan. Cada vez que el Modelo cambia, las Vistas reciben una notificación y proceden a consultar la última versión de la información.
El diagrama de clases de este patrón tiende a ser sencillo, sin embargo, dependiendo del escenario, puede ser más complejo. Veamos el diagrama.
Para nuestra aplicación de ejemplo vamos a tener una interfaz gráfica que se encarga de agregar empleados a una tabla. Este sería el diagrama de clases.
- EmployeeObservable es la interfaz que contiene la información que vamos a exponer del modelo, por ejemplo registrar observadores (vistas) y obtener la lista completa de Empleados.
- EmployeeBL implementa la interfaz y es la que contiene la lógica del negocio.
- IEmployeeController es la interfaz que utilizarán todos los controladores del modelo Empleado. Los métodos dentro de esta interfaz pueden ser accedidos desde las vistas.
- EmployeeControllerImpl es la implementación de la interfaz de controladores.
- EmployeeObserver es la interfaz utilizada para crear observadores. Los métodos definidos en esta interfaz pueden ser utilizados por el modelo para enviar la información necesaria a las vistas.
- EmployeeView es la vista que se encarga de desplegar la información de los Empleados.
La interfaz gráfica de nuestra aplicación de ejemplo sería la siguiente.
Al agregar información en los cuadros de texto y presionar el botón Add Employee, los detalles se agregan a la table de manera automática.
Cuando se presiona el botón, se invoca al método del controlador, el cuál a su vez determina cuál método del modelo debe ser utilizado. El modelo realiza la acción y notifica a la vista. La vista recibe la información y actualiza el estado del modelo, que en este caso es la tabla con todos los empleados.
El código de ejemplo del patrón modelo-vista-controlador lo pueden descargar aquí.
En el próximo post vamos a discutir los anti patrones.
Recordá suscribirte aquí para recibir las últimas actualizaciones todas las semanas.