Comment créer un petit lecteur RSS pour Windows 8 Metro en HTML5 en 30 min (partie 2/2)

Nous allons maintenant voir comment afficher le détail des articles de blogs. Pour cela, nous allons utiliser une animation de transition, jouer avec le simulateur et continuer à utiliser Blend pour mettre en place du CSS3 Multi-columns.

Comme toujours, vous trouverez à la fin une vidéo déroulant les étapes que vous pouvez suivre en lisant cet article ainsi que le code source de la solution.

Cet article fait suite au précédent : Comment créer un petit lecteur de flux RSS pour Windows 8 Metro en HTML5 et en 30 min (partie 1/2)

Au menu pour ce deuxième article :

- Etape 1 : utiliser le simulateur
- Etape 2 : afficher le détail de l’article
- Etape 3 : finaliser le design de la vue détail sous Blend
- Etape 4 : vidéo et code source à télécharger

Note : cet article a été mis à jour le 04/06/2012 pour tenir compte des changements présents dans l’interface et le code des versions Windows 8 Release Preview par rapport à la Consumer Preview. D’une manière générale, vous trouverez un document complet sur les fameux “breaking changes” entre CP et RP ici : document de breaking changes. Il devrait vous aider à migrer vos applications. Sur ce 2ème article, la nouvelle version n’a eu aucun impact.

Etape 1 : utiliser le simulateur

Il est important de savoir comment son application se comporte au touch et avec les différentes résolutions des futurs PC et tablettes Windows 8.

Avant de vous ruer sur l’achat d’une tablette, étape malgré tout indispensable pour bien tester son application, il existe un outil qui peut être pratique pour dégrossir le sujet : le simulateur.

Par exemple, si l’on reprend notre projet tel que fini à l’étape précédente, on peut observer le comportement au touch en lançant le simulateur via ce bouton :

Le simulateur se lance alors. Ce dernier consiste en fait à faire une session RDP (de type Terminal Server si vous voulez) sur vous-même. Voici le résultat que vous devriez avoir :

Vous pouvez commencer par cliquer sur cet icône :

Pour simuler le touch.

Jouer à « glisser » le doigt virtuel sur l’affichage. Vous verrez alors que l’inertie et le rebond sur les côtés sont déjà bien gérés. De la même manière, si vous touchez un élément et que vous maintenez en descendant légèrement vers le bas, vous sélectionnerez un élément de la liste. C’est la même action que le bouton droit de la souris et c’est la même action que vous pouvez faire sur l’écran de démarrage de Windows 8. Cette gesture est donc commune à l’expérience Metro que nous construisons avec Windows 8.

Un autre bouton qui peut être bien pratique est celui permettant de simuler les différentes résolutions :

Essayez par exemple de simuler un 23’’ de 1920x1080 en cliquant sur ce modèle. Vous devriez maintenant avoir ce type de répartition de vos éléments :

Vous observerez que l’on passe de 2 lignes d’éléments à 3 lignes en 1080p. De la même manière, on passe de 5 colonnes visibles en largeur à 7. C’est le contrôle ListView qui s’occupe de gérer les différents facteurs de forme pour vous.

Donc même si WinJS n’est pas obligatoire dans un projet HTML5 Metro, ne sous-estimez pas l’intérêt de son utilisation. Surtout lorsque l’on voit le type de service qu’elle peut facilement rendre !

Etape 2 : afficher le détail de l’article

Pour afficher le contenu de l’article, il nous faut un morceau d’HTML supplémentaire. Pour cela, rendez-vous dans la page « default.html » et insérez cette partie :

 <div id="articlecontent"></div> 

On va insérer le contenu de l’article sélectionné par code. Rendez-vous donc dans « default.js ». Juste au-dessus de l’instanciation de la Binding.List, insérez ce code :

 var articlelistElement = document.getElementById("articlelist");
