{"id":7073,"date":"2021-11-30T13:00:00","date_gmt":"2021-11-30T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=7073"},"modified":"2021-12-23T16:44:29","modified_gmt":"2021-12-23T15:44:29","slug":"que-es-modelo-vista-controlador","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/que-es-modelo-vista-controlador\/","title":{"rendered":"Qu\u00e9 es Modelo-Vista-Controlador"},"content":{"rendered":"\n

En este art\u00edculo contamos detalladamente qu\u00e9 es el concepto Modelo-Vista-Controlador (MVC)<\/strong> y todo lo que necesitas saber sobre \u00e9l, \u00a1comenzamos!<\/p>\n\n\n\n

Modelo-Vista-Controlador<\/strong> es un t\u00e9rmino muy conocido en el mundo de la programaci\u00f3n. Si has estudiado inform\u00e1tica, programaci\u00f3n o simplemente te gusta este mundillo, es muy probable que hayas o\u00eddo hablar de \u00e9l anteriormente, pero \u00bfqu\u00e9 es realmente?<\/p>\n\n\n\n

Modelo-vista-controlador, abreviado MVC, es un tipo de arquitectura de software<\/a><\/strong> en el que se estipula que los datos (modelo), la interfaz de usuario (vista) y la l\u00f3gica de control (control) son tres componentes distintos. Cada uno de estos componentes desempe\u00f1a funciones espec\u00edficas.<\/p>\n\n\n\n

La siguiente imagen muestra un esquema simple de Modelo-vista-controlador.<\/p>\n\n\n\n

\"Esquema<\/figure><\/div>\n\n\n\n

Este tipo de arquitectura de software se lleva a\u00f1os utilizando en todo tipo de aplicaciones<\/strong>, ya que ha demostrado con creces su validez. Se emplea en todo tipo de software, desde aplicaciones web hasta programas de escritorio.<\/p>\n\n\n\n

Resumiendo mucho, el comportamiento es el siguiente:<\/p>\n\n\n\n

La vista es el componente encargado de generar la interfaz de usuario. El modelo se encarga de gestionar los datos y la informaci\u00f3n. El controlador podr\u00eda decirse que es un intermediario entre los anteriores componentes, que se encarga de indicar a la vista y al modelo como deben actuar a continuaci\u00f3n.<\/p>\n\n\n\n

Veamos con m\u00e1s detalle las funciones de cada uno de ellos:<\/p>\n\n\n\n

Modelo<\/h2>\n\n\n\n
\n
\n
\"Icono<\/figure>\n<\/div>\n\n\n\n
\n

El modelo es el componente encargado de gestionar la informaci\u00f3n<\/strong> y los datos con los que trabaja la aplicaci\u00f3n. Administra todos los accesos a dicha informaci\u00f3n, tanto a ficheros, como a clases o bases de datos. <\/p>\n\n\n\n

En ocasiones env\u00eda a la vista la informaci\u00f3n que \u00e9sta necesita mostrar, aunque, generalmente, el modelo interact\u00faa \u00fanicamente con el controlador<\/strong>. Y es el controlador quien le indica al modelo que informaci\u00f3n debe manipular o consultar.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Vista<\/h2>\n\n\n\n
\n
\n

La vista presenta o muestra la informaci\u00f3n necesaria en un formato apropiado con el que el usuario pueda interactuar<\/strong>. En otras palabras, es el componente que, tras recibir la informaci\u00f3n, genera la interfaz de usuario de la aplicaci\u00f3n, botones, textos, ventanas, llamadas a la acci\u00f3n, estilos, etc. Todo aquello que el usuario observa es generado por este componente.<\/p>\n<\/div>\n\n\n\n

\n
\"Tareas<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Controlador<\/h2>\n\n\n\n
\n
\n
\"Funciones<\/figure>\n<\/div>\n\n\n\n
\n

El controlador gestiona los eventos y acciones del usuario<\/strong>, en base a lo cual realiza peticiones de informaci\u00f3n al modelo o le ordena actualizar la informaci\u00f3n presente. Tambi\u00e9n le dice a la vista c\u00f3mo debe actuar y si ha de actualizar la informaci\u00f3n que se muestra en pantalla, navegar a otras ventanas, etc. <\/p>\n\n\n\n

Se podr\u00eda decir que es el intermediario entre el modelo y la vista y es el componente que decide qu\u00e9 acciones se van a realizar a continuaci\u00f3n.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Flujo de control<\/h2>\n\n\n\n

El software desarrollado con el patr\u00f3n modelo-vista-controlador generalmente sigue el siguiente flujo de interacci\u00f3n<\/strong>:<\/p>\n\n\n\n

  1. El usuario interact\u00faa con la interfaz (vista) de alguna manera, por ejemplo, pulsando un bot\u00f3n o enlace, haciendo scroll<\/em>, etc.<\/li>
  2. El controlador recibe por parte de los eventos de la interfaz la acci\u00f3n que el usuario ha realizado y gestiona dichos eventos decidiendo la siguiente acci\u00f3n.<\/li>
  3. El controlador efect\u00faa una petici\u00f3n al modelo, el cual consultar\u00e1 nueva informaci\u00f3n, la actualizar\u00e1 o la borrar\u00e1. En ciertas ocasiones el controlador no ver\u00e1 esto necesario y le enviar\u00e1 una respuesta directa a la vista.<\/li>
  4. El modelo enviar\u00e1 la nueva informaci\u00f3n o petici\u00f3n al controlador el cual a su vez delegar\u00e1 en la vista la tarea de desplegar la interfaz de usuario con los datos actualizados. <\/li>
  5. Finalmente la interfaz queda a la espera de nuevas interacciones por parte del usuario, comenzando el ciclo de nuevo.<\/li><\/ol>\n\n\n\n

    En algunas implementaciones la vista y el modelo pueden llegar a interactuar directamente, aunque no es lo habitual.<\/p>\n\n\n\n

    Por qu\u00e9 utilizar Modelo-Vista-Controlador<\/h2>\n\n\n\n

    Este tipo de arquitectura software tiene grandes ventajas<\/strong>, aunque \u00e9stas tambi\u00e9n depende del \u00e1mbito en el que se vaya a desarrollar. No es lo mismo desarrollar una aplicaci\u00f3n web que un programa de escritorio o cliente-servidor. MVC generalmente es utilizado para los entornos de desarrollo web o aplicaciones de escritorio. Veamos cu\u00e1les son las ventajas que presenta emplear este patr\u00f3n<\/strong>.<\/p>\n\n\n\n