Windows 8 et 8.1

WindowsStoreHeader

Windows Store Application et MVVM


Je travaille actuellement sur le développement d’une application Windows 8 (C# et XAML) en utilisant une architecture MVVM et j’avoue qu’il y a beaucoup de choses à échanger.

L’objectif de ce post est de vous faire part de mon retour d’expérience en évoquant plusieurs thèmes sur le développement d’une application Windows Store en espérant que cela permettra aux débutants de mieux comprendre le concept, de répondre aux questions que l’on se pose face à cette nouvelle techno mais également d’avoir l’avis des personnes ayant déjà développé ce genre d’application.

Petit tutoriel sur le Design Pattern MVVM (Model-View-ViewModel)

Le Design Pattern MVVM

Déjà utilisée sur le développement d’applications WPF (Windows Presentation Foundation), la méthodologie Modèle / Vue / Vue-Modèle est une variation du patron de conception MVC, taillée sur mesure pour les technologies modernes d’interface utilisateur où la réalisation de la Vue est davantage confiée à un designer qu’à un développeur classique.
Ce pattern identifie trois objets distincts :

Le Modèle : Il constitue la couche de données métier et n’est lié à aucune représentation graphique précise.

La Vue : Elle contient la définition structurelle de ce que les utilisateurs auront à l’écran. On peut y mettre du contenu statique et dynamique (animations et les états de changements). Elle ne doit contenir aucune logique applicative

La Vue – Modèle : ce composant fait le lien entre le modèle et la vue. Il s’occupe de gérer les liaisons de données et les éventuelles conversions. C’est ici qu’intervient le binding.

Là où le pattern MVVM va vraiment apporter une plus-value est dans des projets contenant de nombreuses interfaces utilisateur. Souvent, on voit une UI (Window, Page, UserControl) avec un présenteur de données et un fichier de code-behind pour les events. En appliquant MVVM sur un tel projet, non seulement vous réduisez le nombre de fichiers à charger par Visual Studio et le compilateur (il n’y a que très rarement besoin d’un fichier de code-behind), mais vous gagnez également en lisibilité dans l’explorateur de solution en n’étant plus obligé de switcher entre code-behind(events) et présenteurs(données).

Exemple d’application

Pour vous permettre de mieux comprendre l’architecture MVVM, nous allons développer une petite application Windows Store qui mettra en jeu les différentes couches de ce design pattern.

Cette application permettra d’afficher une liste de titres dans une GridView.

N.B : Pour pouvoir faire cet exemple, il faut installer le Windows Software Development Kit pour Windows 8 (http://msdn.microsoft.com/en-us/library/windows/desktop/hh852363.aspx) et d’avoir comme OS Windows 8

Pour ce faire :
Créons une nouvelle application sous Visual Studio 2012
Screen1
Rajoutons le dossier « Models» et insérons la classe Titre avec ce code :
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVVMSample
{
public partial class Titre : INotifyPropertyChanged
{
#region Properties
private int _Id;
public int Id
{
get { return _Id; }
set
{
if (_Id != value)
{
_Id = value;
OnPropertyChanged(« Id »);
}
}
}
private string _Name;
public string Name
{
get { return _Name; }
set
{
if (_Name != value)
{
_Name = value;
OnPropertyChanged(« Name »);
}
}
}

private string _Description;
public string Description
{
get { return _Description; }
set
{
if (_Description != value)
{
_Description = value;
OnPropertyChanged(« Description »);
}
}
}
#endregion
#region PropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
}
Création de la classe TitreViewModel dans la solution avec ce code :
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVVMSample
{
public class TitreViewModelGenerator
{
private static TitreViewModel _Instance;
public TitreViewModel Instance
{
get
{
if (_Instance == null) _Instance = new TitreViewModel();
return _Instance;
}
}
}
public partial class TitreViewModel :INotifyPropertyChanged
{
internal TitreViewModel() { }

#region Creation of the ObservableCollection
private ObservableCollection _Titres;
public ObservableCollection Titres
{
get
{
if (_Titres == null)
{
_Titres = new ObservableCollection()
{
new Titre(){Id=1,Name= »VALUE 1″,Description= »Description1″},
new Titre(){Id=2,Name= »VALUE 2″,Description= »Description2″},
new Titre(){Id=3,Name= »VALUE 3″,Description= »Description3″}
};
}
return _Titres;
}
}
#endregion
#region PropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
internal virtual void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
}
La solution doit être comme ça :
Screen2

Dans le fichier MainPage.xaml, nous avons ce code XAML :

<Page

x:Class= »MVVMSample.MainPage »

xmlns= »http://schemas.microsoft.com/winfx/2006/xaml/presentation« 

xmlns:x= »http://schemas.microsoft.com/winfx/2006/xaml« 

xmlns:local= »using:MVVMSample »

xmlns:d= »http://schemas.microsoft.com/expression/blend/2008« 

xmlns:mc= »http://schemas.openxmlformats.org/markup-compatibility/2006« 

mc:Ignorable= »d »>

<Page.DataContext>

<local:TitreViewModel/>

</Page.DataContext>

<Grid Background= »{StaticResource ApplicationPageBackgroundThemeBrush} » >

<GridView ItemsSource= »{Binding Titres} »>

<GridView.ItemTemplate>

<DataTemplate>

<StackPanel Orientation= »Vertical »>

<TextBlock Text= »{Binding Name} » />

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

</Grid>

</Page>

En exécutant l’application nous avons cet écran :
Screen3

Comme vous pouvez le constater nous avons à l’écran les valeurs qu’il y a dans le ViewModel.

Il s’agit là d’un petit exemple MVVM, vous pouvez trouver sur internet une multitude d’exemples. C’est pour ça que je ne me suis pas trop retardé là dessus.

DataBinding Vs DataContext

Eh oui !!!…Il existe des confusions entre le DataBinding et le DataContext !!!

Sur ce post, je vais présenter ces 2 notions qui sont d’ailleurs très importantes en MVVM.

Le Data Binding et le Data Context sont 2 notions importantes dans une application windows store qui utilise du MVVM .

Il ne faut surtout pas confondre ces 2 éléments !!!

Le DataContext est utilisé pour établir la relation entre la Vue et la Vue-Modèle.

Il peut être déclaré dans :

  1. La Vue en XAML
  2. Dans le code behind de la Vue en C#
  3. Implicitement à travers un DataTemplate

Le DataContext hérite de l’élément parent. Le fait de l’avoir déclaré dans la page, il s’applique directement aux autres éléments de celle-ci.

Prenons le cas de l’application de mon tutoriel MVVM. Vous pouvez constater que mon DataContext est déclaré dans la vue en XAML.

Voici le code ça pourra vous aidez à mieux comprendre :

<Page.DataContext>

<local:TitreViewModel/>

</Page.DataContext>

Ce code XAML, m’a tout simplement permis de relier la vue MainPage à la Vue-Modèle TitreViewModel.

Ce qui est intéressant dans tout ça, c’est que si je veux binder une GridView à une ObservableCollection<T> de ma Vue-Modèle, je n’ai pas du tout besoin de mettre la propriété DataContext dans la GridView car elle est déjà définie en amont.

Le DataBinding lui, permet  de :

  • Faire la liaison entre les éléments de la vue avec une ou plusieurs sources.
  • Mettre à jour la source de données depuis la vue en utilisant une interaction utilisateur

Le DataBinding s’ajoute au DataContext.

Contrairement au DataContext, le DataBinding se fait qu’en XAML.

Petit exemple de DataBinding :

<GridView ItemsSource= »{Binding Titres} »>

<GridView.ItemTemplate>

<DataTemplate>

<StackPanel Orientation= »Vertical »>

<TextBlock Text= »{Binding Name} » />

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

Conclusion :

Pour faire un Binding il faut avoir au préalable déclarer un DataContext. Le DataContext greffe la vue à la vue-modèle et le Binding sert de liaison entre les éléments de la vue et la vue-modèle.

Publicités

3 commentaires sur “Windows 8 et 8.1

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s