Grâce aux 5 derniers tutoriaux, on a maintenant une page d’accueil qui affiche des morceaux provenant de SoundCloud. On va continuer en explorant le concept des « pages » de Windows 8. Les applications Windows 8 ne sont pas composées de pages séparées comme on peut le voir sur le web mais d’un conteneur qui charge des pages à la volée.

La navigation dans les applications Windows 8 Metro se fait souvent Group -> List -> Details, il vous faudra donc vous habituer à naviguer entre les pages.

Créer une nouvelle page « track »

On va commencer par créer une nouvelle page nommée « track ». Rendez-vous dans le Solution Explorer de Visual Studio 2012, click droit sur « pages » > Add > New Folder. Si vous êtes en débug, stopper le debug ou vous ne pourrez pas renommer le dossier (faiblesse de VS). Nommez-le « track » puis click droit dessus > Add > New Item … > Windows Metro Style > Page Control. Nommez-là « track.html » en bas de la fenêtre puis Add.

VS vient de vous créer track.css, track.html, track.js, c’est notre nouvelle « page » que l’on va alimenter plus tard.

Réagir à la sélection d’un item de ListView

Pour arriver à la page track, il faut la sélectionner dans l’écran d’accueil. On va donc placer un handler sur la liste pour capter cet évènement. Dans le cadre d’un composant ListView, cet évènement se nomme « oniteminvoked »:

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        
        itemInvoked: function (args) {
            // TODO
        },

        onHottestTracks : function(data){
            var list = new WinJS.Binding.List(data);
            var listView = document.querySelector(".tracklist");
            WinJS.UI.setOptions(listView.winControl, {
                layout: new WinJS.UI.GridLayout(),
                itemDataSource: list.dataSource
            });
        },

        ready: function (element, options) {
            window.soundCloudService.getTracks({ order: "hotness" }, this.onHottestTracks);
            var listView = document.querySelector(".tracklist").winControl;
            WinJS.UI.setOptions(listView, {
                oniteminvoked: this.itemInvoked
            });
        }
    });
})();

On lie donc « oniteminvoked » avec la fonction itemInvoked. Pour récupérer l’objet sélectionné, c’est assez coton. WinJS va en fait vous faire passer dans « args », une « itemPromise », c’est-à-dire que vous n’avez pas accès directement à l’objet sélectionné mais à une «  »promesse » » de vous fournir l’objet.

Assez difficile à traduire tout ça, tout ce que vous devrez savoir, c’est ce petit bout de code pour récupérer l’objet sélectionné:

        itemInvoked: function (args) {
            args.detail.itemPromise.done(function a(item) {
                // item contient les informations intéressantes sur l'objet sélectionné
            });
        },

Navigation vers une page et passage de paramètre

Une fois que l’on aura navigué vers la page track, on aura perdu tout le « contexte » de la page home. On va donc faire passer à la page track, l’objet sélectionné. On va le trouver dans la propriété « data » de item, qui va contenir notre objet JSON track venant de SoundCloud.

On va utiliser la fonction WinJS.Navigation.navigate(page, options) pour faire passer la data à l’autre page:

        itemInvoked: function (args) {
            args.detail.itemPromise.done(function a(item) {
                WinJS.Navigation.navigate("/pages/track/track.html", { selectedTrack: item.data });
            });
        },

Récupération des paramètres

Maintenant que notre data est passée à la page track, on va voir comment la récupérer. Notre objet options va en fait être passé à la méthode « ready » de notre page « track »:

        ready: function (element, options) {
            var selectedTrack = options.selectedTrack;
            console.log(selectedTrack);
        },

Lancez l’application, cliquez sur un item et vous devriez avoir « [object Object] » dans la console. C’est notre objet track.

Dans le prochain tutorial, on va se servir de cet objet pour peupler notre vue.