On l’a vu dans les tutoriaux précédent sur le développement HTML5 pour Windows 8 Metro, ces applications « web » sont assez différentes des pages web classiques que vous avez l’habitude de coder.

Dans une page web classique, l’utilisateur navigue de page en page avec des liens hypertexte (balise <a>) ou en modifiant la propriété document.location en JavaScript. Pour faire passer de l’information entre les pages, vous avez les requêtes GET / POST ou les mécanismes HTML5 comme sessionStorage et localStorage.

Ce type de navigation pose problème avec les applications Windows Metro. En effet, naviguer vers une nouvelle page voudrait dire changer de contexte d’exécution et toutes les variables de la page précédente seraient perdues. En plus de cela, cela produirait un blanc, car les styles sont rechargés et vous ne pourriez pas faire de transition entre les pages.

Les applications Windows 8 Metro fonctionnent en fait comme des « Single-Page-Web-App ». Vous avez un contexte principal, celui de l’application. Le concept de pages va en fait se contenter de remplacer un élément DOM principal par la page courante.

Les Pages et la navigation entre les Pages

De base, l’application elle-même ne fournit aucun mécanisme pour travailler avec des pages, il faut donc faire soi-même l’implémentation en JavaScript. Heureusement, les créateurs de WinJS vous fournissent plusieurs outils pour vous aider à travailler facilement sans vous soucier de l’implémentation. Vous allez simplement créer vos pages unes à unes et indiquer quand naviguer vers telle ou telle page.

Voici ce qui est fourni avec WinJS:

• WinJS.UI.Fragments qui est l’API « bas-niveau » pour charger des fragments de pages. Vous n’allez sûrement pas manipuler cette API directement mais utiliser les API plus haut niveau.
• WinJS.UI.Pages est cette API haut niveau qui va vous permettre de créer et de manipuler directement des pages. C’est cette API qui est utilisée dans les templates de base des applications Metro (Windows Metro – Les templates pour application JavaScript (Grid, Navigation, Split, …)). Grâce à l’API Pages, vous pouvez créer un « composant Page » qui est un composant HTML / CSS / JS que vous pouvez intégrer dans une autre page comme n’importe quel composant. Vous pouvez donc les créer dans le markup HTML ou en JavaScript

Pour réaliser la navigation entre ces pages, vous allez avoir besoin de deux autres éléments:

• Une gestion de la stack de navigation (pile des Pages avec gestion du précédent / suivant)
• Un mécanisme permettant de charger / décharger les objets Pages correctement dans le conteneur applicatif

L’API WinJS.Navigation

L’objet WinJS.Navigation vous fournit la stack de navigation. Une classe assez simple avec la pile de navigation et

• des propriétés « state », « location », « history », « canGoBack », « canGoForward ».
• des méthodes « forward », « back, « navigate »
• des évènements « beforenavigate », « navigating », « navigated »

Vous devrez tout avoir dans cet objet pour manipuler vos pages sans avoir à écrire du code pour le gérer.

L’objet PageControlNavigator

L’objet PageControlNavigator ne fait pas partie de WinJS mais fait partie de certains template fournis avec le SDK. Ce composant va s’occuper de charger / décharger vos Pages.

Dans le prochain tutorial, on va voir comment mettre en place facilement ses éléments grâce au template projet Navigation.