Patron Modelo Vista Modelo de Vista MVVM Explicado Maromas Digitales PDF

09/05/13
Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales
Portada
Artculos Por Autor
Acerca
Contactar
Buscar
Buscar
Usando MEF en vez de PRISM en Silverlight Parte 2 de 2: Administracin de Regiones Lanzamiento de Expression Studio 4:
Blend, Web, Encoder, Design
Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado

Publicado el 28 de Mayo, 2010, en Silverlight, por David Mora
Traduccin aproximada del artculo Model-View-ViewModel (MVVM) Explained publicado en ingls por Jeremy Likness el
14 de abril del 2010 en su blog C#er:Image.
El propsito de este artculo es dar una introduccin al patrn Modelo-Vista-Modelo de Vista (Model-View-ViewModel en
ingls y abreviado como MVVM). Aunque he participado en numerosas discusiones en lnea sobre el tema, me parece que
los que estn principiando encuentran poco material disponible y tienen que vadear entre mltiples recursos
contradictorios antes de poder usar el patrn en su cdigo. Mi idea no es declarar dogmas, sino ms bien agrupar varios
conceptos en solo artculo con el fin hacer ms fcil la tarea de entender y apreciar el valor de dicho patrn. MVVM es
mucho ms simple de lo algunos lo hacen parecer.
Por qu debera interesarme el MVVM?

Qu razn hay, como desarrolladores, para siquiera poner atencin al Modelo-Vista-Modelo de Vista? El patrn aporta
varios beneficios tanto a WPF como a Silverlight. Antes de continuar, vale preguntarse:
Necesito compartir mi proyecto con un diseador y tener la flexibilidad de que ambos aspectos de diseo y
desarrollo se lleven a cabo casi simultneamente?
Requiero pruebas unitarias comprensivas para mis soluciones?
Es importante para m el tener componentes reutilizables tanto dentro de un proyecto como a travs de mi
organizacin?
Deseara yo tener mayor flexibilidad para poder cambiar la interfase al usuario en una aplicacin sin tener que
reorganizar su lgica?
Una respuesta afirmativa a cualquiera de estas preguntas indica que es buena idea investigar el MVVM. Estos son slo
algunos de los beneficios que puede otorgarle a sus proyectos.
Me asombran algunos de los dilogos que a veces encuentro en la red. Argumentos como MVVM slo tiene sentido en
interfaces grficas extremadamente complejas o MVVM conlleva demasiado esfuerzo y es excesivo para aplicaciones
pequeas. El colmo es escuchar que MVVM no es adaptable. En mi opinin, declaraciones como stas se refieren a ideas
preconcebidas o implementaciones especficas de MVVM y no al patrn en s. Dicho de otra forma, si toma horas
ensamblar una aplicacin usando MVVM, entonces algo no se est haciendo bien. Si la aplicacin no es flexible, la culpa no
es del modelo, sino de la forma en la que se le usa. Por ejemplo, sin importar el patrn usado, sera ridculo tratar de
maromasdigitales.net/2010/05/patron-mvvm-explicado/
1/28
09/05/13
enlazar 100 000 artculos a un control ListBox.

As que, antes de continuar, una pequea aclaracin: en vez de presentarlo como una verdad absoluta, lo que voy a hacer es
explicar la forma en la que yo veo MVVM. Los animo a que compartan sus puntos de vista y experiencias en rea de
comentarios. Si les parece que algo no es correcto, djenmelo saber y tratar de mantener este artculo actualizado.
MVVM a grandes rasgos

