1

2
3
4
5
6
 El modelo–vista–controlador (MVC) fue desarrollado en
el Centro de Investigaciones Xerox Corporation a
finales de los años setenta en California por Trygve
Reenskaug.
 La arquitectura del patrón Modelo-Vista-Controlador
es un paradigma de programación bien conocido para
el desarrollo de aplicaciones con interfaz gráfica de
usuario (GUI).
 El MVC es un patrón de software que separa los
componentes de aplicación en tres niveles por sus
diferentes responsabilidades.
 Modelo • Lógica de Negocio

Vista • Interfaz de usuario

Controlador • Lógica de Control

 La razón es que nos permite separar los componentes
de nuestra aplicación dependiendo de la
responsabilidad que tienen, esto significa que cuando
hacemos un cambio en alguna parte de nuestro código,
esto no afecte otra parte del mismo.

 Surge de la necesidad de crear software más robusto

con un ciclo de vida más adecuado, donde se potencie
la reutilización del código y la separación de conceptos,
características que buscan facilitar la tarea de desarrollo
de aplicaciones y su posterior mantenimiento.
 Si modificamos nuestra Base de Datos, sólo
deberíamos modificar el modelo que es quién
se encarga de los datos y el resto de la
aplicación debería permanecer intacta.
 Esto respeta el principio de la responsabilidad
única. Es decir, una parte de tu código no
debe de saber qué es lo que hace toda la
aplicación, sólo debe de tener una
responsabilidad.
 El modelo es la porción que implementa la “Lógica del
Negocio”.
 Se le suele llamar a la parte del sistema que representa
objetos y sus interacciones del mundo real.
 Son rutinas que realizan entradas de datos, consultas,
generación de informes y más específicamente todo el
procesamiento que se realiza detrás de la aplicación.
 Las peticiones de acceso o manipulación de información
llegan al 'Modelo' a través del 'controlador’, y este envía
a la 'vista' aquella información que en cada momento se
le solicita para que sea mostrada (típicamente a un
usuario).
 Es la capa donde se trabaja con los datos, por tanto
contendrá mecanismos para acceder a la información y
también para actualizar su estado. Los datos los
tendremos habitualmente en una base de datos, por lo
que en los modelos tendremos todas las funciones que
accederán a las tablas y harán los
correspondientes selects, updates, inserts, etc.
 El controlador es el cerebro de la aplicación MVC.
 Responde a eventos (acciones del usuario) e invoca
peticiones al “modelo” cuando se hace alguna
solicitud sobre la información. También puede
enviar comandos a su “vista” asociada si se solicita.
 Empleado como un mediador entre el medio
gráfico ("View") y el modelo ("Model"), coordina las
acciones que son llevadas acabo entre ambos.
 El controlador generalmente crea instancias y
utiliza métodos de esos modelos para conseguir
los datos que se presentan a los usuarios,
enviándolos a la vista correspondiente.
 Las vistas son las porciones de la aplicación MVC
que presentan salida al usuario.
 Presenta el “modelo” (información y lógica de
negocio) en un formato adecuado para interactuar
(interfaz de usuario).
 Ni el modelo ni el controlador se preocupan de
cómo se verán los datos, esa responsabilidad es
únicamente de la vista.
 Por ejemplo: La salida más común para
aplicaciones web es el HTML. Podrían ser otras
como un formulario, gráficos, etc.
1. El usuario realiza una acción en la interfaz.
2. El controlador trata el evento de entrada.
3. El controlador notifica al modelo la acción del
usuario, lo que puede implicar un cambio del
estado del modelo (si no es una mera consulta).
4. Se genera una nueva vista. La vista toma los
datos del modelo.
El modelo no tiene conocimiento directo de la vista
5. La interfaz de usuario espera otra interacción
del usuario, que comenzará otro nuevo ciclo.
En la web, el MVC funcionaría así.
 Cuando el usuario manda una petición al
navegador, digamos quiere ver un sitio
específico el controlador responde a la
solicitud, porque él es el que controla la
lógica de la app, luego le pide al modelo la
información del curso.
 El modelo, que se encarga de los datos de la
app, consulta la base de datos y obtiene
toda la información.
 Luego, el modelo responde al controlador con
los datos que pidió.
 Finalmente, el controlador tiene los datos
solicitados, se los manda a la vista, pudiendo
aplicar los estilos (Hojas de estilos CSS),
organizar la información y construir la página
que se observa en el navegador.
 “Un Framework es una estructura de soporte
definida en la cual un proyecto de software
puede ser organizado y desarrollado.
Típicamente, un Framework puede incluir
soporte de programas, bibliotecas y un
lenguaje de scripting para ayudar a desarrollar
y unir los diferentes componentes de un
proyecto”.
 Un framework es un diseño re-usable de
un sistema, se puede considerar como una
aplicación genérica incompleta y configurable a
la que podemos añadirle las últimas piezas
para construir una aplicación concreta,
refiriendo a una estructura de software
compuesta de componentes personalizables e
intercambiables para el desarrollo de una
aplicación.
 Actualmente existen muchos frameworks
disponibles para el desarrollo del MVC.
Algunos ejemplos:
 Java Enterprise Edition (Java EE)
 Java Swing
 Spring
 AngularJS,
 Struts
 ASP.NET MVC Framework (Microsoft)
 Etc., etc., etc.
 Las aplicaciones de MVC pueden ser
implementadas con Java EE utilizando JSP
para las vistas, servlets como controladores y
los JavaBeans, que son idóneos para el
modelo,
Modelo Datos Vista
(beans) (Propiedades (JSPs)
de los Beans)

Mostrar Vista
Evento Evento (HTML), jsp:getProperty

(Petición) (forward) Información Evento

