Patrón arquitectónico MVP

Desarrollo Rápido
Portadade Aplicaciones
Universidad de Almería
Patrón arquitectónico MVP
 Índice

Patrón arquitectónico MVP

Diferencias entre MVC y MVP
MVP Passive View
MVP Supervising Controller
Conclusiones

2 Patrón arquitectónico MVP

 Índice

Patrón arquitectónico MVP

Diferencias entre MVC y MVP
MVP Passive View
MVP Supervising Controller
Conclusiones

3 Patrón arquitectónico MVP

Patrón arquitectónico Modelo-Vista-Presentador (MVP)

El patrón (Model-View-Presenter  Modelo-Vista-

Presentador) MVP es un patrón arquitectónico derivado
del patrón Modelo-Vista-Controlador (MVC) que nos
permite una más clara separación entre la Vista, el Modelo
y la lógica de negocio (la cual se lleva a cabo en el
Presentador)

El Presentador hace de enlace entre el Modelo y la Vista,

y es independiente de la tecnología de interfaz de usuario
La Vista no tiene constancia del modelo (pasivo)

4 Patrón arquitectónico MVP

Patrón arquitectónico Modelo-Vista-Presentador (MVP)

Objetivos de MVP
Incrementar la testabilidad
Mayor cohesión
Separación de responsabilidades
Ortogonalidad (habilidad para cambiar el diseño conceptual de la
aplicación con un mínimo impacto)
Consecuencias
Desarrollo en paralelo
Reusabilidad
Mantenibilidad
Independencia con respecto al interface de usuario

5 Patrón arquitectónico MVP

Patrón arquitectónico Modelo-Vista-Presentador (MVP)
Siguiendo la metodología TDD (Test-Driven-Development),
testear la interfaz gráfica de usuario es difícil porque
debemos simular las posibles interacciones del usuario con
el interface  Los clics de botones, casillas de verificación,
los eventos de teclado, del ratón, etc.
La solución del patrón MVP, es codificar la interfaz de
usuario (UI) muy ligera, que tenga el menor código posible,
de forma que no merezca la pena testearla
Toda la lógica de la interfaz de usuario (UI), se realiza en
el Presenter, que no depende de los componentes de la
interfaz gráfica y que, por tanto, es más fácil de testear

6 Patrón arquitectónico MVP

Patrón arquitectónico Modelo-Vista-Presentador (MVP)

Ventajas de MVP
Clara separación de responsabilidades entre interfaz, lógica de
negocio y de control
Facilidad para la realización de pruebas unitarias de los
componentes, así como de aplicar desarrollo guiado por pruebas
(TDD)
Simplicidad en el desarrollo y mantenimiento de los sistemas
Reutilización de los componentes
Facilidad para desarrollar prototipos rápidos
Sencillez para crear distintas representaciones de los mismos
datos
Los sistemas son más escalables y eficientes

7 Patrón arquitectónico MVP

Patrón arquitectónico Modelo-Vista-Presentador (MVP)

Desventajas de MVP
Como le sucede a MVC, tener que ceñirse a una estructura
predefinida, lo que a veces puede incrementar la complejidad del
proyecto
Al principio puede requerir cierto esfuerzo adaptarse a esta
filosofía, sobre todo a desarrolladores acostumbrados a otros
modelos más cercanos al escritorio
Como le sucede a MVC, la distribución de componentes obliga a
crear y mantener un mayor número de archivos

8 Patrón arquitectónico MVP

 Descomposición funcional de MVP

Lógica de Formato

Estado de la Visualización
Presentación
(Datos)
Presentador (difícil de probar)

Vista
Modelo Lógica de la
Gestión de
Eventos IU

Patrón arquitectónico MVP

Patrón arquitectónico Modelo-Vista-Presentador (MVP)
MVP es una derivación del patrón MVC, buscando un
desacople mayor entre la tecnología de interfaz de usuario
y la lógica de la aplicación
MVP  No se requiere a la Vista para observar el Modelo
El Presentador ocupa el lugar del Controlador, y es
responsable tanto de trasladar la entrada de usuario desde
la Vista al Modelo, como de actualizar la Vista con los
cambios que ocurran en el Modelo
El Presentador se comunica con la Vista a través de un
interface IVista lo que mejora la testabilidad, ya que el
Modelo podría ser re-emplazado por otro

10 Patrón arquitectónico MVP

Patrón arquitectónico Modelo-Vista-Presentador (MVP)
Estructura del patrón arquitectónico MVP

MVP Pasivo por

capas. No existe
comunicación
Modelo-Vista