Examinemos las partes principales de MVVM, empezando con un fundamento esencial para toda aplicacin: los datos.
Estos son contenidos en el modelo.
El Modelo
El modelo representa los datos o informacin con la que trabajamos y por eso me gusta llamarlo
el objeto del dominio. Un ejemplo de modelo puede ser un contacto (con su nombre, nmero de
telfono, direccin y dems) o la descripcin de un punto de publicacin para un medio
audiovisual transmitido en vivo.
La clave para recordar el modelo es que contiene la informacin, pero no las acciones o servicios
que la manipulan. No es responsable de darle forma para que se vea bien en la pantalla, o de
obtener una lista de elementos de un servidor remoto (de hecho, en tal lista cada elemento sera
a su vez un modelo). La lgica de la aplicacin o reglas empresariales son generalmente
mantenidas en clases separadas del modelo y actan en l. Aunque no siempre es cierto, a veces
el modelo puede validar la informacin.
No es fcil mantener el modelo ntido, especialmente al representar entidades del mundo real.
Por ejemplo, el registro de un contacto puede que incluya la fecha en que fue modificado por
ltima vez junto con la identidad de quien hizo la modificacin (para efectos de auditora), dems de identificador nico
(usado en la base de datos o similar). La fecha de modificacin no tiene ninguna conexin con el contacto en la vida real,
pero es un efecto secundario asociado con la forma en la utilizamos, le damos seguimiento, y la almacenamos en el
sistema.
Veamos, por ejemplo,un posible modelo para mantener informacin sobre un contacto:
namespace MVVMExample
{
public class ContactModel : INotifyPropertyChanged
{
private string _firstName;
public string FirstName
{
get { return _firstName; }
set
{
_firstName = value;
RaisePropertyChanged("FirstName");
RaisePropertyChanged("FullName");
}
}
2/28
09/05/13
private string _lastName;

public string LastName
{
get { return _lastName; }
set
{
_lastName = value;
RaisePropertyChanged("LastName");
RaisePropertyChanged("FullName");
}
}
public string FullName
{
get { return string.Format("{0} {1}",
FirstName,
LastName); }
}
private string _phoneNumber;
public string PhoneNumber
{
get { return _phoneNumber; }
set
{
_phoneNumber = value;
RaisePropertyChanged("PhoneNumber");
}
}
protected void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this,
new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public override bool Equals(object obj)
{
return obj is ContactModel &&
((ContactModel) obj).FullName.Equals(FullName);
}
public override int GetHashCode()
{
return FullName.GetHashCode();
}
}
3/28
09/05/13
La Vista
La vista es la parte con la que estamos ms familiarizados y la que ve el
usuario. Su papel es representar la informacin, tomndose a veces ciertas
libertades con el fin de hacerla ms clara o presentable. Por ejemplo, una
fecha podra ser representada en el modelo como el nmero de segundos
contados desde la medianoche del primero de enero de 1970 (Tiempo
Unix). Sin embargo, el nmero es presentado al usuario en forma de da, mes
y ao en su zona horaria local. Una vista puede tambin contener ciertos
comportamientos, como el aceptar la entrada de datos. La vista se encarga
de esta faceta (teclas presionadas, movimientos del ratn, gestos en una
pantalla tctil, y as por el estilo) que eventualmente ejerce influencia en las
propiedades del modelo.
En MVVM la vista es activa. A diferencia de una vista pasiva sin conocimiento del modelo, y bajo el manejo total de un
controlador o presentador, la vista en MVVM contiene comportamientos, eventos y enlaces a datos que, hasta cierto punto,
necesitan saber sobre el modelo subyacente y el modelo de vista. Aunque tales eventos y comportamientos son asociados
a propiedades, mtodos y comandos, la vista es an responsable de manejar sus propios eventos y no pasa esta tarea al
modelo de vista.
Algo digno de recordar sobre la vista es que no es responsable de llevar cuenta de su estado. El modelo de vista se
encarga de ello y mantiene la vista al tanto de los cambios.
La siguiente es una vista de muestra expresada en XAML:
<UserControl x:Class="MVVMExample.DetailView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot"
Background="White"
DataContext="{Binding CurrentContact}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="Name:"
HorizontalAlignment="Right"
Margin="5"/>
<TextBlock Text="{Binding FullName}"
HorizontalAlignment="Left"
Margin="5"
Grid.Column="1"/>
<TextBlock Text="Phone:"
HorizontalAlignment="Right"
Margin="5"
Grid.Row="1"/>
<TextBlock Text="{Binding PhoneNumber}"
4/28
09/05/13

HorizontalAlignment="Left"
Margin="5"
Grid.Row="1"
Grid.Column="1"/>
</Grid>
</UserControl>
Noten que los diferentes enlaces son los puntos de integracin o sincronizacin con el modelo de vista.
El modelo de vista (Nuestro controlador o presentador)

El modelo de vista introduce el concepto de Separacin de la Presentacin, es decir,
mantiene al modelo separado y protegido de los minuciosos detalles de la vista. Por
eso es que el modelo de vista es la pieza clave del tro. Esta separacin permite que
el modelo se limite a contener los datos, en vez de verse obligado a saber la forma
en que se presenta una fecha al usuario y tener que hacer la conversin de formato.
De igual manera, la vista slo tiene que presentar la fecha. El controlador trabaja
como intermediario entre ambos, recibiendo informacin de la vista e insertndola
en el modelo, o actuando con un servidor para obtener datos del modelo y luego
convertirlos en propiedades que pueden ser usadas en la vista.
El modelo de vista tambin hace disponibles mtodos, comandos y otros puntos de acceso que ayudan a mantener el
estado de la vista, manipular el modelo en respuesta a acciones de la vista y disparar eventos en la misma.
Si bien ya haba estado evolucionando entre bastidores por bastante tiempo, John Gossman introdujo el MVVM al pblico
en general en un artculo de su blog de Microsoft en el 2005 tratando sobre Avalon (el sobrenombre para Windows
Presentation Foundation, o WPF). El artculo, titulado Introduction to Model/View/ViewModel pattern for building WPF
Apps gener un gran revuelo a juzgar por los comentarios de los que trataban de comprenderlo.
En ocasiones he escuchado al MVVM descrito como una implementacin del Patrn de Modelo de Presentacin diseada
especficamente para QPF (y posteriormente Silverlight).
Los ejemplos del patrn generalmente enfatizan el uso de XAML para definir la vista y enlaces de datos para los comandos
y propiedades. Tales detalles no son intrnsecos del patrn sino ms bien detalles de su implementacin. Por eso es que
sealo el enlace a datos con un color diferente:
5/28
09/05/13
Abajo presento un ejemplo de un posible modelo de vista donde hemos creado una clase BaseINPC (siglas en ingls para
INotifyPropertyChanged) proveyendo un mtodo que facilita generar el evento de notificacin cuando se altera alguna de
las propiedades.
{
public class ContactViewModel : BaseINPC
{
public ContactViewModel()
{
Contacts = new ObservableCollection<ContactModel>();
Service = new Service();
Service.GetContacts(_PopulateContacts);
Delete = new DeleteCommand(
Service,
()=>CanDelete,
contact =>
{
CurrentContact = null;
Service.GetContacts(_PopulateContacts);
6/28
09/05/13

});
}
private void _PopulateContacts(
IEnumerable>ContactModel> contacts)
{
Contacts.Clear();
foreach(var contact in contacts)
{
Contacts.Add(contact);
}
}
public IService Service { get; set; }
public bool CanDelete
{
get { return _currentContact != null; }
}
public ObservableCollection<ContactModel> Contacts
{ get; set; }
public DeleteCommand Delete { get; set; }
private ContactModel _currentContact;
public ContactModel CurrentContact
{
get { return _currentContact; }
set
{
_currentContact = value;
RaisePropertyChanged("CurrentContact");
RaisePropertyChanged("CanDelete");
Delete.RaiseCanExecuteChanged();
}
}
}
}
Como se puede notar, este modelo de vista fue diseado para administrar una lista de contactos, incorporando un
comando para eliminarlos y una seal indicando se se permite borrar datos (por lo tanto, manteniendo el estado de la
vista). Generalmente la bandera sera parte del comando, pero este ejemplo est basado en Silverlight 3 que no es
compatible con el enlace de comandos, y yo quise demostrar una solucin simple sin recurrir a una infraestructura excesiva.
(Les recomiendo ver este vdeo que demuestra lo fcil que es convertir el ejemplo de Silverlight 3 a 4 y usar el sistema
nativo de comandos). El modelo de vista en el listado anterior hace una referencia concreta al servicio.
Para aplicaciones de mayor escala prefiero conectar la referencia de manera externa o usando una infraestructura de
inyeccin de dependencias. Lo chvere es la flexibilidad de construirlo de esta manera inicialmente y luego reorganizarlo
segn se necesitede nuevo, como se puede ver en el ejemplo, no es estrictamente necesario usar una infraestructura o
biblioteca externa para implementar el patrn. En nuestro caso, el modelo de vista va y obtiene la lista de contactos
inmediatamente. Por el momento es una lista predeterminada con mis detalles y los de alguien un poco ms conocido. Por
si acaso, los nmeros de telfono son falsos.
7/28
09/05/13
Seamos un poco ms especficos y veamos como podramos implementar esto en una aplicacin de muestra. Una vista de
rayos X de su configuracin en MVVM se vera as:
Qu podemos discernir de este vistazo?

Primero, IConfig representa un servicio de configuracin (en un lector de mensajes de la red podra contener informacin
sobre la cuenta y los suministros que son obtenidos), mientras que IService es un servicio especfico, tal vez la interfase que
trae los suministros de las fuentes RSS al lector.
La vista y el modelo de vista

La vista y el modelo de vista se comunican mediante enlaces de datos, mtodos, propiedades, eventos y mensajes
El modelo de vista expone propiedades (tal como informacin sobre el estado de la vista, p.ej. el indicador de
ocupado) y comandos adems de modelos
La vista se encarga de sus propios eventos relacionados con la interfase al usuario y los pasa al modelo de vista
mediante comandos
Los modelos y propiedades en el modelo de vista son actualizados desde la vista usando enlaces de datos
bidireccionales
Hay dos mecanismos que son frecuentemente usados en la implementacin del patrn, gatillos o disparadores
(especialmente los relacionados con datos) en WPF, y el Controlador de Estados Visuales (Visual State Manager o VSM) en
Silverlight. Ambos ayudan por medio de unir los comportamientos de la interfase al usuario con los modelos subyacentes.
El VSM debera ser la opcin principal para coordinar transiciones y animaciones en Silverlight. Ms informacin sobre VSM
aqu.
El modelo de vista y el modelo

El modelo de vista es completamente responsable del modelo en este escenario.
8/28
09/05/13
Por dicha no est solo:

El modelo de vista puede que exponga el modelo directamente o mediante propiedades relacionadas para uso en
enlaces de datos
El modelo de vista puede contener interfases a servicios, datos de configuracin y similares, con el fin de obtener y
manipular las propiedades que ofrece
La gallina o el huevo?
Es posible que hayan escuchado controversias sobre quin lleva la delantera, la vista o el modelo de vista. A m me parece
que la mayora de desarrolladores estaran de acuerdo con que cada vista ha de tener solamente un modelo de vista. No
hay necesidad de asociarla con mltiples modelos de vista. Con esta separacin de responsabilidades en mente, tiene
sentido que si uno tiene un control para contactos enlazado a un modelo de vista para contactos, y un control con
informacin sobre la compaa atado a un modelo de vista que provee esta informacin, ambos controles son vistas
separadas en vez de una sola con dos modelos de vista.
Una vista puede contener otras vistas, cada una con sus propio modelo de vista. Los modelos de vista pueden contener
otros modelos de vista cuando sea necesario (no obstante, es comn ver a algunos consolidando sus modelos de vista
cuando en realidad lo que necesitan es un modo de comunicaciones entre ellos).
Una vista debe tener un nico modelo de vista, pero este ltimo puede ser usado por varias vistas (por ejemplo imaginen
un asistente (Wizard) con tres vistas pero un slo modelo de vista que controla el proceso).
La vista como elemento principal

En este enfoque la vista es la que se encarga de crear o importar el modelo de vista. Generalmente usa el modelo de vista
como un recurso al que se enlaza ya sea explcitamente, mediante el patrn de localizacin, o mediante insercin usando
MEF, Unity o algo parecido. Es comn usar esta tcnica en el manejo de vistas y sus modelos de vista. Yo he publicado
algunos artculos sobre el tema:
ViewModel Binding with MEF
MVVM Composition in Silverlight with Prism
Prism, MEF, and MVVM
El ejemplo incluido con este artculo usa este mtodo. La vista es creada y luego el modelo de vista es asociado. En el
objeto Application se ve de esta manera:
private void Application_Startup(object sender,

StartupEventArgs e)
{
var shell = new MainPage();
shell.LayoutRoot.DataContext = new ContactViewModel();
RootVisual = shell;
}
He mantenido el ejemplo sencillo mediante evitar el uso de infraestructuras auxiliares que ensamblen las interfases y sus
implementaciones.
El modelo de vista como elemento principal

9/28
09/05/13
Otra forma de conectar los componentes es mediante hacer al modelo de vista responsable de la creacin de la vista y los
enlaces necesarios. Para un ejemplo de esta tcnica pueden ver la presentacin de Rob Eisenberg en MIX, Build your own
MVVM Framework, en la que crea una infraestructura basada en convenciones de uso.
La moraleja es que hay ms de una manera de matarle las pulgas al perro.
Una infraestructura bsica para MVVM

En mi opinin, una infraestructura para MVVM bsica requiere slo dos cosas:
1. Una clase basada en DependencyObject o que implemente INotifyPropertyChanged de manera que sea utilizable en
el enlace de datos, y
2. Algn tipo de mecanismo para comandos
Silverlight 3 cumple hasta cierto grado con el segundo requisito al proveer la interfase ICommand. Sin embargo, ahora en
Silverlight 4 tenemos algo ms completo: los comandos permiten enlazar eventos en la vista al modelo de vista. Es un
detalle de implementacin, pero facilita el uso del patrn MVVM.
Recuerden que Blend provee un surtido juego de herramientas para enlaces de datos y uso de comportamientos en su kit
de desarrollo. Pueden ver mi vdeo, MVVM with MEF in Silverlight, para obtener una idea de lo fcil que es implementar el
patrn MVVM an sin el uso de una infraestructura auxiliar. El artculo Usando MEF en vez de PRISM demuestra cmo
pueden crear sus propios comandos.
En el ejemplo he creado una clase base que se encarga de los eventos generados por cambios en propiedades:
{
public abstract class BaseINPC : INotifyPropertyChanged
{
protected void RaisePropertyChanged(string propertyName)
{
var handler = PropertyChanged;
{
handler(this,
new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
Tambin he implementado un comando. En la mayora de los casos uno usara un tipo ms general de comando que sea
til en situaciones variadas, pero con el fin de mantenerlo simple, el comando demostrado abajo se limita a la funcin de
borrado. En mi caso estoy usando un cuadro de dilogo para confirmar la eliminacin. En caso de necesitar algo ms
elegante, como un ventana de tipo ChildWindow, pueden leer los escenarios que describo ms adelante para entender
mejor cmo incorporar el cuadro de dilogo como un servicio dentro del patrn MVVM.
10/28
09/05/13
{
public class DeleteCommand : ICommand
{
private readonly IService _service;
private readonly Func<bool> _canExecute;
private readonly Action<ContactModel> _deleted;
public DeleteCommand(IService service,
Func<bool> canExecute,
Action<ContactModel> deleted)
{
_service = service;
_canExecute = canExecute;
_deleted = deleted;
}
public bool CanExecute(object parameter)
{
return _canExecute();
}
public void Execute(object parameter)
{
if (CanExecute(parameter))
{
var contact = parameter as ContactModel;
if (contact != null)
{
var result = MessageBox.Show(
"Are you sure you wish to delete the contact?",
"Confirm Delete",
MessageBoxButton.OKCancel);
if (result.Equals(MessageBoxResult.OK))
{
_service.DeleteContact(contact);
if (_deleted != null)
{
_deleted(contact);
}
}
}
}
}
public void RaiseCanExecuteChanged()
{
var handler = CanExecuteChanged;
{
handler(this, EventArgs.Empty);
}
}
11/28
09/05/13
public event EventHandler CanExecuteChanged;

}
}
Este comando en particular usa un delegado al que llama cuando ha terminado su trabajo, limitndolo a un nico
suscriptor para el evento. Un delegado o evento mltiple es necesario si que quiere que varios modelos se puedan suscribir.
En Silverlight 4 es posible simplemente enlazar un botn al comando usando el atributo Command. El ejemplo arriba est
escrito en Silverlight 3 que no provee tal facilidad. Para crear el enlace us un disparador (como antes, especfico a este
proyecto y con el fin de simplificarlo) para invocar el comando, de manera que sea fcil enlazarlo al XAML.
Los ejemplos mostrados ac son parte de la aplicacin adjunta al artculo. Tal aplicacin es simple y contiene un nico
servicio y un modelo de vista con una base de datos simulada. Dos vistas se enlazan al mismo modelo de vista de manera
que se puede hacer clic en un contacto para ver sus detalles. Tambin es posible borrar contactos.
Recibo comentarios con cierta frecuencia diciendo que los ejemplos en el blog son muy simplistas. Este es lo
suficientemente complejo como para demostrar una aplicacin completa sin depender en infraestructuras adicionales,
pero no muestra pginas y tipos de vista mltiples. La razn es simple: siendo un asesor y desarrollador independiente,
constantemente estoy escribiendo estas aplicaciones y bibliotecas para clientes, y no tengo la libertad de compartir tal
cdigo. Adems, aunque me es posible crear ejemplos para los artculos, simplemente no tengo tiempo de construir algo
ms complejo que trabaje bien. Es algo que de fijo me gustara lograr, pero simplemente no es prctico si quiero publicar
este artculo en un tiempo razonable.
El cdigo fuente para el ejemplo puede ser descargado aqu.
Tambin se le puede ver en accin abajo mediante escoger uno de los nombres y luego pulsar el botn Borrar. (La ligera
pausa durante la carga inicial y en la actualizacin del control luego de eliminar un contacto es simulada.)
La manera ms fcil de aprender el patrn es por medio de observar la implementacin de una aplicacin completa. Yo
demuestro el proceso en MVVM with MEF in Silverlight. En el vdeo construyo algunos modelos de vista sencillos y muestro
una vista que es cambiada de forma dinmica dependiendo de la seleccin del usuario y uso MEF para hacer todas la
conexiones. Un caso ms complejo es introducido en la segunda parte.
Pero, qu hay de aplicaciones empresariales ms complejas las que tienen ms que un solo botn, con mltiples vistas y
complicadas funciones y algoritmos? Eso va ms all de lo que se podra cubrir en detalle en este artculo; sin embargo,
quisiera discutir algunos problemas comunes y cmo los solucionara yo usando MVVM.
12/28
09/05/13
Escenarios comunes en MVVM

Por experiencia propia, la idea de enlazar comandos y modelos o propiedades es fcil de entender y aplicar. Son ciertas
situaciones especficas, como por ejemplo mostrar un cuadro de dilogo o activar una animacin que se prestan a
confusin. Cmo se pueden resolver esas dificultades comunes?
Lista con Seleccin

Cmo se puede adaptar el caso de una lista en la que se pueden seleccionar uno o ms artculos usando MVVM? Resulta
que es bastante fcil. Imaginen un caso donde se tiene un ComboBox con una lista de nombres, y otra vista en la misma
pgina que muestra los detalles de la persona cuando es seleccionada. Si uso MEF para unir las dependencias (a la vez
mostrando una tcnica diferente a la usada en la aplicacin de ejemplo), el modelo de vista podra ser de la siguiente
manera:
public class ContactViewModel : BaseViewModel,

IPartImportsSatisfiedNotification
{
[Import]
public IContactService Service { get; set; }
public ContactViewModel()
{
Contacts = new ObservableCollection<Contact>();
}
public ObservableCollection<Contact> Contacts { get; set; }
private Contact _currentContact;
public Contact CurrentContact
{
get { return _currentContact; }
set
{
_currentContact = value;
RaisePropertyChanged("CurrentContact");
}
}
public void OnImportsSatisfied()
{
Service.FetchContacts(list =>
{
foreach(var contact in list)
{
Contacts.Add(contact);
}
CurrentContact = Contacts[0];
});
}
13/28
09/05/13
En este caso, importamos un servicio para obtener contactos, ensamblar la lista y asignar el contacto preseleccionado. El
cuadro desplegable est enlazado a la coleccin Contacts. La clave es que el nombre seleccionado tambin tiene un enlace
(es aqu donde el modelo de vista mantiene el estado):
...
<ComboBox ItemsSource="{Binding Contacts}"
SelectedItem="{Binding
CurrentContact,Mode=TwoWay}"/>
...
Lo que asegura que cada vez que un nombre es seleccionado en la lista, el contacto actual cambia. Recuerdan que
mencion que varias vistas pueden compartir el mismo modelo de vista? En este caso, la vista para los detalles del
contacto puede usar el mismo modelo de vista y crear enlaces con la propiedad CurrentContact.
Navegacin
Otra situacin enfrentada comnmente es la navegacin. Cmo se puede controlar la navegacin en una aplicacin al
estilo MVVM? La mayora de los ejemplos muestran un nico botn en la pantalla y no lidian con aplicaciones compuestas
de varias pginas.
La respuesta corta es que, sin importar el mecanismo usado (ya sea usando un sistema propio, el provisto por Silverlight, el
administrador de regiones de PRISM o una combinacin de todos los anteriores) se deberan ocultar los detalles tras una
interfase. Por medio de usar algo como INavigation o similar la navegacin se torna ajena a MVVM. Cualquiera que sea el
modo escogido, el modelo de vista puede importar INavigation y usar la interfase para ir a otras vistas o generar un evento
de transicin segn sea necesario.
Mi artculo sobre el uso de MEF en lugar de PRISM demuestra cmo hacer esto usando la Infraestructura de Extensibilidad
Administrada. El artculo Auto-discoverable views using a fluent interface trata el uso de asociaciones entre vistas y
regiones, y Dynamic module loading with Prism provee una aplicacin completa como ejemplo usando la infraestructura
de navegacin.
Mdulos dinmicos
Este caso es parecido al anterior. Qu hay de aplicaciones extraordinariamente grandes? En tales situaciones tiene poco
sentido tratar de cargar toda la aplicacin de una sola vez. El men y pantalla principales deben ser visibles de inmediato,
mientras que los dems mdulos se pueden cargar segn sea necesario. El resultado es una reduccin significativa en la
pausa inicial requerida para el arranque de la aplicacin y tambin muestra respeto por el navegador de red y los recursos
de la computadora del usuario, como memoria y ciclos del CPU.
El cargado dinmico no es especfico de MVVM, an as el envo de mensajes entre modelos de vista y entre mdulos es
obviamente importante. En estos casos me parece que es mejor usar infraestructuras como MEF y Prism que proveen
soluciones a problema. Prism tiene mdulos que pueden ser cargados a pedido y MEF ofrece un catlogo de instalacin
que permite cargar archivos XAP de manera dinmica. La solucin de Prism para mensajes a travs de la aplicacin es la
central de eventos (event aggregator). Ofrezco ms informacin sobre las infraestructuras y las soluciones para estos tipos
de problemas en el apndice donde trato sobre las infraestructuras disponibles para uso inmediato.
14/28
09/05/13
Cuadros de dilogo
Un artefacto usado frecuentemente en interfases grficas es el cuadro de dilogo (similar al cuadro de mensajes, pero
esperando una respuesta del usuario). He visto a mucha gente estancarse tratando de implementarlos usando MVVM.
Especialmente al considerar la restriccin en Silverlight de que todo el cdigo debe ser asincrnico.
En mi opinin, la solucin es encapsular el cuadro de dilogo tras una interfase y proveer una funcin de llamada para la
respuesta. El modelo de vista puede importar el cuadro y luego, basado en algn cambio de estado o un comando,
disparar el servicio de dilogo. La llamada de vuelta contiene la respuesta y la vista puede proceder apropiadamente.
Para una explicacin ms completa, pueden leer Simple Dialog Service in Silverlight.
Animaciones
Otro problema comn es cmo activar animaciones o transiciones basadas en cambios en la interfase grfica o en el
servidor.
Hay varias soluciones para el problema. Estos son algunos ejemplos:
El centralizador de estados visuales permite enlazar animaciones a eventos en la interfase grfica sin la intervencin
del modelo de vista. Si es necesario que ste ltimo tenga parte en el asunto, entonces
Los delegados de animacin pueden dar la talla. Necesitan algo ms autnomo? Pueden probar usando
La implementacin del ICommand invertido de nRoute, o
Un infraestructura MVVM de muestra que usa el administrador de estados visuales.
Configuracin y valores globales

Un problema que escucho comnmente es cmo tratar con variables globales e informacin de configuracin. De nuevo,
esto es menos un problema relativo a MVVM y ms una decisin arquitectnica. En la mayora de los casos, se puede hacer
disponible la informacin de configuracin con una interfase (IConfiguration) y luego crear una implementacin que
contenga los valores especficos. Cualquier modelo que requiera dicha informacin no tiene ms que importar la
implementacin, ya sea mediante MEF, Unity, u otro mtodo similar, asegurndose de tener slo una instancia de la clase
(tal vez usando el patrn de Instancia nica, aunque lo ms probable es que sea controlado por el contenedor y no por la
clase misma).
Procesos asincrnicos
Otro punto de confusin con Silverlight es que todas la llamadas al servidor son necesariamente asincrnicas. Esto puede
parecer extrao al construir el modelo de vista: luego de generar la llamada, cmo se puede saber cuando ha sido
completada? Generalmente se hace mediante subscribirse a un evento que es disparado al finalizar el proceso y los
resultados se obtienen mediante datos enlazados. Yo prefiero ocultar la los detalles del manejo de eventos tras una funcin
de tipo Action. El artculo Simplifying Asynchronous Calls in Silverlight using Actions muestra un ejemplo de cmo hacer
esto.
A veces el trabajo es ms elaborado requiriendo mltiples llamadas asincrnicas que se deben ejecutar en secuencia y cada
una debe esperar a que la operacin previa haya terminado. En tal caso, puede ser mejor investigar el uso de mecanismos
que facilitan escribir cdigo para flujos de operaciones consecutivas. Este articulo explica una forma de hacerlo usando corutinas, y este otro describe como usar una excelente infraestructura ya existente que maneja las llamadas manera segura
usando subprocesos, capturando errores, y mucho ms.
15/28
09/05/13
Conjuntos de datos inmensos

Por ltimo, he escuchado aserciones de que MVVM no trabaja bien con grandes bancos de datos. Yo dira ms bien que son
ciertas implementaciones las que presentan tal problema, no el patrn en s. La solucin frecuentemente es paginar los
datos, pero parece que muchos usan un enfoque incorrecto para resolver el problema. Por alguna razn, los desarrolladores
insisten en que la paginacin es una funcin de la base de datos y debe ser aislada en la capa de acceso a datos. El simple
hecho de tener elementos como pgina actual y nmero de pginas en la interfase al usuario da a entender que tal no es
un artefacto de la base de datos, sino que est presente en todas la capas de la aplicacin y debe ser manejado como tal.
En su forma ms bsica, se puede usar una coleccin que crezca a medida que el usuario pasa pginas. Si el conjunto de
datos es pequeo, se puede crear una sola coleccin y mantenerla por completo en el cliente Silverlight, usando un panel
virtual para desplegar la informacin (el problema con algunos paneles es que crean un control para cada elemento en el
conjunto entero de datos, destrozando la eficiencialos paneles virtuales solamente crean los controles necesarios para
llenar la parte visible de la pantalla).
Tecnologas como WCF RIA son compatibles con consultas en LINQ. Este tipo de consultas contienen mtodos de extensin
que permiten tomar nicamente los primeros elementos de una lista en vez de toda la lista de un solo. La infraestructura
tambin provee clases auxiliares como PagedCollectionView para ayudar a filtrar, ordenar y paginar datos.
Lo que MVVM no es
El tema no puede ser cubierto a cabalidad sin considerar lo que MVVM no es.
MVVM no es una infraestructura completa. Es un patrn de diseo y puede que algunas bibliotecas provean facilidades
para su implementacin, pero no es ms que una pieza de la entera solucin para la arquitectura de la aplicacin. MVVM
no est interesado en lo que ocurre en el servidor o la forma en que son implementados los servicios de soporte. En
cambio, y esto es una gran ventaja, su principal trabajo es la separacin de responsabilidades.
En ninguna parte de este artculo van a encontrar la frase MVVM no permite usar cdigo subyacente. El tema es
fuertemente debatido, pero el patrn en s no indica cmo implementar la vista, ya sea con XAML, con cdigo subyacente,
o una combinacin de ambos. Mi sugerencia es que si estn pasando das enteros escribiendo cdigo tan slo para evitar
algo que puede ser resuelto en unos cuantos minutos usando cdigo subyacente, algo est mal.
MVVM no es requerido en WPF o Silverlight. A mi parecer, aplicaciones empresariales, de manejo de datos, o con mltiples
ventanas o formularios, son excelentes candidatos. Por otra parte, juegos, sitios Web de entretenimiento programas de
dibujo, y otros similares no se adaptan muy bien. Deben estar seguros de usar la herramienta apropiada para cada tarea.
MVVM no debera ser un motivo de retraso. Cualquier patrn o infraestructura requiere cierto tiempo de aprendizaje. Hay
que aceptar el hecho de que los desarrolladores tendrn que estudiarlo para poder entenderlo, pero lo que no es
aceptable es que el proceso entero de pronto dure ms de la cuenta y termine atrasando el proyecto. El patrn es til si, en
cambio, acelera el proceso de desarrollo, mejora la estabilidad y rendimiento de la aplicacin, reduce los riesgos del
proyecto, y as por el estilo. Cuando lerdea el desarrollo, introduce problemas, y produce escalofros en los desarrolladores
al or su nombre, puede que sea necesario evaluar la forma en que se est ejecutando.
Conclusin
Ok, ya terminamos! Espero haberles ayudado a ver por qu MVVM es tan poderoso en aplicaciones Silverlight y WPF,
cules son los aspectos principales del patrn, y hasta haber mostrado ejemplos de soluciones a problemas comunes que
puede resolver. Ahora, quisiera conocer sus opiniones y comentarios.
Ir al Apndice A: Orgenes de diversos patrones
Ir al Apndice B: Infraestructuras disponibles
16/28
09/05/13
Mi agradecimiento especial a los siguientes miembros de la comunidad que dedicaron parte de sus ocupados horarios a
revisar y dar sus comentarios y sugerencias preliminares para este artculo (en orden alfabtico):
Glenn Block (Gerente de programa en el departamento de .NET FX), @gblock, Blog
Lauren Bugnion (MVP para Silvelight), @LBugnion, Blog
Corey J. Gaudin. @CoreyGaudin, Blog, Facebook
Robert Kozak, @RobertKozak, Blog
Joe McBride, @XAMLCoder, Blog
Bill Moore, @CodenUX, Website
Joost van Schaik, @localjoost, Blog, LinkedIn
Davide Zordan (MVP para Silverlight), @DavideZordan, Blog
Apndice A: Historia de algunos patrones

Modelo-Vista-Controlador (MVC)
Este patrn fue descrito primero en el contexto de Smalltalk en Xerox en 1979. Si lo desean pueden obtener algunos de los
documentos originales (en formato PDF) aqu.
Modelo-Vista-Presentador (MVP)
El patrn Modelo-Vista-Presentador (PDF) fue introducido en 1996 . Se basa en el MVC pero pone algunas restricciones en
el controlador cuyo nombre fue cambiado a presentador. Esta es su forma generalizada:
17/28
09/05/13
Martin Folwer describe el patrn con dos matices diferentes: El Contolador/Presentador superintendente y la Vista Pasiva.
Microsoft tambin da su propia descripcin del MVP.
Modelo de presentacin
En el 2004 Martin Fowler public su descripcin para el Modelo de Presentacin. El resumen es conciso: Abarca el estado y
comportamiento de la presentacin independientemente de los controles usados en la interfase grfica al usuario. Como
es evidente, MVVM es una forma especializada de este ltimo patrn:
18/28
09/05/13
Apndice B: Infraestructuras o bibliotecas de MVVM disponibles

Ahora que ya tenemos una idea de qu es MVVM, no es necesario reinventarlo. Hay varias bibliotecas ya existentes que
implementan MVVM. Sin ningn orden en particular:
MVVM Light
Este es un recurso muy popular que incluye entre sus facilidades, una clase base pasa modelos de vista, comandos,
mensajera, y platillas de proyectos para comenzar aplicaciones. Es compatible con WPF y Silverlight.
SilverlightFX
El objetivo de esta biblioteca es habilitar la creacin de de interfaces al usuario usando un lenguaje declarativo,
permitiendo una ms fcil separacin entre la vista y el cdigo, y lo hace mediante una biblioteca con slo lo esencial.
Caliburn
Esta biblioteca popular usa la tcnica de comenzar con el modelo de vista y es compatible con WPF y Silverlight. Sin
embargo, este es tan slo un aspecto, puesto que es una muy completa infraestructura para la creacin de aplicaciones.
nRoute
Otra biblioteca MVVM, con la especialidad de usar comandos reversos que permite enlazar comandos a eventos en la vista
a diferencia del modo corriente en que la vista enva comandos al modelo de vista.
19/28
09/05/13
MicroModels
Un biblioteca enfocada a slo lo estrictamente necesario para usar MVVM.
Composite WPF/PRISM
A pesar de que su nombre original es Composite WPF, la infraestructura es compatible con WPF y Silverlight. Y, aunque no
provee implementaciones del patrn MVVM, s contiene guas y recursos para crear aplicaciones compuestas, incluyendo
comandos, centralizacin de eventos, administracin de regiones visuales, y ms.
La lista no es de ningn modo exhaustiva, pero espero que les d una idea del apoyo que la comunidad Cdigo Abierto le
ha dado al patrn MVVM. Tambin les puede ayudar a escoger una biblioteca estable para acelerar el desarrollo de sus
aplicaciones.
Etiquetas asignadas: Jeremy Likness MEF MVVM Silverlight traducciones
21 Respuestas a Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado

1.
Ricardo dice:
27 de Junio, 2010 en 10:39 am
Hola muy interesante tu articulo la verdad muy bien explicado , mira soy un programador de windowsforms y me
estoy educando en esto de el patron MVVM pero me ha costado mucho entender ya en la practica todos los
conceptos me interersa mucho aprender este patron u otro para desarrollar aplicaciones en WPF, he leido sobre
algunos frameworks como caliburn, calcium , que sesupone te ayudan desarrollar bajo este patron pero en mi caso en
vez de eso me revuelvo mas no se si me puedas dar una ayudadita diciendome donde puedo encontrar mas
ejemplos practicos del uso de este patron pues como te digo se meha dificultado mucho gracias !
Responder
David Mora dice:
27 de Junio, 2010 en 10:23 pm
Ricardo,
Gracias por el encomio. Quisiera poder publicar artculos con ms frecuencia pero debido a estar muy
ocupado, se hace difcil. An as, estoy preparando una serie de artculos describiendo el proceso de crear un
aplicacin usando ese patrn. A diferencia otros ejemplos, en este caso es una resea sobre el diseo e
implementacin de una aplicacin real que est siendo usada por el cliente en este momento. Probablemente
tenga varias partes de la serie listas a mediados de Julio.
Desafortunadamente, ejemplos slidos para MVVM son todava escasos. La serie sobre MVVM y MEF de Shawn
Wildermuth provee algunos consejos prcticos. Tambin es buena idea explorar el blog the Jeremy Likness.
Otra persona conocida por su pericia en MVVM es Josh Smith.
Responder
2.
Ricardo dice:
28 de Junio, 2010 en 10:36 am
haa muchas gracias esperare estos articulos con ansiedad la verdad gracias ya que en espaol hay muy poco sobre
este patron y sobre los frameworks ni se diga practicamente no hay nada en espaol aunque eso no debe suponer
20/28
09/05/13
gran problema pero al menos a unos como yo no les caeria mal algo en espaol (mas comodo).
Ahorita me estoy adentrando a el framework MVVM Litght toolkit con C# ( soy un programador de VB.Net asi que me
cuesta algo ). la verdad espero puedas publicar porque se ve que realmente sabes mucho sobre este tema una vez
mas gracias!
Responder
3.
Ricardo dice:
5 de Octubre, 2010 en 10:03 am
hola he seguido estudiando este articulo mas a detalle, nadamas que tengo un problema aun no logro entender estas
lineas de codigo del todo no se si me puedas explicar forman parte de la clase ContactModel.
public override bool Equals(object obj)
63 {
64 return obj is ContactModel &&
65 ((ContactModel) obj).FullName.Equals(FullName);
66 }
67
68 public override int GetHashCode()
69 {
70 return FullName.GetHashCode();
71 }
Responder
David Mora dice:
5 de Octubre, 2010 en 4:24 pm
Ricardo,
Tu pregunta es un tanto general, por lo que te ofrezco una respuesta general. Disculpa si explico conceptos que
ya conoces.
En .NET todas las clases tienen un antepasado comn: Object. Tal descendencia es implcita, por lo que no es
necesario declararla. Eso quiere decir que ContactModel deriva de Object y hereda ciertos comportamientos de
esa clase fundamental. Una de las funciones heredadas es Equals. En su forma fundamental, el mtodo compara
referencias. Es decir, Equals es cierto cuando ambas referencias apuntan al mismo objeto.
En el caso de ContactModel, el autor original (Jeremy) ha decidido que la igualdad debe ser evaluada a un
nivel conceptual: dos contactos son el mismo si su nombre completo es idntico. Esto es debido a que se
puede dar la situacin de tener dos objetos completamente separados que contengan el mismo nombre y la
funcin heredada de Object dira que son diferentes, lo cual no es cierto (por lo menos dentro de la reglas
establecidas por esta aplicacin).
Un consecuencia de alterar el comportamiento de Equals, es que tambin se necesita modificar GetHashCode.
Esta funcin devuelve un valor cuasi-nico para cada objeto y .NET lo usa para crear tablas de referencia tanto
internas como explcitas. El HashCode tambin es usado para evaluar la igualdad de objetos. En el caso
anterior, el autor ha tomado ventaja de que el cdigo hash de una cadena de caracteres es calculado a partir
de la secuencia particular de la cadena. De esa manera, el valor obtenido es el mismo para cadenas idnticas.
Como puedes ver, nuevamente el valor depende del nombre completo del contacto.
Para ms detalles puedes consultar las entradas para Object.Equals y Object.GetHashCode en MSDN.
En el artculo, el cdigo no hace uso explcito de este comportamiento alterado, sin embargo, la regla sera til
una vez que las funciones de aadido, bsqueda y borrado de contactos sean ms sofisticadas.
Espero que la respuesta te haya ayudado. Si no lo hizo o si todava tienes dudas, por favor djame saber.
21/28
09/05/13
Responder
4.
Ricardo dice:
5 de Octubre, 2010 en 8:14 pm
Gracias que pena me da la verdad, al parecer me falta bastante por aprender, mira como te comentaba en respuestas
anteriores soy un programador de VB y la verdad C# me cuesta (mas bien no me gusta) estoy revisando el codigo de
ejemplo que adjuntaste en este articulo y la verdad me he quedado impresionado pues llevo ya varios meses
estudiando este modelo de programacion y aun no puedo atar los cabos sueltos, se que para este tipo de modelos
se requiere cierto nivel de conocimientos pero hay algunas cosas que aun no logro comprender por ejemplo . en el
codigo fuente vienen clases como el IService , Service,que aun no tengo muy claro cual es el papel que juegan,
ademas los Commands entiendo el concepto pero aun tengo problemas en su aplicacion perdona que te moleste
con conceptos tal vez muy triviales o tontos pero la verdad este es el unico lugar que he encontrado donde se han
respondido muchas de mis dudas.
Mira en estos meses desarrolle una humilde aplicacion en WPF tratando de aplicar este modelo pero al final me di
cuenta que lo hice todo mal ya que no pude desacoplar del todo las capas te presento un video de mi aplicacion,
http://www.youtube.com/watch?v=K8UULFUCIgQ
gracias! y espero me puedas seguir orientando.
Responder
5.
Carlos dice:
10 de Noviembre, 2010 en 2:21 pm
Hola, me parece muy bueno tu articulo, mi consulta es que si para cada modelo debo crear un view model?, ya que
en mi aplicacion tengo varias tablas (unas 20) y debo crear una ventana de mantenimiento para cada una, entonces
trabajar con mvvm me lleva a crear 1 clase modelo por cada tabla mas 1 clase view model mas la vista esto es 3
clases por cada una, hay alguna manera de reducir esto o de acelerar el proceso? ya que las tablas tienen diferentes
campos y esto se me esta volviendo un problema, gracias
Responder
David Mora dice:
10 de Noviembre, 2010 en 7:19 pm
Carlos,
Algo que yo he hallado importante es tener en mente que se trata de un patrn y no una receta. La diferencia
es algo sutil, pero significativa. Una receta te da los pasos a seguir y desviarse del procedimiento tiende a ser
riesgoso. Un patrn, por lo menos en nuestro contexto, se trata de una estrategia a grandes rasgos, sin detalles
muy definidos. Uno tiene que rellenar donde falte. Es en parte por esto que los patrones son un poco difciles
de digerir puesto que son necesariamente ambiguos. Otra consecuencia es que cada caso tiende a ser
diferente, incluso si se aplica el mismo patrn al dos soluciones diferentes, la arquitectura resultante casi de
seguro ser distinta en cada caso.
El MVVM no dicta una correspondencia uno a uno entre modelo, modelo de vista y vista. No sera prctico
puesto que los tres se desenvuelven en entornos diferentes. Te digo de primeras que es comn ver un modelo
de vista por cada vista, pero tampoco es una regla. La misma variedad se ven el caso del modelo. Algunos
consideran cada tabla, consulta o clase como un modelo. Otros agrupan diferentes entidades en modelos
conceptuales. Puesto que yo tiendo a disear usando la filosofa del DDD y BDD, mis modelos son ms del
segundo tipo.
Bueno, luego de esta hablada, mi sugerencia es que examines tu aplicacin desde el punto de vista de la
interfase grfica. Si tienes por ejemplo pginas o pantallas en las que muestras varias tablas asociadas por un
concepto o tal vez una relacin de maestro/detalle, las diferentes reas de presentacin pueden ser vistas (me
refiero a vista en MVVM) y usar un nico modelo de vista que les sirva de puente al modelo. De hecho, usar un
modelo de vista comn entre varias vistas es una estrategia a veces usada para proveer comunicaciones entre
la vistas (otra forma es mediante mensajera).
22/28
09/05/13
Como mencionas, el crecimiento desmedido en el nmero de clases puede ser fuente de muchos dolores de
cabeza en un futuro, y complica a veces el proyecto de manera innecesaria. Si tienes forma de combinar la
interaccin de varios modelos usando un nico modelo de vista, entonces adelante! No obstante evita
acumular la llamada deuda tcnica que se produce al desviarse de los principios SOLID.
Finalmente, aplicaciones de gestin en la que se provee una interfase grfica para administrar una base de
datos tienden a ser un caso fronterizo. Es decir no se adaptan al modelo general promedio (por falta de
mejor expresin) de una aplicacin RIA. Esto debido a que las tablas son vistas fuera de contexto. En tal caso, el
gran nmero de clases resultantes puede ser tedioso, pero no necesariamente nocivo puesto que no hay que
mantener relaciones complejas entre las entidades.
Responder
6. TJM: WPF, MVVM y Prism | Synaptic Way dice:
8 de Diciembre, 2010 en 1:58 pm
[...] La traduccin de Maromas Digital del artculo de Jeremy Likness aqu. [...]
Responder
7. Introduccin a Modelo-Vista-Modelo de Vista (MVVM) El mundo magico de silverlight dice:
5 de Enero, 2011 en 6:56 am
[...] [...]
Responder
8.
Christian Asta dice:

8 de Enero, 2011 en 2:15 pm
Buenas. Muy interesante tu artculo. Estaba leyendolo pero en muchas cosas todava estoy prdido. Nunca he
programado en WPF, ya que yo slo me dedicaba a Forms comn y silvestres. El XAML por tags no es tan dficil, pero
me gustara saber si este patrn puede aplicarse en forms normales. Es que no me queda tan claro la verdad y me
gustara una pequea luz para aclarar las cosas. Seguir leyendo en ingls a ver si tambine so me ayuda.
De antemano muchas gracias por todo.
Responder
David Mora dice:
9 de Enero, 2011 en 8:00 am
Chistian,
Desde el punto de vista de ser un patrn de diseo, MVVM puede ser aplicado a Windows Forms. De hecho hay
varios ejemplos disponibles en la red y en libros (por ejemplo, este artculo en MSDN).
La ltima seccin de esta pgina, menciona MVP en dos variantes, vista pasiva y el controlador superintendente.
Las diferencias son algo sutiles pero importantes. Entiendo que lees bien el ingls, por lo que te sugiero leer los
documentos enlazados en el apndice para familiarizarte con los patrones envueltos. En fin, en trminos
prcticos, el mecanismo disponible para enlace de datos tiene mucho que ver con el patrn especfico que
mejor de adapte.
Para aplicaciones empresariales de cierto tamao, Microsoft provee varias guas y una infraestructura completa
de diseo llamada Smart Client Software Factory. En el pasado us una versin anterior (conocida como
Composite UI Application Block o CAB, ya obsoleta) y es buena pero, debido a la cantidad de infraestructura,
no vale la pena para aplicaciones pequeas. No s si la nueva versin es ms liviana.
Lo que yo te sugerira es separar tus objetivos. Ya sea aprender XAML junto con su sistema de enlaces de datos
(que, aunque comparten la idea general usada en Windows Forms, son mucho ms efectivos y mejor portados)
sin preocuparte mucho por patrones de diseo hasta que ya tengas un poco de prctica, o seguir con Windows
23/28
09/05/13
Forms y estudiar los patrones de diseo hasta que ests familiarizado con sus caractersticas y aplicaciones.
Responder
9. La Liga Silverlight Tcnicas con MVVM dice:
4 de Febrero, 2011 en 8:41 am
[...] El patrn de diseo Modelo-Vista-Modelo de vista es ms una estrategia, una idea general de cmo estructurar la
solucin a un problema. En vez de listas de pasos, necesariamente lo que encontramos son explicaciones de los
componentes principales del patrn y algunos ejemplos de su aplicacin. Para los que todava no estn
familiarizados con el patrn, Jeremy Likness ha escrito una muy buena introduccin al tema. [...]
Responder
10. Jounce, Parte 1: Con qu motivo? | Maromas Digitales dice:
18 de Abril, 2011 en 10:02 am
[...] En las siguientes semanas voy a publicar una serie de artculos explicando un proyecto de fuente abierta que
acabo de lanzar llamado Jounce. Su proposito es suministrar guas sobre cmo crear aplicaciones modulares en
Silverlight usando la infraestructura de extensibilidad administrada (MEF por sus siglas en ingls) y el patrn ModeloVista-Modelo de Vista (MVVM). [...]
Responder
11. MVVM Light Toolkit desde cero (paso 1) Zitrodan's Blog dice:
29 de Mayo, 2011 en 7:11 pm
[...] http://maromasdigitales.net/2010/05/patron-mvvm-explicado/ [...]
Responder
12. Validacin en WPF | Experiencias .NET dice:
3 de Julio, 2011 en 8:19 pm
[...] he usado el patrn MVVM para realizar este proyecto aunque no he seguido todos los [...]
Responder
13. La Liga Silverlight MVVM Light Toolkit desde cero (paso 1) dice:
2 de Agosto, 2011 en 7:27 pm
[...] http://maromasdigitales.net/2010/05/patron-mvvm-explicado/ [...]
Responder
14.
Ariel dice:
23 de Septiembre, 2011 en 7:31 am
Excelente artculo David. Solo quisiera preguntarte si conoces un buen libro que explice, en detalles o a fondo, todo
acerca de este y otros tipos de patrones. No importa si el lenguaje es en ingls o en espaol, aunque si es en espaol,
mejor an.
Muchas gracias por tu tiempo y saludos fraternales.
Responder
David Mora dice:
23 de Septiembre, 2011 en 6:33 pm
Los patrones son estrategias para el diseo y construccin de aplicaciones. Un error comn es buscar qu
patrones utilizar en un proyecto. La tctica correcta es busca la solucin del problema y luego ver si hay
patrones que se amoldan al diseo general del programa o sistema.
El libro original que puso ne marcha el movimiento de patrones de diseo es Design Patterns: Elements of
Reusable Object-Oriented Software. Aunque ya es algo antiguo, es todava vlido y autoritario. Sin embargo su
24/28
09/05/13
lectura es difcil puesto que est escrito como tomo de texto y ms como una referencia que una gua.
Para una introduccin ms suave al tema yo recomiendo los siguientes dos libros: Head First Design Patterns y
Applying UML and Patterns: An Introduction to Object-Oriented Analysis and Design and Iterative Development. El
primero explica de una manera mucho ms interesante varios de los patrones definidos en Design Patterns y
tambin presenta su aplicacin. Aunque el segundo libro menciona UML en su ttulo, no te dejes fastidiar por
eso. Si bien el tomo presenta aspectos de la notacin en UML, tambin explica muy bien cmo uno puede
encontrar patrones a medida que construye la aplicacin.
Hay otros libros, pero esos son tiles para empezar. Si slo puedes obtener uno, yo sugiero Head First Design
Patterns.
Responder
15.
Keni dice:
Muy buen articulo David, me gusto mucho la sencillez con la que explicaste el patrn, sin duda ayudar a mucha
gente a comprender su funcionamiento, pero sobre todo me gustaron tus conclusiones finales y los consejos y
advertencias.
Cada vez mas gente asocia WPF o Silverlight al uso obligado MVVM, complicndose el desarrollo en proyectos que
quiz se podran haber resuelto de manera mas fcil. El uso de este patrn como el uso de cualquier otro, siempre
debe concebirse como una solucin a un problema encontrado y no una receta para trabajar con una tecnologa.
Debemos evaluar lo que MVVM nos ofrece y si es adecuado como solucin a nuestro problema ya que
WPF/Silverlight nos ofrece un abanico de herramientas muy potentes que tambin podramos usar para muy
diferentes y varados problemas; RoutedEvents, RoutedCommands, Separacion rbol Lgico-rbol Visual,
ControlTemplates, Lookless Control capabilities, Controles de Navegacin, Animacin/Medios, Interoperabilidad,
etcconclusiones finales y los consejos y advertencias sobre este.
Cada vez mas gente asocia WPF o Silverlight al uso obl
Responder
David Mora dice:
Gracias por tus comentarios. Debo, sin embargo, hacer nfasis en que es una traduccin al espaol del artculo
por Jeremy Likeness. An as, estoy de acuerdo contigo en que Jeremy explica muy bien el tema, y su punto de
vista balanceado ha servido como gua, tanto para m, como para muchos otros desarrolladores.
Responder
Responder
Nombre (opcional)
Email (opcional, no ser publicado)
Sitio de Web (opcional)
25/28
09/05/13
Enviar Comentario
Materiales
Cdigo Fuente
Ejemplo bsico de MVVM (C#)
Artculos Recientes
Generando un modelo de clases en EF a partir de una base datos usando cdigo primero
Jounce, Parte 3: Navegacin bsica
Gua para las nuevas caractersticas de Silverlight 5 Beta
Jounce, Parte 2: Comenzado (etiquetas y enlaces)
Jounce, Parte 1: Con qu motivo?
T em as populares
Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado
Cmo generar una hoja de clculo Excel en formato XML
Desarrollando con cdigo primero en Entity Framework 4
Usando Entity Framework con Procedimientos Almacenados
Introduccin a Silverlight - Parte 3: Acceso a datos
Silverlight, MVVM y WCF RIA Services: Notas de un proyecto real
Generando un modelo de clases en EF a partir de una base datos usando cdigo primero
Introduccin a Silverlight Parte 2: Diseo de la interfase al usuario y navegacin
Introduccin a Silverlight Parte 1: Herramientas y Hello World
De la base de datos al cliente con WCF RIA Services
Categoras
ASP.NET (2)
Blend (1)
Entity Framework (4)
Miscelneos (4)
Modelaje de Informacin (2)
Servicios RIA en Silverlight (15)
Silverlight (66)
Windows Phone (38)
26/28
09/05/13
Etiquetas
acceso a datos animaciones arquitectura ASP.NET MVC Blend Brad Abrams data binding DataSet depuracin diseo visual
prcticas hardware Jeff Blankenburg Jeremy

Likness John Galloway John Papa Jounce libros MEF modelos de informacin MVVM navegacin ORM patrones de diseo
plantillas PRISM ria Scott Guthrie Shawn Wildermuth Silverlight Silverlight 3 Silverlight 4 Silverlight 5 Silverlight
enlace de datos
Toolkit
Entity Framework fundamentos guas
Tim Heuer tombstoning traducciones UX WCF RIA Services web services Windows
Phone 7
T em as de Inters
My Fieldset
1. Sugiere un tema a cubrir en el blog:
Enviar
cforms contact form by delicious:days
Volver al Inicio
Buscar por:
Buscar
Archivo
Mayo 2011 (4)
Abril 2011 (3)
Marzo 2011 (2)
Febrero 2011 (2)
Enero 2011 (4)
Diciembre 2010 (31)
Noviembre 2010 (1)
Octubre 2010 (9)
Septiembre 2010 (1)
Agosto 2010 (2)
Julio 2010 (2)
Junio 2010 (1)
Mayo 2010 (3)
Abril 2010 (3)
Marzo 2010 (7)
Febrero 2010 (12)
Enero 2010 (7)
Licencia de uso
El contenido de las traducciones est sujeto a los trminos de proteccin de derechos de uso de los autores originales quienes han
autorizado su publicacin en este blog. Asegrese de entender los terminos de la licencia de cada autor antes de usar tal contenido.
27/28
09/05/13
Mis propios artculos son publicados bajo los trminos de la Licencia Reconocimiento-Compartir bajo la misma licencia 3.0 Estados Unidos
de Creative Commons:
Blog de Maromas Digitales by Maromas Digitales, LLC is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma
licencia 3.0 Estados Unidos License.
License
The contents of all translated articles is subject to the copyright and licensing terms of the original authors and has been published here
with their express permission. Verify the original author's licensing terms before using the contents of these articles.
My own articles are licensed under the Creative Commons Attribution-Share Alike 3.0 United States License:
Blog de Maromas Digitales by Maromas Digitales, LLC is licensed under a Creative Commons Attribution-Share Alike 3.0 United States
License.
Portada
Artculos Por Autor
Acerca
Contactar
2010,2011 Maromas Digitales, LLC. conos de redes sociales creados por Komodo Media
28/28

Patron Modelo Vista Modelo de Vista MVVM Explicado Maromas Digitales PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Patron Modelo Vista Modelo de Vista MVVM Explicado Maromas Digitales PDF

Cargado por

Copyright:

Formatos disponibles

09/05/13

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado

Por qu debera interesarme el MVVM?

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

enlazar 100 000 artculos a un control ListBox.

MVVM a grandes rasgos

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

private string _lastName;

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

El modelo de vista (Nuestro controlador o presentador)

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Qu podemos discernir de este vistazo?

La vista y el modelo de vista

El modelo de vista y el modelo

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Por dicha no est solo:

La vista como elemento principal

private void Application_Startup(object sender,

El modelo de vista como elemento principal

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Una infraestructura bsica para MVVM

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

public event EventHandler CanExecuteChanged;

El cdigo fuente para el ejemplo puede ser descargado aqu.

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Escenarios comunes en MVVM

Lista con Seleccin

public class ContactViewModel : BaseViewModel,

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Configuracin y valores globales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Conjuntos de datos inmensos

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Apndice A: Historia de algunos patrones

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Apndice B: Infraestructuras o bibliotecas de MVVM disponibles

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

21 Respuestas a Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Christian Asta dice:

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

prcticas hardware Jeff Blankenburg Jeremy

Entity Framework fundamentos guas

Patrn Modelo-Vista-Modelo de Vista (MVVM) Explicado | Maromas Digitales

También podría gustarte