Dans les derniers tutoriaux, on a utilisé les fonctionnalités unifiée de Windows 8 Metro comme la recherche ou le partage:

Windows Metro – Clouder! (11) – Utiliser la recherche intégrée à Windows 8 dans son application

Windows Metro – Clouder! (12) – Afficher ses suggestions de recherche dans la recherche unifiée Windows 8

Windows Metro – Clouder! (13) – Partager une URL avec le Share Charm de Windows 8

Dans ce 14ème tutorial, on va voir une autre notion propre aux application Windows 8 Métro, ce sont les « Tiles » (tuiles) du menu démarrer qui représentent chacune une application:

Pour l’instant, notre application a un pauvre carré comme icône. C’est encore une chose différente, qui se passe dans le manifest (descriptif) de l’application que l’on verra plus tard. Ce que vous ne voyez pas sur cette capture d’écran, c’est que ces tuile sont animées. Ainsi, on peut voir le texte puis la photo correspondante. C’est parfait pour notre application, on va pouvoir afficher les pochettes des albums et les artistes / titres dans nos tuiles.

Mise en place de Tiles avec Notifications

Encore une fois, la documentation fournie par Microsoft est très bien fournie:

Creating tiles (Metro style apps using JavaScript and HTML)

Avec notamment une application exemple qui contient de très nombreux exemples:

App tiles and badges sample

Pour définir nos tuiles, on va en fait utiliser des mini-documents HTML contenant les informations à utiliser dans nos tuiles. Pour nous faciliter la tâche, Microsoft met à la disposition des développeurs pas moins de 45 templates différents, déjà présentés et prêt à être utilisés dans votre application.

Voici la liste des templates:

TileTemplateType enumeration

Une autre subtilité des Tiles Windows 8, c’est qu’elle peuvent avoir deux tailles (square et wide). Par exemple, sur le screenshot ci-dessus, la Tile Allociné prend 2 emplacement alors que la Tile ClouderTutorial n’en prend qu’un. C’est l’utilisateur qui peut décider s’il veut que la Tile soit en taille grande ou réduite. Il faut donc prévoir les 2 cas mais Windows a prévu un sample / tutorial pour cela:

How to specify a square and wide tile in the same notification (Metro style apps using JavaScript and HTML)

On va en fait créer nos deux définitions XML puis faire une sorte de « merge » dans un seul document XML. Pour l’instant, on va se concentrer sur notre première tuile.

On va créer nos définitions XML de tuiles à partir des « hottest tracks » que l’on récupère au démarrage. Dans onHottestTracks, ajoutez donc ce code:

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
    });
    // notification tiles
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);
    for (var i = 0, l = data.length; i < l; i++) {
        var item = data[i];
        // notifications
        if (i > 4) {
            continue;
        }
        var tileImageSrc = item.artwork_url;
        var Notifications = Windows.UI.Notifications;
        var squareTileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileSquareImage);
        var squareTileImageAttributes = squareTileXml.getElementsByTagName("image");
        squareTileImageAttributes[0].setAttribute("src", tileImageSrc);

        var tileNotification = new Notifications.TileNotification(squareTileXml);
        Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
    }
},

Petite explication de code. On commence par appeler:

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);

Pour indiquer à Windows qu’il va devoir faire défiler les tuiles automatiquement (5 max, limite Windows).

Ensuite, on boucle sur notre résultat puis pour chaque track, on va créer notre définition de tuile avec :

var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileSquareImage);

qui renvoie un DOM XML. On remplit donc notre XML avec les API DOM classiques (getElementByTagName, appendChild, createTextNode, …).

Lancez donc l’application, attendez la récupération des titres puis revenez sur l’écran de démarrage (touche Windows):

Définir à la fois les tuiles « square » et « wide »

Maintenant, on va définir les deux tailles de tuiles, pour être correct. On va simplement faire un merge des deux documents XML créés en un seul qui sera mangé par Windows.

Vous pouvez remarquer que l’on a pris le template « tileWidePeekImage01 » depuis les exemples de template de Windows. Ces templates contiennent un ou plusieurs éléments « <image> » et « <text> » suivant le template. Dans notre cas, le template contient une image et 2 textes:

for (var i = 0, l = data.length; i < l; i++) {
    var item = data[i];
    // notifications
    if (i > 4) {
        continue;
    }
    var tileImageSrc = item.artwork_url;
    var Notifications = Windows.UI.Notifications;
    var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileWidePeekImage01);
    // Get the text attributes for this template and fill them in.
    var tileTextAttributes = tileXml.getElementsByTagName("text");
    tileTextAttributes[0].appendChild(tileXml.createTextNode(item.subtitle));
    tileTextAttributes[1].appendChild(tileXml.createTextNode(item.title));
    // Get the image attributes for this template and fill them in.
    var tileImageAttributes = tileXml.getElementsByTagName("image");
    tileImageAttributes[0].setAttribute("src", tileImageSrc);

    var squareTileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.TileTemplateType.tileSquareImage);
    var squareTileImageAttributes = squareTileXml.getElementsByTagName("image");
    squareTileImageAttributes[0].setAttribute("src", tileImageSrc);

    //  Add the square tile to the wide tile's payload
    var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
    tileXml.getElementsByTagName("visual").item(0).appendChild(node);

    var tileNotification = new Notifications.TileNotification(tileXml);
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
}

Maintenant, on peut avoir aussi notre tuile « wide » mais il faut que l’application définisse qu’elle peut afficher les 2 types de tuiles

Définir quels types de tuiles l’application peut afficher

Cela se passe dans le fichier descriptif de l’application alias le manifest. Dans Visual Studio, ouvrez le fichier package.appxmanifest qui se trouve à la racine de votre projet. Dans l’onglet « Application UI », vous pouvez définir de nombreuses choses dont le « Wide Logo ». S’il n’est pas défini, l’utilisateur ne pourra pas avoir une tuile « wide » dans votre projet. Créez donc une image de 310x150px puis assignez la comme « Wide Logo ».

Ensuite, relancez votre application puis retournez dans le menu démarrer. Faîtes un click droit sur l’application et un menu va apparaître avec des options Smaller / Larger:

Vous pourrez voir que notre tuile se comporte bien dans les deux cas !

Conclusion

De manière très rapide, on a réussi à avoir de très belles tuiles, bien intégrées à l’interface Metro de Windows 8. Pour être pointilleux, il aurait fallu modifier les URLs des artwork_url pour récupérer des images à la bonne taille pour chaque tuiles. Mais ça, c’est du détail.

Il y a beaucoup d’autres options et choses à faire avec les tuiles, pour cela, rendez-vous sur la documentation ;)