11 Patrón arquitectónico MVP

Patrón arquitectónico Modelo-Vista-Presentador (MVP)
Modelo es la lógica de negocio como tal, la Vista es la
tecnología de interfaz de usuario y, el Presentador será el
encargado de desacoplar la comunicación entre el Modelo
y la Vista
Un detalle importante con la implementación de este
patrón es que será tal el desacople entre tecnología de
interfaz de usuario y lógica, que se implementa una
interface (IVista) de por medio  La Vista sólo conocerá la
definición del Presentador para consumir sus métodos,
pero nunca existirá un paso de información entre ellos
debido al contrato que se declara entre la tecnología de
interfaz de usuario y la interface
12 Patrón arquitectónico MVP
Patrón arquitectónico Modelo-Vista-Presentador (MVP)
La ventaja de MVP frente a MVC es su mejor testabilidad
 La lógica y el estado de la Vista se han trasladado al
Presentador (la Vista es pasiva) lo que facilita también la
posibilidad de intercambiar la Vista por otra
Además, se ha eliminado toda comunicación entre la Vista
y el Modelo, lo que permite igualmente, que éste pueda ser
re-emplazado por otro (un falso Modelo)
Consecuentemente MVP, permite re-utilizar la lógica de la
Vista (al haber sido ésta trasladada al Presentador, que se
comunica con la Vista a través de un interface, IVista)

13 Patrón arquitectónico MVP

 Índice

Patrón arquitectónico MVP

Diferencias entre MVC y MVP
MVP Passive View
MVP Supervising Controller
Conclusiones

14 Patrón arquitectónico MVP

 Diferencias entre MVC y MVP
MVC  Es un patrón de presentación de UI que se centra
en separar la UI (Vista) de la capa de negocio (Modelo)
MVC  Separa responsabilidades según sus tres
componentes  La Vista es la encargada de la
representación de los elementos de la UI, el Controlador es
el responsable de responder a las acciones de la UI y el
Modelo es el responsable de la gestión del estado y la
lógica de negocio
MVC  En la mayoría de las implementaciones, los
componentes interactúan entre ellos, y en otras es el
Controlador el responsable de determinar qué Vista se
muestra
15 Patrón arquitectónico MVP
 Diferencias entre MVC y MVP
MVC

16 Patrón arquitectónico MVP

 Diferencias entre MVC y MVP
MVP  Es un patrón de presentación de UI basado en los
conceptos del patrón MVC
MVP  Separa responsabilidades según cuatro
componentes  La Vista se encarga de la representación
de los elementos de la UI, la interface de la vista (IVista) se
utiliza para acoplar débilmente el Presentador de la Vista,
el Presentador es el responsable de la interacción de entre
el Modelo y la Vista, y el Modelo es el responsable de la
gestión del estado y la lógica de negocio
MVP  En algunas implementaciones el Presentador
interactúa con una capa de servicio (Controlador) para
recuperar y almacenar el Modelo
17 Patrón arquitectónico MVP
 Diferencias entre MVC y MVP
MVP

18 Patrón arquitectónico MVP

 Diferencias entre MVC y MVP
Ventajas del uso del MVP
Acoplamiento débil  El Presentador es un intermediario entre el
código de la UI y el Modelo. Éste permite a la Vista y al Modelo
envolverlos de forma aislada el uno del otro
Clara separación de responsabilidades  Vista es la
responsable de mostrar los elementos de la UI. El Presentador es el
responsable de reactivar los eventos de la UI e interactuar con el
Modelo. El Modelo es el responsable de la lógica de negocio y de la
gestión del estado
Reutilización de código
Ocultar el acceso a datos
Flexibilidad y adaptabilidad
Desarrollo dirigido por test

19 Patrón arquitectónico MVP

 Diferencias entre MVC y MVP
Diferencias entre MVC y MVP
Las mayores diferencias son cómo se implementa el patrón y en
algunos escenarios avanzados se puede necesitar ambos
Presentador y Controlador
MVP
• La Vista está más débilmente acoplada al Modelo. El Presentador es el
responsable de enlazar (binding) el Modelo a la Vista
• La interacción con la Vista es a través de una interface (IVista)
• Normalmente la relación entre la Vista y el Presentador es uno-a-uno,
aunque Vistas complejas pueden tener varios Presentadores
MVC
• El Controlador está basado en comportamiento y puede compartirse a
través de las Vistas. Además, el Controlador puede ser el responsable
de determinar qué Vista se muestra

20 Patrón arquitectónico MVP

 Diferencias entre MVC y MVP
