Windows Phone – MVVM III

Una vez visto en el articulo anterior una breve entrada de un ejemplo del patrón MVVM vamos a ver ahora utilizando el framework MVVM Light Toolkit, una vez que instalamos el framework veremos que a la hora de crear un nuevo proyecto de WPF o Silverlight o Windows Phone tendremos nuevas opciones, en WPF podemos ver las entradas

image

Nosotros vamos a elegir MvvmLight (WPF 4) y vemos que nos va a generar ya una estructura de proyecto con unas clases determinadas

 

image

Una clase que aparece nueva con respecto a lo que vimos en el anterior articulo es la clase ViewModelLocator es el encargado de instanciar y mantener una referencia de cada ViewModel que existe en nuestra aplicación, si la abrimos veremos que contiene una propiedad Main haciendo referencia a MainViewModel además de manera estática

1 /// <summary> 2 /// Gets the Main property. 3 /// </summary> 4 public static MainViewModel MainStatic 5 { 6 get 7 { 8 if (_main == null) 9 { 10 CreateMain(); 11 } 12 13 return _main; 14 } 15 } 16 17 /// <summary> 18 /// Gets the Main property. 19 /// </summary> 20 [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance", 21 "CA1822:MarkMembersAsStatic", 22 Justification = "This non-static member is needed for data binding purposes.")] 23 public MainViewModel Main 24 { 25 get 26 { 27 return MainStatic; 28 } 29 }

Si añadimos nuestro modelo veremos que aparecen nuevas opciones para añadir nuevos elementos al proyecto

image

 

Para nuestro modelo utilizaremos la típica clase de cualquier proyecto y crearemos el mismo modelo que nuestro anterior articulo ya que vamos a realizar el mismo ejemplo. Nuestra vista va a ser igual al del ejemplo anterior solo que en este caso hay una pequeña diferencia en el DataContext, primero que ya viene en el template de MVVMLight y que hace referencia a la clase ViewModelLocator

 DataContext="{Binding Main, Source={StaticResource Locator}}"

 

Si vemos la clase ViewModel que nos ha generado vemos que deriva de la clase ViewModelBase que proporciona ciertos elementos que nos ayudaran en nuestro desarrollo en MVVM.Por ejemplo ViewModelBase implementa ya el INotifyPropertyChanged y además nos provee de un método en el cual podemos hacer limpieza en caso de que sea necesaria, también nos ofrece la propiedad IsInDesignMode que indica si estamos en diseño o no.

Podríamos copiar toda nuestra anterior ViewModel pero no vamos a copiar la propiedad AddItemCommand ya que RelayCommand en este caso viene proporcionado por el FrameWork y la declararemos con la siguiente línea

Luego en el constructor enlazamos los métodos para ejecutar la acción y el que comprueba si se puede ejecutar, en nuestro caso

AddItemCommand = new RelayCommand(AddItem,CanAddNewItem);


Ya tendríamos completado nuestro ejemplo anterior, de manera que nuestra ViewModel quedaría de la siguiente manera

 

1 public class MainViewModel : ViewModelBase 2 { 3 #region Private members 4 5 private string _newItem; 6 7 private ModelTest _selectedItem; 8 9 #endregion 10 11 public string NewItem 12 { 13 get 14 { 15 return _newItem; 16 } 17 18 set 19 { 20 _newItem = value; 21 RaisePropertyChanged("NewItem"); 22 } 23 } 24 25 26 public ModelTest SelectedItem 27 { 28 get 29 { 30 return _selectedItem; 31 } 32 set 33 { 34 _selectedItem = value; 35 RaisePropertyChanged("SelectedItem"); 36 } 37 } 38 39 40 public ObservableCollection<ModelTest> Items { get; set; } 41 42 public RelayCommand AddItemCommand { get; private set; } 43 44 /// <summary> 45 /// Initializes a new instance of the MainViewModel class. 46 /// </summary> 47 public MainViewModel() 48 { 49 if (IsInDesignMode) 50 { 51 // Code runs in Blend --> create design time data. 52 } 53 else 54 { 55 _newItem = string.Empty; 56 Items = new ObservableCollection<ModelTest>(); 57 AddItemCommand = new RelayCommand(AddItem, CanAddNewItem); 58 } 59 } 60 61 62 private void AddItem() 63 { 64 ModelTest newItem = new ModelTest(); 65 newItem.Code = Items.Count == 0 ? 1 : Items[Items.Count - 1].Code + 1; 66 newItem.Description = NewItem; 67 SelectedItem = newItem; 68 69 Items.Add(newItem); 70 71 } 72 73 private bool CanAddNewItem() 74 { 75 return NewItem.Length > 5; 76 } 77 78 }

Os dejo el código para que le echéis un vistazo, en el próximo articulo veremos la característica Messenger de MVVMLight

 

Download File – MVVMLight

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *