Etudiants.ms | Créer votre application Windows 8 de blog en 30 minutes !

Nous allons voir aujourd’hui comment créer simplement et en une petite demi-heure une application de lecteur RSS pour votre blog sur Windows 8.

Le principe de cet article n’est pas de vous apprendre à développer une application de A à Z, mais plutôt de vous exposer les principes fondamentaux de la conception d’application HTML/CSS sur Windows 8.

Pour ce faire vous aurez besoin de deux outils :

· VS Express 8

· Un flux RSS J

La première étape est de vous inscrire sur le Store Windows 8, si ce n’est pas déjà fait, suivez ce tutoriel pour vous inscrire en tant qu’étudiant (si vous n’êtes pas étudiant, allez directement à la partie 2).

La seconde étape est de télécharger VS Express 8 (ici) ou tout autre version de Visual Studio 2012.

Pour télécharger Visual Studio Express 8 pour Windows 8, rendez-vous à cette adresse : http://www.microsoft.com/france/visual-studio/essayez/express.aspx

Et cliquez sur le lien ci-dessous :

Dans le reste de ce tutorial, je prendrais comme référence Visual Studio 8 dans sa version express.

Une fois Visual Studio installé, lancez-le et créez un nouveau projet en choisissant le modèle « Application de navigation » parmi les modèles JavaScript et nommez votre application comme vous le souhaité.

Voici la solution que vous devriez avoir dès la création de votre application :

Tous les éléments de cette solution sont importants et nous toucherons à la plupart de ces éléments au cours de ce tutoriel.

La première chose que nous allons faire, c’est de lancer l’application, et pour cela, appuyez sur la touche F5 ou cliquez sur le bouton.

Une fois l’application lancé, vous avez le rendu suivant :

Rien de bien transcendant, mais ne vous inquiétez pas, dans quelques minutes on aura bien avancé ! Stopper maintenant votre application pour l’éditer en appuyant sur le carré rouge de stop ou appuyez sur la combinaison de touches maj + F5.

Commençons donc par ouvrir le fichier home.html situé dans le dossier /pages/home (donc la page /pages/home/home.html).

A la ligne 26, nous avons le bloc suivant :

<section aria-label="Main content" role="main">

<p>Le contenu s'affiche ici.</p>

</section>

Nous allons le remplacer par le code suivant :

<section aria-label="Main content" role="main" id=»content»>

<div id="listeArticles" data-win-control="WinJS.UI.ListView"></div>

</section>

Nous avons donc ajouté un identifiant à notre div de contenu principal et nous avons ajouté une div au sein de cette div principale de contenu qui contiendra les articles de notre flux RSS. Cette seconde div ayant comme id « listeArticles » est un contrôle, mais ne rentrons pas trop dans les détails, ce que vous devez savoir c’est qu’un contrôle de ce type permet d’afficher automatiquement à partir d’un template une liste de données.

Nous allons maintenant charger le contenu via une requête asynchrone XHR (ce qui veut dire que l’application va charger le contenu tout en restant utilisable par l’utilisateur).

Pour ce faire, ouvrez le fichier /javascript/default.js et au début du fichier, avant le app.addEventListener, déclarez les variables suivantes :

Var articlesList = new WinJS.Binding.List();

var publicArticles = { ItemList: articlesList };

WinJS.Namespace.define("Articles", publicArticles);

Ces variables nous permettrons de stocker les articles que nous aurons téléchargé au sein de l’espace de nom « Articles » qui sera disponible au sein de toutes les pages de l’application.

Nous allons ensuite ajouter la fonction downloadArticles qui nous permettra de récupéré le contenu depuis le Web. Il nous faut donc placer ce code juste après le app.start() au sein du fichier default.js