Diferencias entre MVC y MVP

21 Patrón arquitectónico MVP

 Diferencias entre MVC y MVP
Diferencias entre MVC y MVP
MVP
• La Vista está débilmente acoplada al Modelo (o completamente
desacoplada)
• El Presentador gestiona todos los eventos IU (eventos de la interfaz de
usuario)
• El Presentador llama para actualizar la Vista vía la interfaz de la Vista
MVC
• La Vista y el Modelo no están totalmente desacoplados
• La Vista es la que gestiona los eventos
• El Controlador pasa el Modelo a la Vista y la Vista entonces se
actualiza a sí misma

22 Patrón arquitectónico MVP

 Índice

Patrón arquitectónico MVP

Diferencias entre MVC y MVP
MVP Passive View
MVP Supervising Controller
Conclusiones

23 Patrón arquitectónico MVP

 MVP (Passive View)
MVP (Passive View, Vista Pasiva)  El Presentador
actualiza la Vista para reflejar cambios en el Modelo. La
interacción con el Modelo es gestionada exclusivamente por
el Presentador, y la Vista no está al tanto de los cambios del
Modelo

24 Patrón arquitectónico MVP

 Estructura de MVP (Passive View)
Estructura general

25 Patrón arquitectónico MVP

 MVP (Passive View)
Características más importantes
El Modelo no tiene constancia ni de la Vista ni del Presentador,
puede notificar al Presentador cambios de estado a través de
eventos
El Presentador, es el único que tiene constancia del Modelo a
través de un interface (lo que permite su fácil substitución). Tiene
que repercutir la interacción del usuario con el interface sobre el
Modelo, y actualizar la Vista si corresponde (ya que el Modelo no se
puede comunicar con la Vista)
La Vista está reducida al máximo (solo se compone del código de
visualización), y es accedida por el Presentador a través de un
interface bien definido (IVista), lo que permite poder intercambiar
Vistas

26 Patrón arquitectónico MVP

 MVP – Aplicación de Formularios

Creación del Modelo

Interface IModelo que represente al Modelo
Clase Modelo que implemente al interface IModelo

Creación de la Vista
Interface IVista que represente la visualización del Modelo en la
Vista e incorpore los componentes gráficos del interface de usuario

La clase Vista (que implementa IVista, y hereda de Form) puede

tener un parámetro IModelo en el constructor. En su constructor
crea el Presentador (pasándose ella misma (Vista) como parámetro
en el constructor y el interface del modelo IModelo)

27 Patrón arquitectónico MVP

 MVP – Aplicación de Formularios

Creación del Presentador

Recibe en su constructor los interfaces IModelo e IVista
De esta forma el Presentador puede comunicarse con la Vista a
través del interface IVista y con el Modelo a través de IModelo

Programa Principal
Crea un Modelo que implemente IModelo
Crea una Vista (hereda de Form e implementa IVista) y en el
constructor se le pasa el Modelo
Se llama a Application.Run(Vista);

28 Patrón arquitectónico MVP

 Hola Mundo en MVP: IVista

using System;

namespace HolaMundo.MVP.Pasivo
{
public interface IVista
{
string MensajePedirNombre { get; set; }
string MensajeSaludo { get; set; }
string Nombre { get; set; }
string MensajeBoton { get; set; }
}
}

29 Patrón arquitectónico MVP

 Hola Mundo en MVP: La Vista
public partial class SaludoForm : Form, IVista
{
private Presentador _presentador;
public SaludoForm(IModelo modelo)
{
InitializeComponent();
_presentador = new Presentador(this, modelo);
saludoButton.Click += _presentador.saludoButton_Click;
}
public string Nombre { get { return nombreTextBox.Text; }
set { nombreTextBox.Text = value; } }
public string MensajePedirNombre {get {return nombreLabel.Text;}
set {nombreLabel.Text = value;}}
public string MensajeSaludo {get { return saludoLabel.Text; }
set { saludoLabel.Text = value; }}
public string MensajeBoton { get { return saludoButton.Text;}
set { saludoButton.Text = value;}}
}

30 Patrón arquitectónico MVP

 Hola Mundo en MVP Pasivo: El Modelo (pasivo)
public interface IModelo
{
string Nombre { get; set; }
string GenerarSaludo(string mensaje);
}

public class Modelo : IModelo

{
public string Nombre { get; set; }
public string GenerarSaludo(string mensaje)
{
return string.Format(mensaje + " {0} ", Nombre);
}
}

31 Patrón arquitectónico MVP

 Hola Mundo en MVP: Presentador