articlelistElement.addEventListener("iteminvoked", itemInvoked);
backbutton.addEventListener("click", backButtonClick);

On récupère notre élément « articlelist » du DOM qui se trouvera être un contrôle WinJS de type ListView juste après le passage du processAll. Ce dernier exposera donc un évènement nommé « iteminvoked » levé lorsque vous cliquerez/toucherez un des éléments de la liste. Par ailleurs, on s’abonne à l’évènement « click » du bouton « back » pour revenir simplement sur la page d’accueil.

Il nous faut maintenant les gestionnaires d’évènements associés. Les voici :

 function backButtonClick(e) {
    articlecontent.style.display = "none";
    articlelist.style.display = "";
}

function itemInvoked(e) {
    var currentArticle = articlesList.getAt(e.detail.itemIndex);
    WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
    articlelist.style.display = "none";
    articlecontent.style.display = "";
}

L’idée est extrêmement simple. Lorsque l’utilisateur va cliquer sur un des éléments, on va récupérer dans la collection l’objet qui nous intéresse via son index (e.detail.itemIndex). On injecte ensuite le contenu HTML de l’article dans la propriété innerHTML de la div que nous venons juste d’insérer dans la page HTML principale. Par contre, cela se fait via l’appel à setInnerHTMLUnsafe() . Pourquoi d’ailleurs l’appel à cette méthode étrange venue d’ailleurs ?

Petite aparté sur le contexte de sécurité des applications Metro

Le contexte de sécurité dans lequel vous vous trouvez dans une application HTML5 Metro est bien évidemment différent d’une application web classique. Toute tentative de manipulation directe de la propriété innerHTML est ainsi par exemple protégée.

Si vous tentez par exemple d’y insérer du HTML venant du « web public », une exception de sécurité sera levée par défaut pour vous protéger. Imaginez en effet que quelqu’un y injecte un morceau de script prenant le contrôle de votre application ? Cela ne vous ferait pas plaisir.

On préfère ainsi que vous ayez conscience de cela mais on vous laisse la possibilité de « by-passer » cette vérification via l’appel de la fonction setInnerHTMLUnsafe() qui porte bien son nom.

De la même manière, la technique pour insérer un <iframe> est légèrement différente. Si tout cela vous intéresse, voici quelques articles à lire :

- HTML, CSS, and JavaScript features and differences

-
Features and restrictions by context
- Making HTML safer: details for toStaticHTML

Bon revenons à nos moutons.

La technique que nous utilisons pour faire apparaitre le contenu est donc toute simple. On cache la liste des éléments en basculant son « display » à « none » et on fait apparaitre le div « articlecontent ». Lorsque l’on clique que le bouton « back », on fait exactement l’inverse.

Si vous lancez l’ensemble en faisant F5, vous aurez ce type de résultat en cliquant sur un des éléments :

On observe que la mise en page n’est pas super sympa. Nous allons y remédier dans un instant avec l’ami Blend.

Mais en attendant, j’aimerais attirer votre attention sur un point gênant. La navigation vers un article puis le retour en arrière fonctionnent bien. Mais tout cela est un peu brut de fonderie en terme d’expérience utilisateur.

La philosophie derrière le concept Metro introduit également la notion de « Fast & Fluid ». Il faut donner l’impression à l’utilisateur que votre application est toujours bien vivante et performante. Pour cela, il se trouve que mettre en place de légères animations de transitions permet d’influer sur cette impression de fluidité. Pour cela, vous avez 2 options.

Soit vous utilisez CSS3 Transitions/Animations pour faire afficher/disparaitre les contenus qui vous intéressent. Charge alors à vous de trouver les bonnes animations et le bon dosage. Si vous souhaitez d’ailleurs vous initier à cette nouvelle partie de CSS3, je vous conseille la lecture d’articles que nous avons écrit mon collègue David Catuhe et moi-même sur ce sujet précis :

- Introduction aux transitions CSS3

- Introduction aux animations CSS3