function downloadArticles() {

WinJS.Application.local.readText("rss.db", "[]").done(function (listeTemp) {

listeTemp = JSON.parse(listeTemp);

for (var i = 0; i < listeTemp.length; i++) {

articlesList.push(listeTemp[i]);

}

try {

WinJS.xhr({ url: "http://etudiants.frogz.fr/syndication.axd?format=rss" }).done(

function completed(rss) {

while (articlesList.length) {

articlesList.pop();

}

document.getElementById('chargement').style.display = 'none';

var items = rss.responseXML.querySelectorAll("item");

var tempItems = [];

for (var n = 0; n < items.length; n++) {

var article = {};

article.title = items[n].querySelector("title").textContent;

var thumbs = items[n].querySelectorAll("thumbnail");

var imgs = items[n].textContent.match(/http:\/\/\S+?\.(?:gif|png|jpe?g)/i);

if (thumbs.length > 1) {

article.thumbnail = thumbs[1].attributes.getNamedItem("url").textContent;

} else if (imgs.length >= 1) {

article.thumbnail = imgs[0];

} else {

article.thumbnail = "";

}

article.content = toStaticHTML(items[n].textContent);

tempItems.push(article);

articlesList.push(article);

}

WinJS.Application.local.writeText("rss.db", JSON.stringify(tempItems));

function error(request) {

document.getElementById('chargement').innerHTML = '';

function progress(request) {

document.getElementById('chargement').style.display = 'block';

}

);

} catch (e) {

}

});

}

On ajoute ensuite la petite ligne de code downloadArticles(); au lancement de l’application, c’est-à-dire juste avant le :

if (nav.location) {

Une fois ceci fait, il faut indiquer à notre ListView où se situent ces données, et pour ce faire, il suffit d’ajouter le code ci-dessous à notre contrôle :

data-win-options="{ itemDataSource: Articles.ItemList.dataSource }"

Vous pouvez dès à présent lancer votre application et vous aurez le rendu suivant :

Je vous l’accorde, ce n’est peut-être pas très jolie au premier abord, mais ne vous inquiétez pas, on va améliorer ça.

La première étape est de créer un template pour chaque article, de manière à sélectionner les données que nous voulons afficher sur cette page et comment architecturer ces données. Nous ajouterons ensuite le CSS pour choisir comment afficher ces données.

Pour ce faire, juste après l’ouverture de la balise body dans le fichier default.html, placez le code suivant :

<div id="ArticleTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">

<div class="listItemTemplate">

<div class="listItemImage">

<img data-win-bind="src: thumbnail" />

</div>

<div class="listItemTitle" data-win-bind="innerText: title">

</div>

Nous avons donc ici un template pour nos articles, il faut désormais signifier à notre contrôle ListView où se trouve le template pour chaque article, et pour ce faire, rien de plus simple, il suffit de rajouter « , itemTemplate: ArticleTemplate » au data-win-options de notre ListView.

Nous aurons donc :

<div id="listeArticles" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: Articles.ItemList.dataSource, itemTemplate: ArticleTemplate }" ></div>

Si vous lancez votre application, vous aurez déjà quelque chose de plus jolie et plus compréhensible :

Déjà un peu plus jolie non ?

Nous allons donc maintenant ajouter un peu de style à cette application, ouvrez le fichier css/default.css et remplacez-y le contenu par le code suivant :

/* Personnalisation des styles */

body {

background:#808080; /* (Couleur de) Fond de l'application, peut être une image */

}

.fragment header{

color:white;/* Couleur du texte du header*/

}

.win-item {

background:#000; /* Couleur de fond des tuiles sur la page d'accueil */

color:white;/* Couleur du texte des tuiles sur la page d'accueil */

}

.articleContent {

background:inherit;/* Fond du contenu des articles */

color:white;/* Couleur du texte du contenu des articles */

}

.articleContent a {

color:brown;/* Couleur des liens au sein des articles */

}

.articleContent pre {

background:#666;/* couleur de fond des parties de code au sein des articles */

}

/* Partie à ne pas modifier*/

#contenthost {

height: 100%;

width: 100%;

}

.fragment {

/* Définissez une grille avec des lignes pour une bannière et un corps */

-ms-grid-columns: 1fr;

-ms-grid-rows: 128px 1fr;

display: -ms-grid;

height: 100%;

width: 100%;

}

.fragment header[role=banner] {

/* Définissez une grille avec des colonnes pour le bouton Précédent et le titre de page. */

-ms-grid-columns: 120px 1fr;

-ms-grid-rows: 1fr;

display: -ms-grid;

}

.fragment header[role=banner] .win-backbutton {

margin-left: 39px;

margin-top: 59px;

}

.fragment header[role=banner] .titlearea {

-ms-grid-column: 2;

margin-top: 37px;

}

.fragment header[role=banner] .titlearea .pagetitle {

width: calc(100% - 20px);

}

.fragment section[role=main] {

-ms-grid-row: 2;

height: 100%;

width: 100%;

}

#content {

width:calc(100% - 120px);

height:calc(100% - 4px);

overflow-x:auto;

}

