El patrón de diseño MVVM (Model – View – ViewModel) separa los datos de la aplicación, la interfaz de usuario y agrega un ViewModel que actúa como intermediario. Esto permite desacoplar la lógica de negocio de la interfaz de usuario. MVVM facilita el desarrollo de aplicaciones, especialmente aquellas que se vuelven difíciles de controlar, logrando la reutilización de código.

1. PATRÓN DE DISEÑO MVVM (
MODEL – VIEW – VIEWMODEL)
DANIELA PADILLA GUZMÁN
JENNIFFER SANTOS MOCALEANO
JESSICA PAOLA RIVERA

2. QUE ES PATRÓN DE DISEÑO MVVM?
MVVM significa Modelo Vista Vista Modelo, ya que en este patrón
de diseño se separan los datos de la aplicación, la interfaz de
usuario pero en vez de controlar manualmente los cambios en la
vista o en los datos, estos se actualizan directamente cuando
sucede un cambio en ellos, por ejemplo si la vista actualiza un dato
que está presentando se actualiza el modelo automáticamente y
viceversa.

3. En el año 2004, un grupo de desarrollo de Microsoft trabajaba en un proyecto denominado
“Avalon”, más conocido por su nombre definitivo WPF (Windows Presentation Foundation). El
propósito de dicho proyecto era permitir el desarrollo de aplicaciones de escritorio más
completas y con un aspecto visual mucho más logrado y complejo de lo que era posible con
Windows Forms.
Al año siguiente John Gossman (miembro del equipo de desarrollo de “Avalon”), en un artículo
de la MSDN, mostraba al público el patrón MVVM. En el artículo, MVVM se presenta como
una variación del patrón MVC ajustado a “WPF” y a su sistema de enlace a datos, aunque
realmente es una adaptación del patrón “presentation model” creado por el mítico Martin
Fowler.
CUANDO SURGIO EL PATRÓN DE DISEÑO MVVM

4. FINALIDAD DE MVVM
• La finalidad principal del
patrón MVVM (Modelo Vista
Vista-Modelo) es tratar
de desacoplar lo máximo
posible la interfaz de usuario de la
lógica de la aplicación.

5. Elementos del patrón MVVM
El modelo
Representa la capa de datos y/o la lógica de negocio, también denominado como el objeto del dominio.
El modelo contiene la información, pero nunca las acciones o servicios que la manipulan. En ningún
caso tiene dependencia alguna con la vista.
La vista
La misión de la vista es representar la información a través de los elementos visuales que la componen.
Las vistas en MVVM son activas, contienen comportamientos, eventos y enlaces a datos que, en cierta
manera, necesitan tener conocimiento del modelo subyacente. En Xamarin Forms podemos crear
nuestras interfaces a través de código C# o XAML.
Modelo de vista (ViewModel)
El ViewModel (modelo de vista) es un actor intermediario entre el modelo y la vista, contiene toda la
lógica de presentación y se comporta como una abstracción de la interfaz. La comunicación entre la
vista y el viewmodel se realiza por medio los enlaces de datos (binders).

6. SEPARACIÓN DE RESPONSABILIDADES DE MVVM
De acuerdo al patrón de diseño MVVM, maneja tres capas como las siguientes:

7. MODELO
❖ Es todo el dominio
❖ Se compone de objetos con propiedades y algunas
variables para contener los datos en la memoria.
❖ Es el modelo de datos de cliente que soporta las
vistas de la aplicación.
❖ La capa de acceso a datos que representa el
contenido, es un enfoque centrado a los datos.
❖ La validación que puede ser opcional.
❖ Es la lógica de negocio.
MODEL

8. VISTA
❖ Define la interfaz de usuario
❖ Define la estructura y apariencia de lo que el usuario
ve en la pantalla .
❖ Maneja los estilos y recursos
❖ Comportamientos
❖ Actualizada a través de bindings

