{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Modelo-Vista-Controlador (MVC)\n", "\n", "## Introducción\n", "\n", "El diseño **MVC (Model-View-Controller)** es uno de los patrones de diseño más utilizados en el desarrollo de software, especialmente en aplicaciones con interfaces gráficas o sistemas web. Este patrón separa la lógica de negocio, la presentación, y la interacción del usuario en tres componentes distintos: **Modelo (Model)**, **Vista (View)** y **Controlador (Controller)**. \n", "\n", "La principal ventaja de este diseño es que promueve la modularidad, facilitando el mantenimiento, la escalabilidad y la reutilización de los componentes de la aplicación. En esta clase aprenderemos los fundamentos del diseño MVC, sus aplicaciones prácticas y cómo implementarlo en Java. {cite}`Gamma`\n", "\n", "\n", "## Objetivos\n", "\n", "- **Explicar** el concepto de diseño MVC y su importancia en el desarrollo de software.\n", "- **Entender** cómo se separan las responsabilidades entre los componentes Model, View y Controller.\n", "- **Implementar** un ejemplo práctico de MVC en Java.\n", "- **Reconocer** las aplicaciones más comunes del diseño MVC.\n", "\n", "\n", "## Administrador de Diseño: El Patrón MVC\n", "\n", "### ¿Qué es el Patrón MVC?\n", "\n", "El patrón **MVC** organiza el código de una aplicación dividiéndolo en tres partes principales:\n", "\n", "1. **Modelo (Model)**:\n", " - Representa la lógica de negocio y los datos de la aplicación.\n", " - Encapsula las reglas de negocio, la gestión de datos, y la conexión con bases de datos.\n", " - No tiene conocimiento directo de la vista ni del controlador.\n", "\n", "2. **Vista (View)**:\n", " - Es la interfaz que se presenta al usuario.\n", " - Se encarga de mostrar los datos que provienen del modelo, pero no contiene lógica de negocio.\n", " - Es completamente independiente del modelo.\n", "\n", "3. **Controlador (Controller)**:\n", " - Actúa como un intermediario entre el modelo y la vista.\n", " - Recibe las entradas del usuario desde la vista, las procesa, y decide qué debe hacer el modelo.\n", "\n", "\n", "::::{grid}\n", "\n", ":::{grid-item}\n", ":margin: auto auto 0 0\n", ":columns: 6\n", "\n", "
\n", " \"\"\n", "
Tomado de MVC Architecture - System Design - Geeksforgeeks
\n", "
\n", "\n", ":::\n", "\n", ":::{grid-item}\n", ":margin: auto auto 0 0\n", ":columns: 6\n", "\n", "
\n", " \"\"\n", "
Tomado de The Model View Controller Pattern – MVC Architecture and Frameworks Explained
\n", "
\n", ":::\n", "::::\n", "\"\n", "
\n", "\n", "
\n", "\n", "### Ejemplos\n", "\n", "::::{grid}\n", "\n", ":::{grid-item}\n", ":margin: auto auto 0 0\n", ":columns: 6\n", "\n", "```{figure} https://www.educative.io/api/page/5029697680310272/image/download/4900278303195136\n", "---\n", "width: 90%\n", "name:\n", "---\n", "Tomado de [MVC Architecture in 5 minutes: a tutorial for beginners](https://www.educative.io/blog/mvc-tutorial).\n", "```\n", "\n", ":::\n", ":::{grid-item}\n", ":margin: auto auto 0 0\n", ":columns: 6\n", "\n", "```{figure} https://media.geeksforgeeks.org/wp-content/uploads/20240219101004/MVC-Design-Pattern-.webp\n", "---\n", "width: 100%\n", "name:\n", "---\n", "Tomado de [MVC Design Pattern - Geeksforgeeks](https://www.geeksforgeeks.org/mvc-design-pattern/).\n", "```\n", ":::\n", "::::\n", "\n", "::::{grid}\n", "\n", ":::{grid-item}\n", ":margin: auto auto 0 0\n", ":columns: 6\n", "\n", "```{figure} https://www.guru99.com/images/1/122118_0445_MVCTutorial2.png\n", "---\n", "width: 100%\n", "name:\n", "---\n", "Tomado de [MVC Framework Tutorial for Beginners: What is, Architecture & Example](https://www.guru99.com/mvc-tutorial.html).\n", "```\n", ":::\n", ":::{grid-item}\n", ":margin: auto auto 0 0\n", ":columns: 6\n", "\n", "```{figure} https://www.guru99.com/images/1/122118_0445_MVCTutorial3.png\n", "---\n", "width: 100%\n", "name:\n", "---\n", "Tomado de [MVC Framework Tutorial for Beginners: What is, Architecture & Example](https://www.guru99.com/mvc-tutorial.html).\n", "```\n", ":::\n", "::::\n", "\n", "### Ventajas del Diseño MVC\n", "\n", "- **Modularidad**: Facilita el mantenimiento y las pruebas al dividir el código en componentes separados.\n", "- **Escalabilidad**: Permite que diferentes equipos trabajen en paralelo en el modelo, la vista y el controlador.\n", "- **Reutilización de Código**: Las vistas pueden reutilizarse para diferentes modelos y controladores.\n", "\n", "\n", "## Aplicaciones del Modelo MVC\n", "\n", "El patrón MVC se utiliza ampliamente en:\n", "\n", "1. **Aplicaciones de Escritorio**: Sistemas de gestión de bibliotecas, aplicaciones de administración, etc.\n", "2. **Desarrollo Web**: Frameworks como Spring MVC y JavaServer Faces (JSF) implementan este patrón.\n", "3. **Aplicaciones Móviles**: Muchas arquitecturas en Android (como MVVM) derivan del patrón MVC.\n", "4. **Juegos**: Para separar la lógica de juego, la interfaz gráfica, y los controles del usuario.\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Ejemplo de Implementación MVC en Java\n", "\n", "A continuación, se muestra un ejemplo sencillo de un sistema de gestión de estudiantes implementado con el diseño MVC.\n", "\n", "### Modelo (Model)\n", "\n", "El modelo se encarga de los datos y la lógica de negocio. En este caso, representaremos a un estudiante:" ] }, { "cell_type": "code", "execution_count": 5, "metadata": { "vscode": { "languageId": "java" } }, "outputs": [], "source": [ "// Modelo: Estudiante.java\n", "public class Estudiante {\n", " private String nombre;\n", " private String id;\n", "\n", " public Estudiante(String nombre, String id) {\n", " this.nombre = nombre;\n", " this.id = id;\n", " }\n", "\n", " public String getNombre() {\n", " return nombre;\n", " }\n", "\n", " public void setNombre(String nombre) {\n", " this.nombre = nombre;\n", " }\n", "\n", " public String getId() {\n", " return id;\n", " }\n", "\n", " public void setId(String id) {\n", " this.id = id;\n", " }\n", "}" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "vscode": { "languageId": "java" } }, "outputs": [], "source": [ "// Probar clase aquí" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Vista (View)\n", "\n", "La vista muestra la información del estudiante al usuario." ] }, { "cell_type": "code", "execution_count": 7, "metadata": { "vscode": { "languageId": "java" } }, "outputs": [], "source": [ "// Vista: EstudianteView.java\n", "public class EstudianteView {\n", " public void mostrarDetallesEstudiante(String nombre, String id) {\n", " System.out.println(\"Detalles del Estudiante:\");\n", " System.out.println(\"Nombre: \" + nombre);\n", " System.out.println(\"ID: \" + id);\n", " }\n", "}" ] }, { "cell_type": "code", "execution_count": 8, "metadata": { "vscode": { "languageId": "java" } }, "outputs": [], "source": [ "// Probar clase aquí" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Controlador (Controller)\n", "\n", "El controlador actúa como intermediario entre el modelo y la vista.\n" ] }, { "cell_type": "code", "execution_count": 9, "metadata": { "vscode": { "languageId": "java" } }, "outputs": [], "source": [ "// Controlador: EstudianteController.java\n", "public class EstudianteController {\n", " private Estudiante modelo;\n", " private EstudianteView vista;\n", "\n", " public EstudianteController(Estudiante modelo, EstudianteView vista) {\n", " this.modelo = modelo;\n", " this.vista = vista;\n", " }\n", "\n", " public void setNombreEstudiante(String nombre) {\n", " modelo.setNombre(nombre);\n", " }\n", "\n", " public String getNombreEstudiante() {\n", " return modelo.getNombre();\n", " }\n", "\n", " public void setIdEstudiante(String id) {\n", " modelo.setId(id);\n", " }\n", "\n", " public String getIdEstudiante() {\n", " return modelo.getId();\n", " }\n", "\n", " public void actualizarVista() {\n", " vista.mostrarDetallesEstudiante(modelo.getNombre(), modelo.getId());\n", " }\n", "}" ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "vscode": { "languageId": "java" } }, "outputs": [], "source": [ "// Probar clase aquí" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Clase Principal\n", "\n", "La clase principal ensambla los componentes y simula el flujo del programa." ] }, { "cell_type": "code", "execution_count": 11, "metadata": { "vscode": { "languageId": "java" } }, "outputs": [], "source": [ "// Clase Principal: Main.java\n", "public class Main {\n", " public static void main(String[] args) {\n", " // Crear el modelo\n", " Estudiante modelo = new Estudiante(\"Juan Pérez\", \"12345\");\n", "\n", " // Crear la vista\n", " EstudianteView vista = new EstudianteView();\n", "\n", " // Crear el controlador\n", " EstudianteController controlador = new EstudianteController(modelo, vista);\n", "\n", " // Mostrar detalles iniciales\n", " controlador.actualizarVista();\n", "\n", " // Actualizar datos del estudiante\n", " controlador.setNombreEstudiante(\"María Gómez\");\n", " controlador.setIdEstudiante(\"67890\");\n", "\n", " // Mostrar detalles actualizados\n", " controlador.actualizarVista();\n", " }\n", "}\n" ] }, { "cell_type": "code", "execution_count": 12, "metadata": { "vscode": { "languageId": "java" } }, "outputs": [], "source": [ "// Probar clase aquí" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Salida del Programa\n", "\n", "```text\n", "Detalles del Estudiante:\n", "Nombre: Juan Pérez\n", "ID: 12345\n", "Detalles del Estudiante:\n", "Nombre: María Gómez\n", "ID: 67890\n", "```\n", "\n", "Esta vista es demasiado simple, ¿cómo se puede mejorar?\n", "\n", "\n", "## Conclusiones\n", "\n", "El diseño MVC es un patrón poderoso y ampliamente utilizado que permite dividir un sistema en componentes separados y manejables. Su implementación en Java es relativamente sencilla y es clave para desarrollar aplicaciones escalables y fáciles de mantener. La práctica con ejemplos como este fortalece la comprensión del patrón y su aplicación.\n", "\n", "## Recursos Adicionales\n", "\n", "### Guías y Tutoriales\n", "\n", "- TutorialsPoint. **MVC Design Pattern**. [Link](https://www.tutorialspoint.com/mvc_design_pattern/index.htm)\n", "- Oracle Java Documentation. **MVC in Java Swing**. [Link](https://docs.oracle.com/javase/tutorial/uiswing/overview/mvc.html)\n", "- GeeksforGeeks. **Model-View-Controller Architecture in Java**. [Link](https://www.geeksforgeeks.org/model-view-controller-mvc-architecture-in-java/)\n", "\n", "### Videos\n", "\n", "- [4: MVC en Java (Modelo, Vista, Controlador) ](https://www.youtube.com/watch?v=GGOwrMKBKeY)" ] } ], "metadata": { "kernelspec": { "display_name": "Java", "language": "java", "name": "java" }, "language_info": { "codemirror_mode": "java", "file_extension": ".jshell", "mimetype": "text/x-java-source", "name": "Java", "pygments_lexer": "java", "version": "21.0.5+11-Ubuntu-1ubuntu124.04" } }, "nbformat": 4, "nbformat_minor": 2 }