#listeArticles {

height:100%;

}

#listeArticles .win-item {

width: 250px;

height: 250px;

}

.listItemTemplate {

margin: 8px;

}

.listItemImage img {

width: 234px;

height: 165px;

}

#fullFlip {

height:100vh;

width:100vw;

}

.articleContent {

width:calc(100% - 120px);

height:calc(100% - 4px);

overflow-x:auto;

padding-left: 120px;

column-width: 480px;

column-gap: 80px;

overflow-x: auto;

overflow-y: hidden;

}

.articleContent pre {

overflow-x: auto;

overflow-y: hidden;

}

@media screen and (-ms-view-state: snapped) {

.fragment header[role=banner] {

-ms-grid-columns: auto 1fr;

margin-left: 20px;

}

.fragment header[role=banner] .win-backbutton {

margin: 0;

margin-right: 10px;

margin-top: 76px;

}

.fragment header[role=banner] .win-backbutton:disabled {

display: none;

}

.fragment header[role=banner] .titlearea {

-ms-grid-column: 2;

margin-left: 0;

margin-top: 68px;

}

#content {

width:320px;

height:auto;

overflow-y:auto;

overflow-x:hidden;

}

#listeArticles {

width:320px;

height:100%;

overflow-x:hidden;

overflow-y:auto;

}

.articleContent {

width:300px;

padding-left: 10px;

padding-right:10px;

overflow-y: auto;

column-width:inherit;

}

@media screen and (-ms-view-state: fullscreen-portrait) {

.fragment header[role=banner] {

-ms-grid-columns: 100px 1fr;

}

.fragment header[role=banner] .win-backbutton {

margin-left: 29px;

}

Une fois ce style ajouté, vous devriez tout de suite avoir une application beaucoup plus jolie J

Nous allons maintenant nous intéresser à la partie suivante : la création des pages article (de détail).

Pour ce faire, sélectionnez le dossier /pages/ au sein de votre architecture de projet Visual Studio et faites un clique droit, puis ajouter, puis nouveau dossier, créer ainsi le dossier « article ».

Faites ensuite un clique droit sur ce dossier puis Ajouter > Nouvel élément puis sélectionnez « page HTML », nommez là article.html. Ajoutez ensuite un nouvel élément, mais cette fois choisissez Javascript et nommez ce fichier article.js.

Copiez ce contenu après la déclaration de la balise body au sein du fichier default.html, il s’agit du template de la page détail d’un article du flux RSS :

<div id="ArticleOnlyTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">

<div class="fragment articlepage">

<header aria-label="Header content" role="banner">

<button class="win-backbutton" aria-label="Back" type="button" onclick="WinJS.Navigation.navigate('/pages/home/home.html');"></button>

<h1 class="titlearea win-type-ellipsis">

<span class="pagetitle" data-win-bind="innerText: title"></span>

</h1>

</header>

<section aria-label="Main content" role="main">

<div class="articleContent" data-win-bind="innerHTML: content"></div>

</section>

</div>

Copiez ce contenu au sein du fichier /pages/article/article.html, il nous permet d’afficher au sein d’une FlipView prenant toute la taille de l’écran tous les articles de notre flux RSS, nous sélectionnerons ensuite en JavaScript le bon élément à afficher par défaut :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta charset="utf-8" />

<title>Article Page</title>

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

<script src="//Microsoft.WinJS.1.0/js/base.js"></script>

<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<link href="/css/default.css" rel="stylesheet" />

<script src="/pages/article/article.js"></script>

</head>

<body>

<div id="fullFlip" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource: Articles.ItemList.dataSource, itemTemplate: ArticleOnlyTemplate, currentPage: 1 }" ></div>

