MvvmLight 5.0 et la navigation


Nouveautés

Une grande nouveauté de MVVMLight5 est l’apparition du INavigationService.

Le INavigationService est un Pattern permettant la navigation dans l’application sans utiliser la couche visuelle. Il est alors possible de migrer le même code sous différentes plateformes sans les particularités de la navigation.

Il sera également possible de tester les actions de navigation grâce aux tests unitaires automatisés.

Navigation entre les pages

Un petit rappel des différentes implémentations de la navigation entre les pages d’une application.

Sans MVVM et sans INavigationService

Dans une application standard (non MVVM), le passage d’une page à l’autre va se faire de la façon suivante. Sur le click du bouton, on appelle la page concernée.

En Xaml :

En Code Behind (Ici dans une application Windows 8.x / Windows Phone 8 Xaml)

 

En MVVM sans implémentation de l’évènement « Click »

Afin de ne pas coder les actions dans l’interface visuelle, nous allons passer par des ICommand.

MVVM Light possède déjà les mécanismes pour utiliser les actions avec des RelayCommand.

Nous utilisons une classe MainViewModel où nous allons coder l’action.

Cette classe est ensuite associée dans le XAML au niveau de la définition de la Page.

Le Bouton est alors codé de cette façon. L’action « Command » remplace l’évènement « Click » : Le bouton utilise le Binding pour associer l’évènement à l’action.

Les problèmes de la navigation.

Premier problème : L’indépendance de la Vue

La command se trouve dans le ViewModel. L’objet Frame qui est un objet visuel n’est pas accessible sauf à ajouter un espace de nommage lié à la vue pour pouvoir le manipuler. En faisant cela on « casse » le pattern ViewModel.

Deuxième problème : Le codage spécifique

L’objet Frame est spécifique aux applications Windows 8 et Universal Apps. Si vous souhaitez porter ce code en WPF ou Windows Phone 8.0 , 8.1 version Silverlight ou Xamarin Android / iPhone, la syntaxe sera différente.

Ce qui se fait de plus courant, est l’implémentation d’une interface souvent appelée INavigationService et de sa classe associée NavigationService.

INavigationService va contenir les éléments de navigation, souvent des méthodes NavigateToPage1, GoBack(),… et son implémentation (NavigationService) va coder les méthodes de navigation propre à chaque plateforme.

Depuis quelques semaines, MVVM Light 5, fournit tout ce mécanisme « in the Box ».

INavigationService du MVVM Light 5.0

Etape 1 : Définition du Service dans ViewModelLocator.

Le ViewModelLocator sert à initialiser tous les services et enregistrer tous les ViewModel consultés dans les vues.

On va ajouter la ligne suivante dans son constructeur :

ce qui donne :

CreateNavigationService() va contenir un référentiel sous forme de configuration de chaque page :

 

Si vous avez plusieurs pages sur lesquelles vous voulez naviguer il faudra les définir à cet endroit avec la méthode Configure.

Le référencement de ces pages s’effectue par une « string » ce qui peut être source d’erreur. Je vous recommande de passer par la définition de constantes pour bénéficier de l’IntelliSense et également éviter toute confusion.

Etape 2 : Navigation vers une page

Nous allons voir maintenant comment appeler une page dans le ViewModel.

Sur le RelayCommand (associé au bouton dans le XAML), l’appel va se faire de la façon suivante :

Etape 3 (Optionnelle) : Retour vers la page précédente

On associe une action sur le Command (NavigateBackCommand dans cet exemple). L’action est associée au bouton retour, dans cette action, on utilise la méthode GoBack(). Cette instruction provient directement de MVVMLight 5, il n’y a rien de plus à faire.

Conclusion

MVVMLight dans sa version 5.0 simplifie de nouveau un peu plus le pattern M-V-VM en proposant les implémentations de navigation courantes directement dans ce Framework.

Avec une version « Portable », il est possible de créer un code très propre et indépendant d’une plateforme très facilement.

Le code est ici

Téléchargement du Code

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

1 × quatre =