{"id":775,"date":"2014-11-14T01:58:49","date_gmt":"2014-11-13T23:58:49","guid":{"rendered":"http:\/\/dev.bratched.fr\/fr\/?p=775"},"modified":"2014-11-14T01:58:49","modified_gmt":"2014-11-13T23:58:49","slug":"mvvmlight-5-0-et-la-navigation","status":"publish","type":"post","link":"https:\/\/bratched.com\/fr\/2014\/11\/14\/mvvmlight-5-0-et-la-navigation\/","title":{"rendered":"MvvmLight 5.0 et la navigation"},"content":{"rendered":"

Nouveaut\u00e9s<\/h1>\n

Une grande nouveaut\u00e9 de MVVMLight5 <\/a>est l’apparition du\u00a0INavigationService<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

Le INavigationService<\/strong> est un Pattern permettant la navigation dans l’application sans utiliser la couche visuelle. Il est alors possible de migrer le m\u00eame code\u00a0sous diff\u00e9rentes plateformes sans les particularit\u00e9s de la navigation.<\/p>\n

Il sera \u00e9galement possible de tester les actions de navigation gr\u00e2ce aux tests unitaires automatis\u00e9s.<\/p>\n

<\/p>\n

Navigation entre les pages<\/h1>\n

Un petit rappel des diff\u00e9rentes impl\u00e9mentations de la navigation entre les pages d’une application.<\/p>\n

Sans MVVM et sans INavigationService<\/h2>\n

Dans une application standard (non MVVM), le passage d’une page \u00e0 l’autre va se faire de la fa\u00e7on suivante. Sur le click du bouton, on appelle la page concern\u00e9e.<\/p>\n

En Xaml :<\/p>\n

<Button Content=\"Go to Page 2\" \n                VerticalAlignment=\"Center\"\n                HorizontalAlignment=\"Center\"\n                Click=\"Button_Click\"\/><\/pre>\n
En Code Behind (Ici dans une application Windows 8.x \/ Windows Phone 8 Xaml)<\/p>\n
private void Button_Click(object sender, RoutedEventArgs e)\n{\n    Frame.Navigate(typeof(Page2));\n}\n<\/pre>\n
 <\/p>\n
En MVVM sans impl\u00e9mentation de l’\u00e9v\u00e8nement \u00ab\u00a0Click\u00a0\u00bb<\/h2>\n
Afin de ne pas coder les actions dans l’interface visuelle, nous allons passer par des ICommand<\/strong>.<\/p>\n
MVVM Light poss\u00e8de d\u00e9j\u00e0 les m\u00e9canismes pour utiliser les actions avec des RelayCommand<\/strong>.<\/p>\n
Nous utilisons une classe MainViewModel<\/strong> o\u00f9 nous allons coder l’action.<\/p>\n
public class MainViewModel\n{\n    public ICommand NavigatePage2Command { get; private set; }\n    public MainViewModel()\n    {\n        NavigatePage2Command = new RelayCommand(()=>\n        {\n\t\/\/ Code to Execute\n        });\n    }\n}\n<\/pre>\n
Cette classe est ensuite associ\u00e9e dans le XAML au niveau de la d\u00e9finition de la Page.<\/p>\n
DataContext=\"{Binding Source={StaticResource Locator}, Path=MainViewModel}\"<\/pre>\n
Le Bouton est alors cod\u00e9 de cette fa\u00e7on. L’action \u00ab\u00a0Command<\/strong>\u00a0\u00bb remplace l’\u00e9v\u00e8nement \u00ab\u00a0Click<\/strong>\u00a0\u00bb : Le bouton utilise le Binding<\/strong> pour associer l’\u00e9v\u00e8nement \u00e0 l’action.<\/p>\n
<Button \n  VerticalAlignment=\"Center\" \n  HorizontalAlignment=\"Center\"\n  Content=\"Page 2\"\n  Command=\"{Binding NavigatePage2Command}\"\n\/><\/pre>\n
Les probl\u00e8mes de la navigation.<\/h1>\n
Premier probl\u00e8me : L’ind\u00e9pendance de la Vue<\/h2>\n
La command se trouve dans le ViewModel. L’objet Frame<\/strong> qui est un objet visuel n’est pas accessible sauf \u00e0 ajouter un espace de nommage li\u00e9 \u00e0 la vue pour pouvoir le manipuler. En faisant cela on \u00ab\u00a0casse\u00a0\u00bb le\u00a0pattern ViewModel<\/strong>.<\/p>\n
Deuxi\u00e8me probl\u00e8me : Le codage sp\u00e9cifique<\/h2>\n
L’objet Frame est sp\u00e9cifique 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\u00e9rente.<\/p>\n
Ce qui se fait de plus courant, est l’impl\u00e9mentation d’une interface<\/strong> souvent appel\u00e9e INavigationService et de sa classe associ\u00e9e NavigationService.<\/p>\n
INavigationService va contenir les \u00e9l\u00e9ments de navigation, souvent des m\u00e9thodes NavigateToPage1, GoBack(),… et son impl\u00e9mentation (NavigationService) va coder les m\u00e9thodes de navigation propre \u00e0 chaque plateforme.<\/p>\n
Depuis quelques semaines, MVVM Light 5, fournit tout ce m\u00e9canisme \u00ab\u00a0in the Box\u00a0\u00bb.<\/p>\n
INavigationService du MVVM Light 5.0<\/h1>\n
Etape 1 : D\u00e9finition du Service dans ViewModelLocator.<\/h2>\n
Le ViewModelLocator sert \u00e0 initialiser tous les services et enregistrer\u00a0tous les ViewModel consult\u00e9s dans les vues.<\/p>\n
On va ajouter la ligne suivante dans son constructeur :<\/p>\n
SimpleIoc.Default.Register<INavigationService>(() => CreateNavigationService());<\/pre>\n
ce qui donne :<\/p>\n
static ViewModelLocator()\n{\n    ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);\n    SimpleIoc.Default.Register<INavigationService>(() => CreateNavigationService());\n...            \n    SimpleIoc.Default.Register<MainViewModel>();\n    SimpleIoc.Default.Register<Page2ViewModel>();\n}\n<\/pre>\n
CreateNavigationService()<\/strong> va contenir un r\u00e9f\u00e9rentiel sous forme de configuration de chaque page :<\/p>\n
private static INavigationService CreateNavigationService()\n{\n    var navigationService = new NavigationService();\n    navigationService.Configure(\"Page2\", typeof(Page2));\n    return navigationService;\n}<\/pre>\n
 <\/p>\n
Si vous avez plusieurs pages sur lesquelles vous voulez naviguer il faudra les d\u00e9finir \u00e0 cet endroit avec la m\u00e9thode Configure<\/strong>.<\/p>\n
Le r\u00e9f\u00e9rencement de ces pages s’effectue par une \u00ab\u00a0string\u00a0\u00bb ce qui peut \u00eatre source d’erreur. Je vous recommande de passer par la d\u00e9finition de constantes pour b\u00e9n\u00e9ficier de l’IntelliSense et \u00e9galement \u00e9viter toute confusion.<\/p>\n
public const string NavigationPage2 = \"Page2\";<\/pre>\n
Etape 2 : Navigation vers une page<\/h2>\n
Nous allons voir maintenant comment appeler une page dans le ViewModel<\/strong>.<\/p>\n
Sur le RelayCommand<\/strong> (associ\u00e9 au bouton dans le XAML), l’appel va se faire de la fa\u00e7on suivante :<\/p>\n
NavigatePage2Command = new RelayCommand(()=>\n    {\n        INavigationService navigationService = SimpleIoc.Default.GetInstance<INavigationService>();\n        navigationService.NavigateTo(ViewModelLocator.NavigationPage2);\n    });<\/pre>\n
Etape 3 (Optionnelle) : Retour vers la page pr\u00e9c\u00e9dente<\/h2>\n
On associe une action sur le Command<\/strong>\u00a0(NavigateBackCommand dans cet exemple). L’action est\u00a0associ\u00e9e au bouton retour, dans cette action,\u00a0on utilise la m\u00e9thode GoBack()<\/strong>. Cette\u00a0instruction provient directement de MVVMLight 5, il n’y a rien de plus \u00e0 faire.<\/p>\n
public ICommand NavigateBackCommand { get; private set; }\n\npublic Page2ViewModel()\n{\n    NavigateBackCommand = new RelayCommand(() =>\n    {\n        INavigationService navigationService = SimpleIoc.Default.GetInstance<INavigationService>();\n        navigationService.GoBack();\n    });\n}<\/pre>\n
Conclusion<\/h1>\n
MVVMLight<\/strong> dans sa version 5.0 simplifie de nouveau un peu plus le pattern M-V-VM en proposant les impl\u00e9mentations de navigation courantes directement dans ce Framework.<\/p>\n
Avec une version \u00ab\u00a0Portable\u00a0\u00bb, il est possible de cr\u00e9er un code tr\u00e8s propre et ind\u00e9pendant d’une plateforme tr\u00e8s facilement.<\/p>\n
Le code est ici<\/p>\n
\"T\u00e9l\u00e9chargement<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Nouveaut\u00e9s Une grande nouveaut\u00e9 de MVVMLight5 est l’apparition du\u00a0INavigationService. Le INavigationService est un Pattern permettant la navigation dans l’application sans utiliser la couche visuelle. Il est alors possible de migrer le m\u00eame code\u00a0sous diff\u00e9rentes plateformes sans les particularit\u00e9s de la navigation. Il sera \u00e9galement possible de tester les actions de navigation gr\u00e2ce aux tests unitaires […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59,62,63],"tags":[124,125,126,127,4,128,129,130,131],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/775"}],"collection":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/comments?post=775"}],"version-history":[{"count":0,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/775\/revisions"}],"wp:attachment":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/media?parent=775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/categories?post=775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/tags?post=775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}