public class Presentador
{
private IVista _vista;
private IModelo _modelo;
public Presentador(IVista Vista, IModelo Modelo)
{
_vista = Vista;
_modelo = Modelo;
}
public void saludoButton_Click(object sender, EventArgs e)
{
_modelo.Nombre = _vista.Nombre;
string saludoMensaje = _modelo.GenerarSaludo("Hola ");
_vista.MensajeSaludo=saludoMensaje;
}
}
32 Patrón arquitectónico MVP
 Hola Mundo en MVP: Programa Principal

static void Main()

{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
IModelo modelo = new Modelo();
SaludoForm saludoForm = new SaludoForm(modelo);
saludoForm.MensajePedirNombre = "Escriba su nombre a continuación: ";
saludoForm.MensajeSaludo = "";
saludoForm.MensajeBoton = "Hacer Click";
Application.Run(saludoForm);
}

33 Patrón arquitectónico MVP

 Índice

Patrón arquitectónico MVP

Diferencias entre MVC y MVP
MVP Passive View
MVP Supervising Controller
Conclusiones

34 Patrón arquitectónico MVP

 MVP (Supervising Controller)
MVP (Supervising Controller, Controlador de Supervisión)
 La Vista interactúa directamente con el Modelo para
realizar un sencillo enlace de datos que puede ser definido
de forma declarativa, sin la intervención del Presentador
El Presentador actualiza el Modelo, éste manipula el
estado de la Vista sólo en los casos en que se requiere una
lógica de interfaz de usuario compleja que no se puede
especificar de forma declarativa
Los ejemplos de lógica de interfaz de usuario compleja
podría incluir cambiar el color de un control u ocultar /
mostrar los controles de forma dinámica

35 Patrón arquitectónico MVP

 MVP (Supervising Controller)
MVP (Supervising Controller)  Estructura

36 Patrón arquitectónico MVP

 Estructura de MVP (Supervising Controller)
Estructura general

37 Patrón arquitectónico MVP

 MVP Supervising Controller

Características más importantes

Se utiliza cuando el Modelo cambia de estado, y sin la
intervención explicita del Presentador, actualiza la Vista
Cuando el Modelo detecta cambios en su estado interno
envía un evento para alertar a los objetos subscritos a dicho
evento
La Vista al igual que el Presentador pueden acceder al
Modelo a través del interface bien definido
Elegiremos esta alternativa si tenemos un Modelo completo y
necesitamos las Vistas para sincronizarlas inmediatamente con él a
través de un Observador (mecanismo observable), y con ello
reduciríamos la capacidad de prueba y permitiríamos un vínculo
directo entre el Vista y el Modelo
38 Patrón arquitectónico MVP
 IVista en MVP (Supervising Controller)

namespace HolaMundo.MVP.Activo
{
public interface IVista
{
string MensajePedirNombre { get; set; }
string Nombre { get; set; }
string MensajeSaludo { get; set; }
void SaludoButton_Click(object sender, EventArgs e);
}
}

39 Patrón arquitectónico MVP

 Vista en MVP (Supervising Controller)
public partial class SaludoForm : Form, IVista
{
private Presentador _presentador;
public SaludoForm(IModelo modelo)
{
InitializeComponent();
_presentador = new Presentador(this, modelo);
saludoButton.Click += SaludoButton_Click;
modelo.Saludo += Modelo_Saludo;
}
public void Modelo_Saludo(object sender, SaludoEventArgs e)
{
MensajeSaludo = _presentador.GenerarSaludo(e.Saludo);
}

40 Patrón arquitectónico MVP

 Vista en MVP (Supervising Controller)

public void SaludoButton_Click(object sender, EventArgs e)

{
_presentador.SaludoButton_Click(sender, e);
}
public string MensajePedirNombre { get { return nombreLabel.Text; }
set { nombreLabel.Text = value; } }
public string Nombre { get { return nombreTextBox.Text; } }
public string MensajeSaludo { get { return saludoLabel.Text; }
set { saludoLabel.Text = value; } }
}

41 Patrón arquitectónico MVP

 IModelo con Patrón Observer
namespace HolaMundo.MVP.Activo
{
public delegate void SaludoEventHandler(object sender, SaludoEventArgs e);
public class SaludoEventArgs : EventArgs
{
public string Saludo { get; set; }
public SaludoEventArgs(string Saludo) { this.Saludo = Saludo; }
}
public interface IModelo
{
string Nombre { get; set; }
event SaludoEventHandler Saludo;
}
}

42 Patrón arquitectónico MVP

 Modelo con patrón Observer
