Diferencia entre revisiones de «Modelo Vista Vista Modelo»

(Página creada con '{{Ficha Software |nombre= Modelo Vista VistaModelo |familia= |imagen= Model_mvvm.jpg‎ |tamaño= |descripción= Diagrama del patrón de Arquitectura de Software, Modelo Vista V...')
(Etiqueta: nuestro-nuestra)
 
(Etiqueta: nuestro-nuestra)
Línea 1: Línea 1:
 +
<div align="justify">
 
{{Ficha Software
 
{{Ficha Software
 
|nombre= Modelo Vista VistaModelo
 
|nombre= Modelo Vista VistaModelo
Línea 21: Línea 22:
 
|premios=
 
|premios=
 
|web=
 
|web=
−
}}<div align="justify">
+
}}'''Modelo Vista VistaModelo''' (MVVM). Es un patrón arquitectónico usado en la ingeniería de software de Microsoft que se originó como una especialización del patrón de presentación de diseño modelo introducido por [[Martin Fowler]].
−
'''Modelo Vista VistaModelo (MVVM).''' es un patrón arquitectónico usado en la ingeniería de software de Microsoft que se originó como una especialización del patrón de presentación de diseño modelo introducido por [[Martin Fowler]]. <br>
 
 
En gran parte basado en el patrón [[Modelo Vista Controlador]] (MVC), MVVM está dirigido amodernas plataformas de desarrollode interfaz de usuario que soportanprogramación orientada a eventos, como [[HTML5]], [[Windows Presentation Foundation]] (WPF), [[Silverlight]] y el [[Framework ZK]].
 
En gran parte basado en el patrón [[Modelo Vista Controlador]] (MVC), MVVM está dirigido amodernas plataformas de desarrollode interfaz de usuario que soportanprogramación orientada a eventos, como [[HTML5]], [[Windows Presentation Foundation]] (WPF), [[Silverlight]] y el [[Framework ZK]].
 
== Historia ==
 
== Historia ==
Línea 37: Línea 37:
 
=== Ventajas de utilizar MVVM===
 
=== Ventajas de utilizar MVVM===
 
Este patrón junto a otros mas conocidos como [[Modelo Vista Controlador]] (MVC) o [[Modelo Vista Presentador]] (MVP) tiene por objetivo simplificar las tareas de desarrollo y mantenimiento del software escrito con estos a través de la división de ocupaciones, por lo cual alguien que ya haya trabajado previamente con alguno de los patrones previamente mencionados, le parecerá bastante familiar MVVM.  
 
Este patrón junto a otros mas conocidos como [[Modelo Vista Controlador]] (MVC) o [[Modelo Vista Presentador]] (MVP) tiene por objetivo simplificar las tareas de desarrollo y mantenimiento del software escrito con estos a través de la división de ocupaciones, por lo cual alguien que ya haya trabajado previamente con alguno de los patrones previamente mencionados, le parecerá bastante familiar MVVM.  
−
=== Ejemplos del código de MVVM===
+
 
−
Para poder entender el patrón que mejor que un ejemplo simple que nos muestra como hay que iniciar un proyecto con MVVM, el ejemplo consistirá en una tabla que muestre una agenda de contactos. <br>
 
−
Nuestro modelo será como sigue:
 
−
 
−
<pre>
 
−
class Contact{
 
−
public string Name { get; set; }
 
−
public string Email { get; set; }
 
−
public string Address { get; set; }
 
−
public string PhoneNumber { get; set; }
 
−
public string Twitter { get; set; }
 
−
public bool onGPlus { get; set; }
 
−
}
 
−
</pre>
 
−
El siguiente paso será definir el View-Model, para lo cual primero se obtiene la clase delegate command que nos facilita el trabajo con la reducción de código repetitivo:
 
−
 
−
<pre>
 
−
public class DelegateCommand : ICommand
 
−
{
 
−
private readonly Predicate<object> _canExecute;
 
−
private readonly Action<object> _execute;
 
−
public event EventHandler CanExecuteChanged;
 
−
public DelegateCommand(Action<object> execute)
 
−
: this(execute, null)
 
−
{
 
−
}
 
−
public DelegateCommand(Action<object> execute,
 
−
Predicate<object> canExecute)
 
−
{
 
−
_execute = execute;
 
−
_canExecute = canExecute;
 
−
}
 
−
public override bool CanExecute(object parameter)
 
−
{
 
−
if (_canExecute == null)
 
−
{
 
−
return true;
 
−
}
 
−
return _canExecute(parameter);
 
−
}
 
−
public override void Execute(object parameter)
 
−
{
 
−
_execute(parameter);
 
−
}
 
−
public void RaiseCanExecuteChanged()
 
−
{
 
−
if( CanExecuteChanged != null )
 
−
{
 
−
CanExecuteChanged(this, EventArgs.Empty);
 
−
}
 
−
}
 
−
}
 
−
</pre>
 
−
Ya teniendo creada la clase Delegate Command, creamos otra clase llamada ContactViewModel que sera como sigue:
 
−
 
−
<pre>
 
−
class ContactViewModel : INotifyPropertyChanged
 
