Et le tout en DotNet WPF<\/strong> respectant le pattern MVVM<\/strong> !!!<\/p>\n Je ne ferai pas un gros article sur la n\u00e9cessit\u00e9 de d\u00e9velopper en WPF selon une architecture MVVM<\/strong> (S\u00e9paration des fonctions, r\u00e9utilisation, r\u00f4le des objets mieux cibl\u00e9s, acc\u00e8s d\u00e9claratifs\u2026). Voici quelques liens au cas o\u00f9 vous ne seriez toujours pas convaincus\u2026<\/p>\n http:\/\/www.orbifold.net\/default\/?p=550<\/a> Cette premi\u00e8re partie pr\u00e9sente l\u2019impl\u00e9mentation de la liste d\u2019images avec le mod\u00e8le MVVM.<\/p>\n Voici le descriptif fonctionnel de l\u2019exemple que nous allons mettre en place : Un petit croquis vaut mieux qu\u2019un long discours.<\/p>\n L\u2019application est extr\u00eamement simpliste. La saisie d\u2019un r\u00e9pertoire se fait en haut, le click sur le bouton affiche la liste des images et leur nombre total.<\/p>\n L\u2019application est d\u00e9coup\u00e9e en 4 parties :<\/p>\n Avec un diagramme, cela ressemble \u00e0 ceci :<\/p>\n L\u2019organisation des classes dans la solution se traduit comme ceci<\/p>\n <\/p>\n Cette couche n\u2019est pas sp\u00e9cifique \u00e0 la technologie WPF. FileName<\/strong> contient le chemin complet du fichier Image Et voici son impl\u00e9mentation<\/p>\n <\/p>\n <\/p>\n Passons maintenant \u00e0 la couche ViewModel qui va exposer les informations n\u00e9cessaires \u00e0 la vue.<\/p>\n Pour se faire les classes impl\u00e9mentent l\u2019interface INotifiedProperty<\/strong>. La propri\u00e9t\u00e9 ShortName<\/strong> permettra d\u2019afficher uniquement le nom du fichier, l\u2019objet m\u00e9tier complet sera stock\u00e9 dans un attribut priv\u00e9 _ImageFile<\/strong>.<\/p>\n La liste des fichiers images sera expos\u00e9e \u00e0 travers une autre classe ImageFileCollectionViewModel<\/strong>. DataItemCount<\/strong> permettra d\u2019obtenir le nombre total d\u2019images dans la liste. DataItemCount\u00a0 appelle le fameux OnPropertyChanged<\/strong> qui permettra \u00e0 chaque modification du nombre d\u2019\u00e9l\u00e9ments (de la couche Model)\u00a0 de notifier \u00e0 la vue XAML<\/strong> de se rafraichir automatiquement.<\/p>\n L\u2019ajout d\u2019\u00e9l\u00e9ments dans la liste se fera avec la m\u00e9thode AddNewPhotoItem<\/strong>.<\/p>\n L\u2019affichage de la liste se fait ensuite avec une vue XAML classique. Pour am\u00e9liorer la r\u00e9utilisation et faciliter la maintenance j\u2019ai cr\u00e9\u00e9 un UserControl <\/strong>\u00ab ImageFileListView <\/strong>\u00bb qui contient uniquement la liste des images.<\/p>\n Voici l\u2019impl\u00e9mentation de ce UserControl. Notez que le Binding<\/strong> se fait sur les propri\u00e9t\u00e9s des objets ViewModel<\/p>\n Ce UserControl est appel\u00e9 de la fa\u00e7on suivante dans la fen\u00eatre principale Window.xaml<\/strong>. <\/p>\n <\/p>\n Nous venons de voir que la couche View et ViewModel sont directement reli\u00e9es par le Binding des fichiers XAML<\/strong>. Voici une \u00e9criture possible.<\/p>\n ImageFileControler.CompleteViewList<\/strong> recherche les fichiers *.jp* du r\u00e9pertoire pass\u00e9 en param\u00e8tre et les aoute un par un dans la liste de type ImageFileCollectionViewModel.<\/p>\n <\/p>\n <\/p>\n L\u2019application est loin d\u2019\u00eatre termin\u00e9e mais voici une premi\u00e8re ex\u00e9cution.<\/p>\n Et les tests alors? J\u2019ai pr\u00e9f\u00e9r\u00e9 poser le d\u00e9cor avant d\u2019aborder cette partie qui a bien sur \u00e9t\u00e9 r\u00e9alis\u00e9e avant l\u2019impl\u00e9mentation des diff\u00e9rentes m\u00e9thodes . Trois tests unitaires ont \u00e9t\u00e9 ajout\u00e9s sur la partie ViewModel. Le but est de tester les interactions entre l\u2019affichage et les objets m\u00e9tiers du ImageFileCollectionViewModel<\/strong>.<\/p>\n Les tests unitaires sont cr\u00e9\u00e9s avec l\u2019assistant Visual Studio 2008 (Depuis ImageFileCollectionViewModel <\/strong>click droit, Cr\u00e9er des Tests unitaires… )<\/p>\n Il s\u2019agit de tester le Nombre d\u2019\u00e9l\u00e9ments d\u2019objets m\u00e9tiers ImageFile ajout\u00e9s dans la liste.<\/p>\n Voici le code.<\/p>\n <\/p>\n <\/p>\n Il s\u2019agit de tester les \u00e9l\u00e9ments pr\u00e9sents dans AllImages. La technique est la m\u00eame. Attention ici AllImages repr\u00e9sente le d\u00e9tail des ViewModel et non pas la liste des objets m\u00e9tiers.<\/p>\n Le meilleur pour la fin. L\u2019objectif est de tester l\u2019ajout d\u2019un \u00e9l\u00e9ment. Le but n\u2019est pas de tester cet ajout \u00e0 travers AllImages mais de tester directement l\u2019attribut priv\u00e9 _allImages. Ensuite vous pourrez utiliser un code de ce type :<\/p>\n <\/p>\n <\/p>\n![\"MVVM](\"http:\/\/www.bratched.com\/images\/stories\/image.png\" "\\"MVVM")
<\/a><\/p>\n
\nhttp:\/\/japf.developpez.com\/tutoriels\/dotnet\/mvvm-pour-des-applications-wpf-bien-architecturees-et-testables\/<\/a>
\nhttp:\/\/msdn.microsoft.com\/fr-fr\/magazine\/dd419663.aspx<\/a>
\nhttp:\/\/www.c2i.fr\/Article\/Detail\/a3809f7b-196a-4d8c-bb48-164f591920bb<\/a><\/p>\nMVVM et ListView<\/h1>\n
Exemple d\u2019application<\/h2>\n
<\/a><\/p>\nD\u00e9coupage de l\u2019application<\/h2>\n
\n
<\/a><\/p>\n<\/a><\/p>\nD\u00e9tail des couches MVVM<\/h2>\n
La couche Model<\/h3>\n
\nJ\u2019ai ajout\u00e9 une interface IImageFile<\/strong> pour simplifier les \u00e9volutions.
\nVoici l\u2019interface de manipulation de l\u2019objet Image.<\/p>\npublic interface IImageFile\n{\n string FileName { get; }\n bool IsAvailable { get; }\n}\n\n<\/pre>\n<\/div>\n
\nIsAvailable<\/strong> retourne vrai si le fichier existe<\/p>\npublic class ImageFile: IImageFile\n{\n public string FileName { get; set; }\n public bool IsAvailable\n {\n get \n {\n return File.Exists(FileName);\n }\n }\n}\n<\/pre>\n<\/div>\nLa couche ViewModel<\/h3>\n
\n
\nCette interface n\u00e9cessite l\u2019impl\u00e9mentation d\u2019un \u00e9v\u00e9nement de type PropertyChangedEventHandler<\/strong> qui remontra<\/p>\nla classe FileViewModel<\/h3>\n
public class FileViewModel: INotifyPropertyChanged\n{\n protected IImageFile _imageFile;\n public string ShortName\n {\n get { return Path.GetFileName(_imageFile.FileName); }\n }\n\n public FileViewModel(IImageFile imageFile)\n {\n this._imageFile = imageFile;\n }\n\n public event PropertyChangedEventHandler PropertyChanged;\n protected void OnPropertyChanged(string propertyName)\n {\n if (PropertyChanged != null)\n {\n PropertyChanged(this, new PropertyChangedEventArgs(propertyName));\n }\n }\n}\n<\/pre>\n<\/div>\nLa classe ImageFileCollectionViewModel<\/h3>\n
\nPour obtenir la liste des images dans la vue nous utiliserons donc la propri\u00e9t\u00e9 AllImages<\/strong> de type ObservableCollection<\/strong> de FileViewModel<\/strong>.<\/p>\npublic class ImageFileCollectionViewModel: INotifyPropertyChanged\n{\n private ObservableCollection<FileViewModel> _allImages;\n private int dataItemsCount;\n\n public ObservableCollection<FileViewModel> AllImages\n {\n get { return _allImages; }\n }\n\n public int DataItemsCount\n {\n get\n {\n return dataItemsCount;\n }\n private set\n {\n dataItemsCount = value;\n OnPropertyChanged(\"DataItemsCount\");\n }\n }\n\n public ImageFileCollectionViewModel()\n {\n this._allImages = new ObservableCollection<FileViewModel>();\n this.DataItemsCount = 0;\n }\n\n public void AddNewPhotoItem(IImageFile imageFile)\n {\n FileViewModel newImageFileViewModel = new FileViewModel(imageFile);\n this._allImages.Add(newImageFileViewModel);\n this.DataItemsCount++;\n }\n \n public event PropertyChangedEventHandler PropertyChanged;\n\n private void OnPropertyChanged(string propertyName)\n {\n if (PropertyChanged != null)\n {\n PropertyChanged(this, new PropertyChangedEventArgs(propertyName));\n }\n }\n}\n<\/pre>\n<\/div>\nLa couche View<\/h3>\n
<UserControl x:Class=\"wpfListViewSample01.View.ImageFileListView\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n xmlns:local=\"clr-namespace:wpfListViewSample01.View\">\n \n <ListView SelectionMode=\"Extended\" x:Name=\"ListViewImage\"\n ItemsSource=\"{Binding Path=AllImages}\" Margin=\"0,20,0,0\">\n <ListView.ItemTemplate>\n <DataTemplate>\n <StackPanel Orientation=\"Horizontal\">\n <TextBlock Text=\"{Binding Path=ShortName}\" \/>\n \u00a0<\/StackPanel >\n <\/DataTemplate\u00a0\u00a0>\n <\/ListView.ItemTemplate> \u00a0\u00a0\n <\/ListView\u00a0>\n\u00a0<\/UserControl\u00a0>\n<\/pre>\n<\/div>\n
\nNotez que \u201clabel2<\/strong>\u201d est bind\u00e9<\/strong> sur la propri\u00e9t\u00e9 DataItemsCount<\/strong> de l\u2019objet ViewModel<\/p>\n<Window x:Class=\"wpfListViewSample01.View.Window1\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n xmlns:m=\"clr-namespace:wpfListViewSample01.View\"\n Title=\"Window1\" Height=\"400\" Width=\"571\">\n <Grid>\n <Grid.ColumnDefinitions>\n <ColumnDefinition Width=\"515*\" \/>\n <ColumnDefinition Width=\"34*\" \/>\n <\/Grid.ColumnDefinitions>\n <Label Height=\"25\" HorizontalAlignment=\"Left\" Margin=\"12,17,0,0\" \n Name=\"label1\" VerticalAlignment=\"Top\" Width=\"108\">Images Directory<\/Label\u00a0>\n <TextBox Height=\"25\" Margin=\"126,17,12,0\" Name=\"textBoxImageDirectory\"\n VerticalAlignment=\"Top\" Grid.ColumnSpan=\"2\" \/>\n <Button Height=\"29\" HorizontalAlignment=\"Left\" Margin=\"12,56,0,0\" \n Name=\"BtnOk\" VerticalAlignment=\"Top\" Width=\"106\" Click=\"BtnOk_Click\"> \n Display!<\/Button\u00a0\u00a0>\n <m:ImageFileListView x:Name=\"listView1\" Margin=\"12,99,12,22\" \n ClipToBounds=\"False\" Grid.ColumnSpan=\"2\" \/>\n <Label Height=\"24\" HorizontalAlignment=\"Right\" Margin=\"0,57,72,0\" \n Name=\"label2\" VerticalAlignment=\"Top\" Width=\"170\" \n Content=\"{Binding Path=DataItemsCount}\"><\/Label>\n <\/Grid\u00a0\u00a0\u00a0>\n<\/Window\u00a0>\n<\/pre>\n<\/div>\nLes liens entre Model, ViewModel et View<\/h3>\n
\nAu moment du click sur le bouton, l\u2019alimentation de la liste doit se faire avec le r\u00e9pertoire saisi.
\nSur le click du bouton, j\u2019ai cod\u00e9 quelques actions.<\/p>\n\n
private void BtnOk_Click(object sender, RoutedEventArgs e)\n{\n ImageFileCollectionViewModel ImagesViewModel \n = new ImageFileCollectionViewModel();\n ImageFileControler.CompleteViewList(ImagesViewModel, textBoxImageDirectory.Text);\n listView1.DataContext = ImagesViewModel;\n label2.DataContext = ImagesViewModel;\n};<\/pre>\n<\/div>\npublic static void CompleteViewList(\n ImageFileCollectionViewModel imageFileCollecion, string directory)\n{\n string[] files = Directory.GetFiles(directory, \"*.jp*\");\n foreach (var f in files)\n {\n var im = new ImageFile();\n im.FileName = f;\n imageFileCollecion.AddNewPhotoItem(im);\n }\n}<\/pre>\n<\/div>\nEx\u00e9cution de l\u2019application<\/h2>\n
<\/a><\/p>\nLes tests unitaires<\/h2>\n
\nNormalement les tests unitaires sont fait en m\u00eame temps, voir m\u00eame avant l\u2019\u00e9criture des diff\u00e9rentes impl\u00e9mentations.<\/p>\n
\nLe d\u00e9coupage MVVM va nous faciliter la t\u00e2che en terme de tests unitaires.<\/p>\n\n
DataItemsCountTest ()<\/h3>\n
\n
[TestMethod()]\npublic void DataItemsCountTest()\n{\n ImageFileCollectionViewModel target = new ImageFileCollectionViewModel();\n Assert.AreEqual(target.DataItemsCount, 0);\n target.AddNewPhotoItem(new ImageFile() { FileName = \"c:test1.jpg\" });\n target.AddNewPhotoItem(new ImageFile() { FileName = \"c:test2.jpg\" });\n Assert.AreEqual(target.DataItemsCount, 2); \n}<\/pre>\n<\/div>\nAllImagesTest()<\/h3>\n
\n
\n
[TestMethod()]\npublic void AllImagesTest()\n{\n ImageFileCollectionViewModel target = new ImageFileCollectionViewModel();\n Assert.AreEqual(target.AllImages.Count, 0);\n target.AddNewPhotoItem(new ImageFile() { FileName = @\"ImagesTest1.jpg\" });\n Assert.AreEqual(target.AllImages.Count, 1);\n Assert.AreEqual(target.AllImages[0].ShortName, \"Test1.jpg\");\n \n}\n<\/pre>\n<\/div>\nAddNewPhotoItemTest<\/strong>()<\/h2>\n
\nIl faut donc un acc\u00e8s \u00e0 l\u2019attribut priv\u00e9 \u201c_allImages\u201d. La premi\u00e8re \u00e9tape \u00e0 r\u00e9aliser est de se placer sur l\u2019attribut _allImages et de faire click droit puis\u201cCr\u00e9er un accesseur priv\u00e9’\u201d.<\/p>\n\n
[TestMethod()]\npublic void AddNewPhotoItemTest()\n{\n ImageFileCollectionViewModel temp = new ImageFileCollectionViewModel(); \n PrivateObject param0 = new PrivateObject(temp);\n ImageFileCollectionViewModel_Accessor target = new ImageFileCollectionViewModel_Accessor(param0);\n target.AddNewPhotoItem(new ImageFile() { FileName = @\"c:test1.jpg\" });\n Assert.AreEqual(target._allImages.Count, 1);\n Assert.AreEqual(target._allImages[0].GetType().FullName,\n \"wpfListViewSample01.ViewModel.FileViewModel\");\n}<\/pre>\n<\/div>\nEx\u00e9cution des tests<\/h2>\n