</body>

</html>

Copiez ce contenu au sein du fichier /pages/article/article.js, il nous servira à afficher le bon élément de notre FliwView suite au clique sur un élément au sein de la page précédente mais aussi à donner le bon contenu à partager via le bouton de partage de barre de charm :

(function () {

"use strict";

WinJS.UI.Pages.define("/pages/article/article.html", {

// Cette fonction est appelée chaque fois qu'un utilisateur accède à cette page. Elle

// remplit les éléments de la page avec les données d'application.

ready: function (element, options) {

// TODO: initialisez la page ici.

var flipView = document.getElementById('fullFlip').winControl;

WinJS.UI.setOptions(flipView, {

currentPage: WinJS.Navigation.state.index

});

}

});

var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();

dataTransferManager.addEventListener("datarequested", function (e) {

var request = e.request;

var current = document.getElementById('fullFlip').winControl.currentPage;

request.data.properties.title = Articles.ItemList.getAt(current).title;

request.data.setHtmlFormat(Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(Articles.ItemList.getAt(current).content));

request.data.properties.description = "Partage de l'article";

});

})();

Et enfin, pour finir, copiez le contenu suivant au sein du fichier /pages/home/home.js

(function () {

"use strict";

WinJS.UI.Pages.define("/pages/home/home.html", {

// Cette fonction est appelée chaque fois qu'un utilisateur accède à cette page. Elle

// remplit les éléments de la page avec les données d'application.

ready: function (element, options) {

// TODO: initialisez la page ici.

listeArticles.addEventListener('iteminvoked', function (e) {

WinJS.Navigation.navigate('/pages/article/article.html', { index: e.detail.itemIndex });

});

}

});

})();

Une petite chose à savoir avec Windows 8, il est important d’avoir une page de politique de confidentialité présente sur toutes vos applications utilisant un accès à internet (soit presque la totalité des applications).

Pour ce faire, il nous faut ouvrir la page /javascript/default.js et juste avant app.start() placer le code suivant :

function onCommandsRequested(eventArgs) {

var settingsCommand = new Windows.UI.ApplicationSettings.SettingsCommand("preference", "Politique de confidentialité", function () {

var uri = new Windows.Foundation.Uri("http://ma.ms.giz.fr/?name=Mon+Blog");

Windows.System.Launcher.launchUriAsync(uri);

});

eventArgs.request.applicationCommands.append(settingsCommand);

}

var settingsPane = Windows.UI.ApplicationSettings.SettingsPane.getForCurrentView();

settingsPane.addEventListener("commandsrequested", onCommandsRequested);

Remplacez bien évidement le lien qui est dans cet URL par le lien de votre politique de confidentialité, si vous n’en avez pas, rendez-vous à l’adresse suivante pour créer votre politique de confidentialité simplement : http://ma.ms.giz.fr/

Il ne vous reste plus qu’une chose à faire, personnaliser le design de votre application.

Pour ce faire, rien de bien compliquer, rendez-vous sur le fichier /css/default.css et modifier le début de fichier (les commentaires vous aideront ;) ). Et pour modifier les assets, rien de plus simple, reprenez les images contenu dans le dossier /images/ et modifier les, attention toutefois, les formats et dimensions ne doivent pas être modifié, voici leur correspondance :

· Background è est aux bonnes dimensions pour une image de fond pour votre application

· Storelogo è image qui présentera votre application sur le Windows Store

· Smalllogo è image représentant votre application à quelques moments dans Windows

· Logo è logo de votre application qui apparaitra sur l’écran d’accueil de Windows

· Splashscreen è image présente au démarrage de votre application

Une fois ceci fait, vous avez alors une belle application de lecteur de flux RSS fonctionnel. Vous pouvez d’ores et déjà la soumettre sur le Windows Store une fois que vous aurez ajouté les bons éléments graphiques et personnalisez cette dernière !

Vous pouvez télécharger les sources de ce tutoriel sont disponibles ici.

blog

Restez informé

Dossiers

Créer votre application Windows 8 de blog en 30 minutes !