(Parámetros)
Controlador
(servlet)
Evento
(Petición)
Interfaz
Usuario
(Navegador)
Los servlets facilitan el tratamiento de las peticiones
que llegan al servidor.
Tratamiento de datos de formularios.
Generación de contenidos de formato variable.
Permiten redireccionar las peticiones.
ElJSP facilita el desarrollo y mantenimiento del
contenido HTML
Interesante para páginas de formato establecido (poca
variabilidad).
LosJava Beans y Enterprise Beans facilitan la
implementación de la lógica de negocio
Independiente del protocolo de interacción con los clientes
Independiente de la presentación de los resultados
 Los beans representan los datos
 Los resultados pueden ser Java Beans que encapsulan los
resultados
 Los servlets gestionan las peticiones de los clientes
 Reciben las peticiones HTTP
 Procesan los parámetros (p.ej. de formularios) comprobando que
son correctos
 Invocan operaciones en beans para ejecutar la lógica de negocio
 Guardan referencias a los beans de resultados en el
ServletsContext, en la sesión o en la petición
 Reenvían la petición a una página JSP
 El servlet determina la página JSP apropiada y usa el método de
reenvío para transferirle el control.
 La página JSP accede a los beans de resultado
◦ La página JSP no crea ni modifica beans, solo los consulta para ver
los resultados
 Fácil organización del código en tres componentes
diferentes.
 Crea independencia del funcionamiento.
 Facilita agregar nuevos tipos de datos según sea
requerido por la aplicación ya que son
independientes del funcionamiento de otras capas.
 Si trabaja con un equipo de programadores entonces
les da una mayor facilidad para poder seguir el
trabajo entre varios integrantes.
 Facilita el mantenimiento en caso de errores.
 Hacen que las aplicaciones sean fácilmente
extensibles.
 Poder adaptarse a los frameworks de hoy en día.
 La separación de conceptos en capas agrega
complejidad al sistema.
 La cantidad de archivos a mantener y
desarrollar se incrementa considerablemente.
 La curva de aprendizaje del patrón de diseño
es más alta que usando otros modelos
sencillos.
 Para aplicar el MVC a nuestro ejemplo
tendremos que desarrollar una serie de
módulos independientes que se encarguen,
en dos capas (acción y estado) del acceso a
los datos.
Primero se crea el modelo, que es una clase en java y se llama Cliente.java, esta clase
sólo contiene los atributos, constructor, getters y setters.
Se definen los campos ("fields") utilizados en un
contexto privado (private).

Se definen constructores Java, Constructor "default" sin

datos de entrada.

A través de los diversos métodos get/set es posible

modificar los valores iniciales definidos en el Java Bean.
Luego se crea la vista, la clase ClienteView.java, para el ejemplo
y su función es presentar los datos del modelo.
 Ahora se crea el controlador que contiene 2
objetos: el modelo y la vista.
 Así como los getters y setters para llenar las
propiedades del modelo y un
método(actualizarVista()) que llama a la vista
que a su vez imprime las propiedades
del modelo cliente.
Se declara los
objetos
Presentación
de los datos
 Una clase sencilla para sumar variables
Crea un nuevo proyecto en netbeans, para este
ejemplo, el proyecto se llama “MVC".
Crea una estructura de paquetes (Controller,
Model, View), hacemos esto para separar cada
componente y ser más organizados.
1. Creación del proyecto
2. Creación del modelo
3. Codificación de la clase Vista
4. Codificación de la clase Controlador
5. Codificación de la clase Principal
6. Prueba del proyecto MVC
 Como puedes observar, mantenemos el
paquete default junto al MVC.java que nos
crea netbeans, este main es el que nos servirá
como nuestro index de nuestra aplicación,
nuestro "lanzador".
Empecemos creando la lógica de la aplicación,
crea una nueva clase en el paquete Model,
llámalo "modelo.java" y añade el siguiente
código:
La suma de dos
valores
Se añade un JFrame al paquete VIEW, llámalo “Vista.java”.
 En Java existe una biblioteca gráfica
(Componentes Swing) la cual incluye widgets
para la interfaz gráfica de usuario (cajas de texto,
botones, menús entre otros...).

 Para esta "MiniCalculadora« haremos uso

JTextField (campos de texto) para los operando y
uno para mostrar el resultado,
un JButtons (botón) para la operación , a su vez
algunos JLabels para mostrar ciertos textos en la
ventana.
 Nuestra clase controlador, implementa el ActionListener, esto para
responder desde esta clase, los eventos realizados desde la interfaz
(VISTA).
 El constructor de la clase pasa como parámetros, la clase VISTA y la
clase MODELO.
 Nuestra clase ademas cuenta las funciones, INICIAR() la cual
inicializa los valores de la interfaz, como ser el atributo titulo del
JFrame, posicionamiento en pantalla, valores iniciales de los
jtextbox, etc.
 El método action performed captura el evento realizado desde la
interfaz.
 Un CLICK EN EL BOTON SUMAR, obtiene los datos correspondientes
e invoca al modelo para procesar la información y obtener una
respuesta.
1.Crear el proyecto JAVA EE con Web Aplication
MVCJSP

2.Crear la(s) página(s) estáticas que invocará los servlets (Vista)

Vista.jsp

3. Crear los objetos de negocio (Modelo)

ModeloCalculadora.java

4. Crear el servlet que implementará la calculadora

(Controlador)
CalculadoraServlet.java
 El patrón arquitectónico MVC favorece el
diseño de sistemas software.
 Es un patrón que mantiene elevado el grado
de desacoplamiento.
 Todas esas virtudes contribuyen a simplificar
el diseño de aplicaciones complejas que, de
otra forma, resultarían mucho más difíciles
de abordar y mantener.