public class Modelo : IModelo
{
private string _nombre;
public string Nombre
{ public event SaludoEventHandler Saludo;
get { return _nombre; }
set public void OnSaludo(string mensaje)
{ {
if (_nombre != value) if (Saludo != null)
{ {
_nombre = value; Saludo(this, new
SaludoEventArgs(Nombre));
OnSaludo(_nombre);
}
}
}
}
}
}

43 Patrón arquitectónico MVP

 Presentador en MVP (Supervising Controller)

public class Presentador

{
public IVista _vista; public void SaludoButton_Click(object
sender, EventArgs e)
public IModelo _modelo;
{
public Presentador(IVista vista, _modelo.Nombre = _vista.Nombre;
IModelo Modelo) }
{ public string GenerarSaludo(string
_modelo = Modelo; nombre)
_vista = vista; {
return string.Format("Hola {0} ",
}
nombre);
}
}

44 Patrón arquitectónico MVP

 Hola Mundo en MVP: Programa Principal

static void Main()

{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);

IModelo modelo = new Modelo();

SaludoForm saludoForm = new SaludoForm(modelo);
Application.Run(saludoForm);
}

45 Patrón arquitectónico MVP

 Índice

Patrón arquitectónico MVP

Diferencias entre MVC y MVP
MVP Passive View
MVP Supervising Controller
Conclusiones

46 Patrón arquitectónico MVP

 Conclusiones
Objetivos de MVP  Mayor cohesión, separación de
responsabilidades, ortogonalidad e incrementar la
testabilidad
Consecuencias  Reusabilidad, mantenibilidad,
independencia con respecto al interface de usuario (UI) y
desarrollo en paralelo
Idea fundamental  Desacoplar el Modelo de la Vista
MVC apropiado  Aplicaciones de consola y aplicaciones
de servidor (ASP)
MVP apropiado  Aplicaciones de escritorio y aplicaciones
Windows Form

47 Patrón arquitectónico MVP

 Conclusiones
La decisión de utilizar MVP Passive View o MPV
Supervising Controller depende principalmente de cómo
de testable queramos que sea nuestra aplicación
Si la capacidad de testabilidad (prueba) es el interés
principal de la aplicación, entonces Passive View podría
ser más conveniente porque se puede probar toda la lógica
de la interfaz de usuario mediante pruebas del Presentador
Por otro lado, si lo que se prefiere es la sencillez de código
completo sobre la capacidad de testabilidad, Supervising
Controller podría ser una mejor opción, ya que, para
cambios sencillos en la interfaz de usuario, no tiene que
incluir código en el Presentador que actualiza la Vista

48 Patrón arquitectónico MVP

 Conclusiones
Al elegir entre Passive View y Supervising Controller se debe
considerar lo siguiente
Ambas variantes permiten aumentar la capacidad de testabilidad
(prueba) de la lógica de presentación
Passive View proporciona una superficie de testeo (prueba) mayor
que Supervising Controller, porque toda la lógica de actualización de
la Vista se coloca en el Presentador. Este patrón promueve Vistas
ligeras que no contienen la lógica de este modo pueden ser testeadas
fácilmente y un Presentador dominante que se encarga de todo el
flujo de trabajo (y todas las actualizaciones de la Vista) por lo tanto
puede ser testeo eficazmente
Supervising Controller normalmente requiere menos código que
Passive View, porque el Presentador no realiza simples
actualizaciones de Vista, y el Modelo y la Vista está acoplados

49 Patrón arquitectónico MVP

 Conclusiones
MVP Passive View and Supervising Controller

50 Patrón arquitectónico MVP

 Conclusiones
Enlaces de interés
https://msdn.microsoft.com/en-us/library/ff649571.aspx
http://blogs.msdn.com/b/jowardel/archive/2008/09/09/using-the-model-view-
presenter-mvp-design-pattern-to-enable-presentational-interoperability-and-
increased-testability.aspx
http://webclientguidance.codeplex.com/wikipage?title=ModelViewPresenterPa
tternDescription&referringTitle=MVPDocumentation
http://stackoverflow.com/questions/2056/what-are-mvp-and-mvc-and-what-is-
the-difference
http://www.codeproject.com/Articles/42830/Model-View-Controller-
Model-View-Presenter-and-Mod
https://nicolocodev.wordpress.com/2011/08/31/patronmvpnet/
http://aviadezra.blogspot.com.es/2008/10/model-view-presenter-design-
pattern.html
http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter

51 Patrón arquitectónico MVP

 Contraportada

52 Patrón arquitectónico MVP