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:
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.
En suivant le tuto avec soin (je l’espère :)), à cette étape quand je sélectionne un item de la list view de la page home, la page track ne replace pas la page home, mais se supperpose à celle-ci …
Une idée ?
Hum étrange, je n’ai jamais vu ça.
Tu peux essayer de comparer le résultat avec l’application de l’étape 9?
http://html5-tutorial.fr/wp-content/uploads/clouder/ClouderTutorial-2.zip
Fabien