Archives pour la catégorie Clouder

Windows Metro – Clouder! (7) – Réalisation de la page « track »

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

Lire la suite

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

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.

Lire la suite

Windows Metro – Clouder! (5) – Créer un objet SoundCloudService pour structurer son code

Dans le dernier tutorial, on a donné un peu de style à notre application Windows 8 Metro en passant par Microsoft Blend for Visual Studio:

Windows Metro – Clouder! (4) – Donner du style avec Microsoft Blend

Pour l’instant, on a tout codé dans la fonction « ready », notre appel XHR au service SoundCloud et la manipulation de notre vue. Bien sûr, ce ne sera pas le dernier appel au service SoundCloud que l’on va réaliser, on va devoir récupérer des titres selon certains critères (prévus dans l’API SoundCloud), des commentaires, des informations utilisateur, …

Pour éviter de se retrouver avec trop de code / logique dans chaque « page », on va centraliser ces appels XHR dans un objet « SoundCloudService » qui servira uniquement à créer des appels XHR vers SoundCloud.

Création d’objets, de namespaces, notions de « classes »

Pour créer un objet SoundCloudService, vous avez pas mal d’options. Vous avez tout d’abord les méthodes WinJS.Namespace.define et WinJS.Class.define:

Windows Metro – Les fonctions WinJS.Namespace.define et WinJS.Class.define

En gros, WinJS.Namespace.define vous permet de garnir un Namespace avec des propriétés (hors prototype). WinJS.Class.define vous rappellera un peu le système de classe en programmation orientée objet (JavaScript n’a pas de notion de « classes » mais simplement des objets, toujours dynamiques). Vous pouvez créer des « classes » en ajoutant des fonctions (méthodes) et des variables (propriétés) au prototype de l’objet.

Ces méthodes sont simplement des raccourcis vers un fonctionnel JavaScript « classique » du web. A noter une petite spécificité, si vous utilisez ces méthodes, WinJS va marquer toutes les fonctions comme « supportedForProcessing », plus d’informations ici:

Windows Metro – Marker des fonctions comme « supportedForProcessing » pour pouvoir les utiliser dans le markup HTML (data-win-*)

Il y a aussi une autre technique que vous verrez dans de nombreux exemples de chez Microsoft. La technique est d’isoler votre code dans une « self executing anonymous function » qui se définit comme ceci:

(function () {
    "use strict";
	// vars ...
	// fonctions ...
})();

Tout le code qui se trouve dans cette fonction ne sera pas visible de l’extérieur, et c’est le but. Sauf qu’un objet complètement opaque depuis l’extérieur, cela ne sert pas à grand chose. Vous allez donc pouvoir lui déclarer une « API publique », c’est-à-dire des fonctions qui seront visibles depuis l’extérieur de cette fonction.

Cela se fait par un appel à WinJS.Namespace.define, par exemple:

(function () {
    "use strict";
	function someProtectedFunction(){
		// whatnot
	};
	function someNotExposedFunction(){
		// can't see me
	};
	WinJS.Namespace.define("SomeNamespace", {
        somePublicAPIFunction: someProtectedFunction
    });
})();

Vous pourrez ensuite accéder à la fonction par SomeNamespace.somePublicAPIFunction, qui sera une sorte de lien symbolique vers someProtectedFunction. Vous ne pourrez en revanche pas accéder à « someNotExposedFunction depuis l’extérieur car son scope est celui de la fonction.

Si vous n’avez pas tout compris, je vous conseille tout de même de réviser un peu votre JavaScript, cela vous aidera à comprendre les exemples en ligne:

http://bonsaiden.github.com/JavaScript-Garden/

Création de l’objet SoundCloudService

Maintenant que j’ai présenté plusieurs technique, laquelle va-t-on utiliser? Et bien aucune de celles-là, on va la faire « à l’ancienne ». Même si cela parait plus verbeux, on va créer un objet SoundCloudService en définissant son prototype et l’instancier puis on va assigner l’instance dans un namespace applicatif.

La raison de ce choix est assez personnelle, même si les approches proposées par WinJS (ou pas d’autres librairies) semblent plus sexy, au final j’arrive plus à lire un code simple basé sur prototype. Libre à vous de faire différemment (la version originale de Clouder est par exemple créée à partir de la technique des self-executing functions, expliquée plus haut.

Lire la suite

Windows Metro – Clouder! (4) – Donner du style avec Microsoft Blend

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).

Lire la suite