Soit vous utilisez la librairie WinJS qui expose un moteur d’animations préconçues pour vous aider à respecter la philosophie Metro. Derrière, ce sont finalement bien des transitions/animations CSS utilisées. Mais pour vous développeur, ce n’est qu’une simple ligne de JavaScript à appeler.

Par exemple, dans le gestionnaire itemInvoked() , insérez cette ligne à la fin de la fonction :

 WinJS.UI.Animation.enterPage(articlecontent);

Et insérez celle-ci dans l’autre gestionnaire d’évènement :

 WinJS.UI.Animation.enterPage(articlelist);

Si vous relancez l’ensemble en pressant F5, vous devriez maintenant voir de subtiles transitions pendant votre navigation. C’est celles-ci qui vont faire toute la différence croyez-moi !

Etape 3 : finaliser le design de la vue détail sous Blend

Retournez sous Blend. Ce dernier devrait à nouveau vous demander de recharger l’ensemble suite à vos modifications sous Visual Studio.

Alors la question du jour sera : comment réussir à designer la page détail de l’article vu qu’il faut simuler le fait que l’on sélectionne un des articles pour cela ?

La réponse, vous l’avez déjà eu dans l’article précédent. Blend 5 exécute en live votre application HTML5 Metro ! Mais il vous manque une information supplémentaire pour vous en sortir. Voici la solution. Vous pouvez passer en mode « interactif » en cliquant sur ce bouton-là :

qui devrait s’appeler « Turn on Interactive Mode ». En cliquant dessus, vous pouvez alors ensuite interagir avec votre application, naviguez vers la page que vous souhaitez travailler et revenir dans l’interface de design en cliquant sur le même bouton. Dans mon cas, j’ai choisi de partir sur cet article :

Dans les styles, sous la bonne Media Query, ajoutez une règle sur le sélecteur « #artictecontent » puis sélectionnez là immédiatement.

Dans la partie « Sizing », fixez la largeur et la hauteur à 100% .

Dans la partie « Layout », fixez un padding à gauche de 120px afin d’aligner le contenu avec le titre principal.

Oops… cela génère un problème du coup. Le layout dans notre div « articlecontent » a tendance à trop déborder sur la largeur.

Pour régler ce problème, modifiez la propriété « width » et indiquez sur vous souhaitez utiliser une « custom expression » :

Nous allons utiliser l’opérateur CSS Calc(). Entrez l’expression suivante : « calc(100%-120px) ».

Le design Metro commence alors à prendre forme. Il reste une ultime étape pour bien faire : mettre en place une expérience de défilement horizontal et mettre en forme le texte de manière plus lisible.

Commençons par rendre plus lisible le texte. Une nouvelle fonctionnalité de CSS3 est extrêmement pratique et se trouve être simple à mettre en œuvre : CSS3 Multi-columns.

Pour cela, rendez-vous dans la section « Multicolumn » du panneau « CSS Properties » et demandez à découper le layout en colonnes de 480px de large séparées par au moins 80px chacune.

Cela commence à être chouette non ?

Pour finir, il reste à permettre un défilement horizontal pour faire glisser l’ensemble du contenu de gauche à droite et vice-versa. Pour cela, rendez-vous dans la zone de saisie « Search Properties » et tapez « over ». Blend vous filtre alors toutes les propriétés contenant le mot clé « over ».

Fixez « overflow-x » à « auto » et « overflow-y » à « hidden ».

Vous pouvez vous rendre dans Visual Studio, accepter les changements et faire F5 pour jouer avec le résultat.

Niveau bonus de fin pour les guerriers

Allez, on va se faire encore un peu plaisir pour les plus courageux. Au final, qu’est ce qui nous intéresse le plus nous les développeurs lorsque l’on lit un article technique ? Le code bien évidemment !

Donc une fois que l’on sait ça, il ne faut pas hésiter à mettre en avant son code d’une manière ou d’une autre pour attirer davantage l’œil du développeur curieux et pressé de copier/coller le précieux sésame.

