Dans le tutorial précédent, on a vu comment naviguer depuis la page « home » vers la page « track »:

Windows Metro – Clouder! (6) – Naviguer vers une page de détail au click sur une ListView

Assez simple et on a vu comment récupérer le morceau sélectionné. On va maintenant venir peupler notre vue avec ces informations.

Mise en place du layout avec display: ms-grid

A part si vous être un intégrateur chevronné, vous devez peut-être avoir du mal avec le positionnement CSS qui est difficile à mettre en place, surtout avec sa gestion anarchiques des « % ». Pour se faciliter la vie, IE10 (donc les applications métro) implémente un système de « grid » bien pratique à manipuler et à configurer. Cela se passe toujours en CSS, avec des pixels, mais aussi des « fr » (fraction) et des -ms-grid-columns et -ms-grid-rows.

Je vous conseille fortement la lecture de cette article:

Grid Layout (IE10)

Notre page se constitue de deux colonnes. La première (taille fixe) va contenir des informations sur l’artiste, la jaquette et des informations sur le morceaux. La deuxième va contenir la liste des commentaires (taille variable).

Voici le code CSS correspondant à intégrer dans track.html, dans le head:

    <style>
        #container {
          display: -ms-grid;
          -ms-grid-columns: 400px 1fr;
          -ms-grid-rows: 100%;
          margin-left: 120px;
        }
        #firstColumn {
          -ms-grid-column: 1;
        }
        #secondColumn {
          -ms-grid-column: 2;
        }
    </style>

Et le DOM HTML correspondant:

        <section id="container" role="main">
            <div id="firstColumn" style="background-color:green;">
                <div>firstColumn</div>
            </div>
            <div id="secondColumn" style="background-color:red;">
                <div>secondColumn</div>
            </div>
        </section>

Ce qui donne:

Enlevez ces couleurs criardes, on va ajouter notre DOM.

            <div id="firstColumn" style="background-color:green;">
                <div id="artistSection" style="height:60px;">
                    <img id="avatarUrl"
                        style="padding-top:10px;width:50px; height:50px;float:left;padding-right:10px;" src="#"/>
                     <div style="width:100%;">
                        <h2 id="trackPageArtist" class="pagetitle win-type-ellipsis" style="display: inline; "></h2>
                        <h4 id="releaseDate" class="win-type-ellipsis"></h4>
                    </div>
                </div>
            </div>

puis allez remplir les textes à la main dans le JS:

    WinJS.UI.Pages.define("/pages/track/track.html", {
        track : null,

        ready: function (element, options) {
            this.track = options.selectedTrack;
            document.getElementById("trackPageArtist").textContent = this.track.user.username;
            document.getElementById("releaseDate").textContent = this.track.created_at;
            document.getElementById("avatarUrl").src = this.track.user.avatar_url;
        },

Voilà un début de résultat:

La date n’est pas très humainement lisible, on va corriger cela

Formater une date de type « 2009/08/13 18:30:10 +0000 » en une date lisible

La date est dans un format standard qui n’est malheureusement pas très lisible. Heureusement, comme c’est standard, c’est utilisé par d’autres comme Twitter et donc on peut facilement trouver des méthodes de parse. Ma préférée est celle qui renvoie un texte du type « il y a 2 jours » et pas simplement la date JJ/MM/YYYY.

Ce type de fonction n’aura rien à faire dans track.js, on va donc tout de suite créer un fichier JS « utils.js » contenant nos fonctions utilitaires. Dans default.html, n’oubliez pas d’intégrer le fichier:

<script src="/js/utils.js"></script>

Puis dans la fichier en question:

Utils = {};
Utils.parseTwitterDate = function (date) {
    var system_date = new Date(Date.parse(date));
    var user_date = new Date();
    var diff = Math.floor((user_date - system_date) / 1000);
    if (diff <= 1) { return "just now"; }
    if (diff < 20) { return diff + " seconds ago"; }
    if (diff < 40) { return "half a minute ago"; }
    if (diff < 60) { return "less than a minute ago"; }
    if (diff <= 90) { return "one minute ago"; }
    if (diff <= 3540) { return Math.round(diff / 60) + " minutes ago"; }
    if (diff <= 5400) { return "1 hour ago"; }
    if (diff <= 86400) { return Math.round(diff / 3600) + " hours ago"; }
    if (diff <= 129600) { return "1 day ago"; }
    if (diff < 604800) { return Math.round(diff / 86400) + " days ago"; }
    if (diff <= 777600) { return "1 week ago"; }
    return "on " + system_date.toDateString();
};

Il ne reste plus qu’à remplacer dans l’appel:

document.getElementById("releaseDate").textContent = Utils.parseTwitterDate(this.track.created_at);

Résultat:

Affichage jaquette et statistiques

Un peu comme sur l’écran d’accueil, on va rappeler les statistiques du titre et sa pochette. On commence par le DOM, en reprenant la barre de stats de l’écran d’accueil:

	<div class="orangeGradient" style="height:20px;margin:10px 5px 5px;text-align:center;">
		<span id="commentCount" class="commentCount"></span>
		<span id="playCount" class="playCount"></span>
		<span id="favoriteCount" class="favoriteCount"></span>
	</div>
	<div>
		<img id="artworkImgBig" class="item-image" data-win-control="Application.DelayImageLoader" src="#" 
			style="padding-top:10px;width:400px;"/>
	</div>
   
</div>
<div id="secondColumn">
...

Puis on remplit en JS:

document.getElementById("artworkImgBig").src = this.track.artwork_url ? this.track.artwork_url.replace("large", "crop") : null;
document.getElementById("commentCount").innerHTML = this.track.comment_count;
document.getElementById("playCount").innerHTML = this.track.playback_count;
document.getElementById("favoriteCount").innerHTML = this.track.favoritings_count;

Au passage, on prend une image « large » au lieu de « crop ». L’image « crop » ne fait que 300×300, la large est plus grande et sera de meilleure qualité.

Résultat:

Conclusion

Notre page de détail commence à prendre forme. Pour l’instant, on a uniquement utilisé les informations provenant de l’objet track de SoundCloud. Dans la prochaine partie, on va récupérer les commentaires associés à un morceau avec un autre appel à l’API SoundCloud.