−
{
 
−
private ObservableCollection<Contact> _Contacts;
 
−
public ObservableCollection<Contact> Contacts
 
−
{
 
−
get
 
−
{
 
−
return _Contacts;
 
−
}
 
−
set
 
−
{
 
−
_Contacts = value;
 
−
NotifyPropertyChanged("Contacts");
 
−
}
 
−
}
 
−
public ContactViewModel()
 
−
{
 
−
_Contacts = new ObservableCollection<Contact>();
 
−
_Contacts.Add( new Contact() { Name = "Andiria", Address= "Calle Z", Email = "andiria100@.ltu.sld.cu"
 
−
, PhoneNumber = "(591) 764215888", Twitter = "@sisandy", onGPlus=true });
 
−
_Contacts.Add(new Contact() { Name = "Fernanda", Address = "Calle X", Email = "fernanda100@.ltu.sld.cu"
 
−
, PhoneNumber = "(591) 764215889", Twitter = "", onGPlus = false });
 
−
_Contacts.Add(new Contact() { Name = "Nataly", Address = "Calle Z", Email = "naty100@.ltu.sld.cu"
 
−
, PhoneNumber = "(591) 764215810", Twitter = "", onGPlus = false });
 
−
_Contacts.Add(new Contact() { Name = "Francisca", Address = "Calle W", Email = "fran100@.ltu.sld.cu"
 
−
, PhoneNumber = "(591) 764215811", Twitter = "", onGPlus = true });
 
−
_Contacts.Add(new Contact() { Name = "Fabiana", Address = "Calle W", Email = "fab100@.ltu.sld.cu"
 
−
, PhoneNumber = "(591) 764215811", Twitter = "", onGPlus = true });
 
−
AddContactCommand = new DelegateCommand(AddContact_Execute, AddContact_CanExecute);
 
−
}
 
−
public event PropertyChangedEventHandler PropertyChanged;
 
−
private void NotifyPropertyChanged(string info)
 
−
{
 
−
PropertyChanged(this, new PropertyChangedEventArgs(info));
 
−
}
 
−
public DelegateCommand AddContactCommand
 
−
{
 
−
get;
 
−
private set;
 
−
}
 
−
void AddContact_Execute(object parameters)
 
−
{
 
−
Contacts.Add(new Contact() { Name = "Test1", Address = "X", Email = "X", PhoneNumber = "X", Twitter = "X" });
 
−
}
 
−
bool AddContact_CanExecute(object parameters)
 
−
{
 
−
return true;
 
−
}
 
−
}
 
−
</pre>
 
 
== Véase también ==
 
== Véase también ==
 
#[[Patrones_de_Asignación_de_Responsabilidades|Patrones de Asignación de Responsabilidades (GRASP)]]<br>
 
#[[Patrones_de_Asignación_de_Responsabilidades|Patrones de Asignación de Responsabilidades (GRASP)]]<br>

Revisión del 11:45 31 oct 2012

Modelo Vista VistaModelo
Información sobre la plantilla
Model mvvm.jpg
Diagrama del patrón de Arquitectura de Software, Modelo Vista VistaModelo (MVVM)
CreadorJohn Gossman
Diseñado porMartin Fowler
Lanzamiento inicial2005
Modelo Vista VistaModelo (MVVM). Es un patrón arquitectónico usado en la ingeniería de software de Microsoft que se originó como una especialización del patrón de presentación de diseño modelo introducido por Martin Fowler.

En gran parte basado en el patrón Modelo Vista Controlador (MVC), MVVM está dirigido amodernas plataformas de desarrollode interfaz de usuario que soportanprogramación orientada a eventos, como HTML5, Windows Presentation Foundation (WPF), Silverlight y el Framework ZK.

Historia

El patron Model - View - ViewModel fue concebido por John Gossman allá por el año 2005 en un post de su blog titulado "Introduction to Model/View/ViewModel pattern for building WPF apps", siendo este una adaptación del patrón Presentation Model propuesto por Martin Fowlers para tecnologías .NET como XAML(como se conoce ahora al conjunto de herramientas para desarrollar en Windows 8), WPF y Silverlight.

Descripción

Model El modelo, dentro de MVVM es el encargado de representar el modelo del negocio, proveyendo de esta manera la base necesaria para la manipulación de los datos de la aplicación, además parte del modelo se lo puede usar como clases POCO (Plain Old CLR Objects) para poder usarlas con Entity Framework Code First o algún otro ORM. Cabe resaltar que en el modelo, no debería de existir ninguna lógica de negocio o código que afecte a como se visualizan sus datos en pantalla.

View La vista es la parte encargada de la parte visual de nuestra aplicación, no teniéndose que ocupar en ningún momento en el manejo de datos. En MVVM la vista tiene un rol activo, esto significa que en algún momento la vista recibirá o manejara algún evento (Clic en un botón, alguna tecla presionada, etc.) y tendrá que comunicarse con el modelo, para poder cumplir el requerimiento.

ViewModel El ViewModel (modelo de vista en español) es el encargado de ser la capa intermedia entre el modelo y la vista, procesando todas las peticiones que tenga la vista hacia el modelo, además de tener que ocuparse de manejar las reglas del negocio, la comunicación con aplicaciones externas o consumir datos desde alguna fuente (Bases de Datos, Web Services, Sensores, etc.).

Ventajas de utilizar MVVM

Este patrón junto a otros mas conocidos como Modelo Vista Controlador (MVC) o Modelo Vista Presentador (MVP) tiene por objetivo simplificar las tareas de desarrollo y mantenimiento del software escrito con estos a través de la división de ocupaciones, por lo cual alguien que ya haya trabajado previamente con alguno de los patrones previamente mencionados, le parecerá bastante familiar MVVM.

Véase también

  1. Patrones de Asignación de Responsabilidades (GRASP)
  2. Patrones de diseño y arquitectura
  3. Modelo Vista Controlador

Fuentes

Enlaces Externos

Obtenido de «https://www.ecured.cu/index.php?title=Modelo_Vista_Vista_Modelo&oldid=1714085»