Dans l’article précédent, on a vu les objets de WinJS qui vous aideront à réaliser une application utilisant le modèle de navigation des applications Windows 8:

Vous avez donc l’API WinJS.Navigation, WinJS.UI.Pages et le composant PageControlNavigator dans les mains. Pour vous aider à lier ces 3 éléments simplement, WinJS vous offre aussi le template Navigation:

Windows Metro – Les templates pour application JavaScript (Grid, Navigation, Split, …)

En combinant ces 3 éléments, vous allez pouvoir réaliser une Single Page Web Application de manière très simple.

Le template Navigation

Voici ce que contient le template Navigation par défaut:

default.html : contient un simple div associé à un composant PageControlNavigator qui pointe sur « pages/home/home.html »
js/default.js : contient un code de base permettant de démarrer l’application
css/default.css : styles de base
pages/home contient une « page », composée des fichiers home.html, home.js et home.css. C’est la structure de base pour une page
js/navigator.js : contient l’implémentation du composant PageControlNavigator

Par la suite, vous allez bien sûr ajouter des pages à votre application. Le plus simple est de créer un dossier par page avec les fichiers HTML / CSS / JS qui correspondent. Pour cela, Visual Studio vous aide un peu. Clic-droit sur le dossier « pages » dans le Solution Explorer, Add > New Item > Page Control.

Le composant PageControlNavigator

Voici le contenu du fichier default.html:

<div id="contenthost" data-win-control="appName.PageControlNavigator"
    data-win-options="{home: '/pages/items/items.html'}">
</div>

Ici, appName sera remplacé par le nom de votre application à sa création. En effet, PageControlNavigator est un composant qui ne fait pas partie de WinJS. VisualStudio renomme donc directement son « package » pour le mettre dans votre « package applicatif ».

A ce composant, on ne passe qu’une option pour l’instant, la première page qui devra être affichée avec l’option « home ». Toutes les pages sont définies par un identifiant qui est le chemin vers cette page.

La page (fragment) par défaut

Voici le contenu de la page home.html par défaut:

<!DOCTYPE html>
<html>
<head>
    <!--... typical HTML header and WinJS references omitted -->
    <link href="/css/default.css" rel="stylesheet">
    <link href="/pages/home/home.css" rel="stylesheet">
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to NavApp!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

Ce fragment est en fait une page HTML « classique » qui pourrait tourner toute seule avec des balises body, head, link et script. Cette page contient un bouton « Back » qui aura automatiquement le comportement attendu grâce au PageControlNavigator. Il ne vous reste plus qu’à modifier le tag <h1> et le contenu du tag <section>.

Petite précision, même si les scripts de WinJS sont référencés dans toutes les pages, ils ne sont pas rechargés, il vous servent juste à éditer la page directement dans Microsoft Blend.

Définir une Page en JavaScript

Voici comment est définie la page par défaut:

(function () {
    "use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
            // TODO: Initialize the page here.
        }
    });
})();

On utilise donc la function WinJS.UI.Pages.define qui associe une URL et un objet contenant les méthodes du composant Page. L’URL que l’on fournit à cette méthode est à la fois l’URL de la page à charger et l’identifiant unique de la page.

Notez aussi que vous pouvez faire plusieurs appels successifs à la méthode define. Cela vous permettra d’ajouter des membres ou de remplacer les membres existants.

Si vous utilisez le template Page Control, vous aurez quelques méthode de plus à ajouter avec des TODO:

(function () {
    "use strict";
WinJS.UI.Pages.define("/page2.html", {
        ready: function (element, options) {
        },
updateLayout: function (element, viewState, lastViewState) {
            // TODO: Respond to changes in viewState.
        },
unload: function () {
            // TODO: Respond to navigations away from this page.
        }
    });
})();

Une fois que votre page est définie en JavaScript, vous pouvez récupérer le constructeur de cette page par la méthode WinJS.UI.Pages.get(URL). Vous pourrez ensuite l’instancier grâce à l’opérateur new, en lui passant un élément parent et un objet contenant des options.

Les méthodes importantes des Pages

Votre objet Page peut avoir la structure que vous souhaitez, vous pouvez bien sûr lui donner toutes les méthodes que vous voulez. Mais certaines sont utiles dans une utilisation avec le composant PageControlNavigator, notamment:

init : exécuté avant que les éléments de la page n’aient été ajoutés au DOM
processed : exécuté après l’appel à WinJS.UI.processAll. A ce moment, tous les composants sont instanciés mais pas encore ajoutés au DOM
ready : exécuté une fois que la page a été ajoutée au DOM
error : exécuté si une erreur se produit pendant le chargement ou le rendu de la page
unload : quand l’utilisateur a navigué vers une autre page
updateLayout : signale un changement entre les états landscape, fill, snap et portait

La plupart du temps, vous allez simplement faire votre traitement (remplir des listes, …) dans la méthode ready. La méthode updateLayout vous servira à adapter votre page à un rendu snap par exemple:

Windows Metro – Les différents états d’affichage (portrait, snapped,full screen, …)

Naviguer vers une page avec WinJS.Navigation

Maintenant que votre nouvelle page est en place, il ne vous reste plus qu’à naviguer vers cette dernière, à l’issue d’une interaction utilisateur par exemple. Pour cela, il suffit d’appeler la méthode navigate de l’objet WinJS.Navigation en lui passant l’URL de la page à charger (= son identifiant):

WinJS.Navigation.navigate("/pages/groupDetail/groupDetail.html")

HTML5 Tutorial

Tutoriaux sur les nouvelles technologies web

Windows Metro – Utiliser le template Navigation pour simuler une Single Page Web App