Conectados con la tecnología

Modelo Vista Controlador | MVC

Nuestra sociedad vive en un momento tecnológico que cada día nos sorprende con las aplicaciones y productos que están  a disposición de las personas.   Por lo general,  estas aplicaciones son buenas,  y mejor aún si se utiliza como una herramienta de estudio o bien de trabajo. Y desde luego, es evidente que cada vez adquirimos dispositivos tecnológicos que nos hace más fácil la vida. Si antes se invertía 3 horas realizando una tarea, ahora se buscan formas de realizarla en el menor tiempo posible. Para los colegas que han desarrollado una aplicación o software cada vez buscamos no solo dispositivos, sino técnicas que nos permitan realizar con efectividad nuestras actividades de ingeniería.

Modelo Vista Controlador – MVC.

En los años 70’s se inventó un método  llamada MVC, es decir “MODELO – VISTA – CONTROLADOR” o en inglés “MODEL – VIEW – CONTROLLER”.  MVC es un patrón de diseño  o modelo de desarrollo de aplicaciones informáticas.

Algo de historia del MVC

La arquitectura MVC fué desarrollada como parte del grupo de Smalltalk en el famoso Xerox PARC.  Por lo general se le atribuye los créditos al noruego Trygve Reenskaug, que trabajó allí como científico en 1978/1979. MVC es desde entonces una parte integral del lenguaje de programación Smalltalk.

Las 3 capas de Modelo Vista Controlador (MVC)

Es un modelo muy respetado y con el paso de los años ha demostrado su importancia en la Ingeniería en Sistemas, en el uso de multitud de lenguajes de programación. Está formado por tres niveles, capas o secciones lógicas.  Es una forma de organizar el código de nuestra aplicación.

 Modelo (Model):

El Modelo administra los datos de la aplicación. Estos datos son los que el programa usará. En la mayoría de los casos, se trata de una base de datos. En este caso se encargaría de recuperar o almacenar datos.  Incluiremos el código que nos permita acceder a la base de datos de la aplicación. Por ejemplo los comandos SQL como INSERTS, SELECTS, UPDATES.

  • En otros puede ser un simple archivo, una hoja electrónica, entro otros.
  • Además, representa la parte que implementa la “Lógica de negocio”.
  • En términos de programación está dividida en  clases para hacer más fácil el programa.

Vista (View):

Es la representación visual del patrón.  Es el responsable de mostrar toda o una porción de los datos de la aplicación. Son los elementos que el usuario recibe y con los que puede interactuar.  En esta sección se incluye el código HTML, JavaScript, CSS (hojas de estilo), PHP, ASP y otros.

En términos de programación, si es Visual Basic se representan por medio de los controles y formularios.  Si es el caso de Java se refiere al constructor JFrame.

Controlador (Controller):

Es un intermediario entre las capas Modelo y Vista, el cual es responsable de actualizar el Modelo cuando el usuario manipula la Vista. También se puede entender que el Controlador lee o recolecta los datos desde la vista y se los envía al modelo. Por ejemplo, si el usuario hace clic en el botón del ratón o elige un elemento de menú, el controlador es responsable de determinar la forma en que la aplicación debe responder.

En términos de programación, se refiere a las funciones y subrutinas.

El controlador actualiza la vista cuando el modelo cambia.

Ejemplo

Modelo-Vista-Controlador_MVC

Tal como se observa en la imagen anterior, el Controlador (mesero) y el Modelo (cocinero) esperan algún evento por parte de la Vista (cliente).  La misión en este caso, es dar un servicio de alimentación al cliente. Por supuesto el que inicia este ciclo es el cliente que solicita al mesero un plato y bebida específica. Luego el mesero al “capturar” la orden de comida del cliente, le solicita al cocinero prepararla. Tanto el cliente como el mesero esperan el resultado de esta orden.

MVC - Modelo Vista Controlador

El cocinero interpreta y prepara lo solicitado por parte del mesero. Pasado un tiempo, el cocinero devuelve al mesero el plato solicitado (datos). Y el mesero finalmente hace entrega del plato al cliente.

Pasos en el Modelo Vista Controlador

Cada desarrollador tiene la libertad de organizarse como mejor le parezca. Lo importantes es visualizar los resultados de la aplicación.  Sin embargo, esta es de las formas posibles que para utilizar el MVC en tu aplicación. Puedes empezar creando las clases, luego creando la Interfaz de Usuario y finalmente trabajar la lógica del programa.

Paso 1 – Diseño de las clases

  • Crear el diagrama UML para la aplicación.
  • Cada “cosa” en su programa llegará a ser una clase. Por ejemplo una institución, materia, persona, vehiculo, etc.
  • Cada clase tendrá atributos como el color, cantidad. También tendrá  métodos o acciones como caminar, frenar, levantar, etc.

Paso 2 – Interface de usuario.

  • Ahora es importante saber que información debe aparecer en  las pantallas. En muchos casos esto podría llegar  a verse como un formulario.

Paso 3 – Codificación.

  • Ahora usted puede enlazar las clases y la interfaz de usuario.
  • Esta es la parte de programación y viene a ser la última, no la primera.

Pregunta de consulta.

Generalmente relacionamos la capa Vista, como la parte visual.  En el caso de un usuario que está haciendo uso de un reproductor de música en su computadora, ¿creen ustedes que el reproducir una canción es parte de la capa vista?

Beneficios del Modelo Vista Controlador

  • Permite organizar mejor el código fuente de la aplicación.
  • Fácil y adecuado  mantenimiento de la aplicación.
  • Es utilizado por múltiples plataformas o lenguajes de programación.
  • Código reutilizable.

Lenguajes que implementan Modelo Vista Controlador

Este método de desarrollo ha llegado a alcanzar una multitud de tecnologías. Algunas de esos tecnologías son PHP, JAVA, ASP, Visual Basic, CakePHP, Symfony, CodeIgniter, Visual C++, JBuilder y otros.

Lo cierto es que el orden en el desarrollo de nuestras aplicaciones es un principio que no debemos dejar pasar. En el futuro se seguirá desarrollando nuevas técnicas o formas de desarrollo que nos permitirá a los profesionales trabajar con mayor efectividad.

FUENTES de Modelo Vista Controlador – MVC.

Learning JavaScript Design Patterns – A book by Addy Osmani

MVC Architecture – Content available under the CC-By 3.0 license

Model-View-Controller – By Patrick van Bergen

Model View Controller – Cunningham & Cunningham, Inc.

2 Comentarios

Agregar comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *