Dans la partie 3 de ce fil rouge, on a vu comment on pouvait lier de la donnée (tableau d’objets JavaScript) avec un composant graphique issue de la librairie WinJS (WinJS.UI.ListView):

Windows Metro – Clouder! (3) – Afficher une liste de titre depuis SoundCloud

Mais malgré l’ajout d’un peu de CSS, le résultat laisse à désirer. Pour permettre de donner facilement du style à une application Metro, vous pouvez utiliser Microsoft Blend, qui doit être installé sur votre VM si vous avez installé le SDK. Rendez-vous donc dans le menu Démarrer (touche Windows ou rollover dans le coin en bas à gauche puis lancez MS Blend for Visual Studio:

Puis Open Project et allez ouvrir votre projet Visual Studio (fichier .sln):

Vous pouvez remarquer que l’interface se découpe en plusieurs panneaux dont le panneau central qui affiche déjà le résultat de votre application!:

Plutôt une bonne surprise :). Cliquez sur un item de la liste pour pouvoir « descendre dans le DOM » de celui-ci:

Sélectionnez le bloc du bas contenant le texte, qui a pour le moment, un fond transparent:

Dans la partie de droite, tapez « backg » dans la zone de recherche:

Cela va filtrer les propriétés CSS listées. Faites donc le test en modifiant la « background-color » en cliquant sur « Not set », une palette va apparaître. Cliquez sur celle-ci et vous verrez que le rendu des éléments de la liste va se mettre à jour automatiquement:

Plutôt pratique. Mais c’est dommage, on assigne un couleur simple alors que l’on pourrait avoir un résultat plus sympa en faisant un dégradé CSS avec un peu de transparence (pour laisser voir la jaquette derrière).

Je n’ai pas trouvé comment faire un dégradé directement dans Blend alors on va utiliser un outil fournit par Microsoft qui va nous donner la bonne syntaxe:

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/

Je vous laisse choisir les couleurs qui vous plaisent, moi je suis arrivé à ce résultat:

background-color: #F60;
background-image: linear-gradient(to bottom, #FF6600 0%, #FF3600 100%);
fill-rule: inherit;
opacity: 0.85;

Attention lors des copier-coller, Blend n’apprécie pas quand on laisse un « ; » en fin de ligne. Remplissez donc chaque propriété et voici à quoi ressemble votre item:

N’oubliez pas d’enregistrer votre projet dans Blend (Ctrl+Shift+S).

Retour dans Visual Studio

Retournez donc dans Visual Studio (Ctrl+Tab fonctionne toujours) et Visual Studio va vous prévenir qu’il a détecté des changements. Yes for all:

Si vous retournez dans default.html, vous pouvez voir qu’il a tout mis en inline au niveau du style du div:

<div class="item-overlay" style="background-color: #F60; background-image: linear-gradient(to bottom, #FF6600 0%, #FF3600 100%); fill-rule: inherit; opacity: 0.85;">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>

On va plutôt créer une classe CSS « .orangeGradient » dans default.css et l’assigner comme class au div:

.orangeGradient {
    background-color: #F60; 
    background-image: linear-gradient(to bottom, #FF6600 0%, #FF3600 100%); 
    fill-rule: inherit; 
    opacity: 0.85;
}

et

        <div class="item-overlay orangeGradient">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>

Ajout de plus d’information sur les templates

On a pas fait tout ça pour un pauvre dégradé CSS, on va ajouter de nouvelles informations à notre template, notamment le nombre de personnes qui ont aimé le titre, le nombre de lectures, et le nombre de commentaire. On trouve ces informations dans le retour JSON de SoundCloud, respectivement dans « favoritings_count », « playback_count », « comment_count ».

Ajoutons donc ces informations à notre template:

    <!-- TRACK TEMPLATE -->
     <div class="trackTemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: artwork_url; alt: title" />
         <div class="topBar orangeGradient" style="height:20px;margin:5px;text-align:center;">
            <span class="commentCount" data-win-bind="textContent: comment_count"></span>
            <span class="playCount" data-win-bind="textContent: playback_count"></span>
            <span class="favoriteCount" data-win-bind="textContent: favoritings_count"></span>
        </div>
        <div class="item-overlay orangeGradient">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>

Ici, on réutilise notre class CSS orangeGradient, voici ce que cela donne:

Comme je l’ai dit plus haut, la requête API que l’on utilise renvoie les derniers titres de la plateforme, il est donc normal de ne voir que des 0, vous aurez peut-être des 1 de temps en temps comme sur cette capture.

Ajouter des icônes en CSS3

Comme ça, les nombres n’ont aucune signification. Comme on a pas la place de mettre un texte explicatif, on va mettre des icônes. On va même être malin et utiliser des icônes sous la forme de caractères, grâce à des directives CSS3. Microsoft met en fait à disposition toute une série d’icônes assez génériques que vous pouvez utiliser dans vos applications.

Voici un article qui récapitule les icônes que vous pouvez trouver dans la font « Segoe UI Symbol »:

http://www.jonathanantoine.com/2012/03/05/winjs-out-of-the-box-available-icons/

Pour mettre nos icônes avant chaque span, on va utiliser le selecteur CSS « ::before » comme ceci:

/* http://www.jonathanantoine.com/2012/03/05/winjs-out-of-the-box-available-icons/ */
.commentCount::before {
    font-family: "Segoe UI Symbol";
    content:"\E134";
}
.playCount::before {
    font-family: "Segoe UI Symbol";
    content:"\E102";
}
.favoriteCount::before {
    font-family: "Segoe UI Symbol";
    content:"\E19F";
}
.trackCount::before {
    font-family: "Segoe UI Symbol";
    content:"\E15D";
}
.followersCount::before {
    font-family: "Segoe UI Symbol";
    content:"\E13D";
}

Les codes (« \E… ») sont ceux trouvés sur la page citée plus haut. Copiez donc ce bloc de CSS dans votre fichier default.css. Relancez l’application:

Bon c’est rageant ces 0 alors on va modifier l’appel API pour renvoyer des résultats plus sympas, moins « frais ». Pour cela, on va utiliser le filtre « order » qui peut prendre comme valeur « created_at » (les dernières) ou « hotness » (les plus populaires). Changez donc l’URL de l’appel HXR en:

https://api.soundcloud.com/tracks.json?order=hotness&client_id=2e601fddcc4a07954c3da7077f81a1e1

Et vous obtiendrez:

Conclusion

Fin de la partie 4, c’est déjà plus joli, cela commence même à avoir de la gueule :). Dans le prochain tutorial, on va voir comment organiser un peu son code, corriger quelques détails, etc.