Dans le cas de Channel 9, ils ont eu l’excellente idée de mettre le code dans des balises <pre>. Cela va donc nous faciliter la tâche pour styler les morceaux de code.

Ajoutez une règle CSS « #articlecontent pre »

Passez en mode interactif et naviguez vers un article où l’on voit bien un morceau de code.

Sélectionnez la règle fraichement créée et rendez-vous dans la section « Background » des propriétés CSS. Cliquez pour affecter une couleur :

Vous aurez alors cette merveilleuse palette pour faire votre choix :

Mais si comme moi vous avez une tendance naturelle à vous diriger vers une couleur immonde, cliquez sur la petite pipette et choisissez une des couleurs de Blend. C’est forcément une bonne couleur vu que cela a été conçu par des personnes brillantes comme mon collègue Designer Michel Rousseau.

Pour finir, sur les <pre>, mettez dans les champs « overflow-x » la valeur « auto » et « overflow-y » la valeur « hidden » comme tout à l’heure.

Voici le résultat final que vous devriez obtenir :

Etape 4 : vidéo et code source à télécharger

Voilà, je pense que je ne vous avais pas menti. Si vous étiez bien réveillé et concentré, vous avez dû passer environ 30 minutes pour fabriquer cette petite application.

Note : la vidéo es toujours celle de la Consumer Preview. Je vais la refaire aussi vite que possible en Release Preview.

Voici la vidéo réalisant les étapes de ce 2^ème article :

Download Video: MP4, WebM, HTML5 Video Player by VideoJS

Et voici le code source à télécharger : Simple Channel9 Reader Article2

Merci d’avoir suivi l’aventure. J’aimerais attirer votre attention sur un point particulier. Ces 2 tutoriaux ont reçu un bon écho de ceux qui l’ont lu. Ils ont cependant une vocation pédagogique pour vous aider à comprendre les bases de WinJS et d’une application Metro en générale.

Malgré tout, il manque pas mal de choses de base pour en faire une bonne application Windows 8 :

- un bon Splash Screen et une vignette dynamique

- indiquer à l’utilisateur que vous êtes en train de charger des données au démarrage via le contrôle adapté

- le support d’une vue “snap”

- une meilleure intégration dans Windows 8 avec un contrat de type recherche (“Search Charm”) et éventuellement de partage.

- l’utilisation du framework de navigation pour aller vers les articles plutôt que de basculer d’une div à l’autre

- un support du mode offline pour pouvoir utiliser l’application sans réseau et éviter de télécharger à chaque fois le contenu complet

Si vous souhaitez aller plus loin et implémenter ces concepts, voici les articles que je vous recommande chaudement :

- L’excellente série d’articles en français de David Catuhe : Comment “cuisiner” une application Windows 8 avec HTML 5, CSS3 et JavaScript en une semaine . Ils vous feront découvrir comment réaliser une application qui supporte le « search », la vue « snapped » que nous n’avons pas vu ensemble, le framework de navigation de pages et pleins d’autres joyeusetés ! “A must read” comme disent nos amis américains.

- Create your first Metro style app using JavaScript dont le sujet tourne aussi autour de la récupération de données depuis des blogs en RSS et couvrant des sujets complémentaires à mes 2 articles.

Je vous rappelle pour finir, pour ceux qui ne le savent pas encore, que nous avons un programme spécial pour vous aider à être les 1ers dans le Windows Store de Windows 8. Ce programme s’appelle l’accélérateur et vous pouvez vous inscrire ici: https://bit.ly/accelerateurw8 . Donc si vous vous sentez capable de développer une application rapidement, on peut vous aider à être parmi les 1ers dans notre Store ! Et qui sait, vous deviendrez peut-être riche grâce à nous. ;-)

En tout cas, c’est tout le mal que je vous souhaite.

David