9. MODELO DE LA VISTA
❖ Es la abstracción de la vista
❖ Implementa la lógica de presentación
❖ Adapta el modelo a la vista
❖ Mantiene el estado
❖ Expone propiedades a las que se enlaza la vista (Datos
y comandos)
❖ Expone métodos que los comportamientos de una vista
pueden invocar.
❖ Desacoplamiento y testabilidad que es el objetivo
principal.

10. COMPARACIÓN ENTRE MVC Y MVVM
✓ Tiene control total de los componentes
✓ Controlar componentes propios
personalizados.
✓ Usar la VistaModelo con multiples vistas sin tener
que modificarlas.
✓ La Capa VistasModelo tiene mayor reusabilidad,
testabilidad y los cambios en la vista le afectan

11. MVC MVVM
Acoplamiento con la vista Muy poco con plantilla Muy poco
Acoplamiento con el componente Un poco Muy poco
Codificar en la vista Mediante el ID del componente A través de una expresión Data binding
Implementación de un controlador Extendemos ZK’s Composer Es un POJO
Acceso a la información de la UI Acceso directo Automático
Acceso a la información desde el backend Acceso directo Acceso directo
Actualización de la interfaz de usuario Manipulamos directamente los componentes Automático (@NotifyChange)
Nivel de control del componente Elevado, control total Normal
Rendimiento Alto Normal
Diferencias

12. VENTAJAS
• Separación de preocupaciones
• Pruebas unitarias
• Mantenimiento de Código
• Consistencia
• Desacoplamiento
• Flujo de trabajo entre diseño y desarrolladores
• Reutilización del código y mucho más..

13. WPF
Es una tecnología de Microsoft, presentada como parte de Windows Vista.
Permite el desarrollo de interfaces de interacción en Windows tomando
características de aplicaciones Windows y de aplicaciones web.

14. Ventajas
* Se reducen los costos de programación y mantenimiento al no estar el marcado específico de la
apariencia estrechamente relacionado con el código especifico del comportamiento.
* La programación es más eficaz porque los diseñadores pueden implementar las apariencias de
una aplicación al mismo tiempo que los programadores implementan su comportamiento.
* WPF ofrece la posibilidad de utilizar de las mismas tecnologías tanto para interfaces nativas de
Windows como para interfaces de explorador web. Así, un desarrollador puede crear una aplicación
XAML del explorador (XBAP) con WPF, que se ejecuta en Internet Explorer.

15. COMO CREAR UN PROYECTO MVVM CON WPF
1. Crear un nuevo
proyecto de
aplicación de
WPF
MVVMDemo.

16. 2. Añadir las tres
carpetas (Model,
ViewModel, and
Views) en su
proyecto.

17. 3. Añadir una clase
StudentModel en la
carpeta del modelo
y pega el siguiente
código en esa clase

18. 4. Añadir otra clase
StudentViewModel
en la carpeta de
modelo de vista y
pegar el siguiente
código.

19. 5. Agregar un nuevo
control de usuario
(WPF) por carpeta
clic Vistas derecho y
seleccione Agregar>
Nuevo elemento

20. 6.Haga clic en el botón
Añadir. Ahora verá el
archivo XAML. Agregue
el código siguiente en
el archivo
StudentView.xaml que
contiene diferentes
elementos de la
interfaz.

21. 7.Ahora añadir el
StudentView en su
archivo
MainPage.xaml
usando el siguiente
código.

22. 8.Aquí está la aplicación
para el evento de carga
en el archivo
MainPage.xaml.cs, que
actualizará la vista desde
el modelo de vista.

23. 9. Cuando el código
anterior se compila y
ejecuta, recibirá el
siguiente resultado en la
ventana principal.

24. Un patrón mvvn es un conjunto de soluciones para resolver problemas, en nuestro caso, del desarrollo
del software. Exactamente, los patrones de arquitectura de software como el Model – View –
ViewModel o sus más conocidas siglas MVVM tiene como idea fundamental el organizar la estructura
de un proyecto de software.
mvvn nos facilita el desarrollo de aplicacion, sobre todo aquellas que se tornan dificiles de controlar.
con ese patrol se logra la reutilizacion de lo que tanto se habla en Programacion Orientada a Objetos
haciendo muy simple su implementacion.