Procédure pas à pas : créer un lecteur de blog (JavaScript et HTML)

Procédure pas à pas : créer un lecteur de blog (JavaScript et HTML)

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Cette procédure pas à pas vous montre comment utiliser le modèle Application fractionnée de Visual Studio pour créer une application de lecture de blog. L’application de lecture de blog demande des données aux flux RSS, analyse le code XML retourné par ces flux, remplit un contrôle ListView, et crée un contrôle AppBar contextuel.

Important  Cette procédure pas à pas utilise les nouvelles API de Windows 8.1. Certaines parties ne fonctionneront pas correctement avec Microsoft Visual Studio 2012 et Windows 8.
 

WindowsBlogReader

Dans cette procédure pas à pas, nous allons créer un lecteur rudimentaire pour certains des blogs de l’équipe Windows. L’application finie se présente sous cette forme :

la page d’accueil, la page fractionnée et la page de détails de l’application de lecteur de blog Windows.

La page d’éléments porte le titre de "Blogs de l’équipe Windows" et contient un contrôle ListView avec un élément par blog. En cliquant sur un élément de ListView, vous accédez à une page fractionnée pour le blog sélectionné. Cette page contient un contrôle ListView avec un élément par billet de blog, ainsi qu’un contrôle qui affiche verticalement le contenu du billet sélectionné. À partir de la page fractionnée, vous pouvez accéder à une page des détails d’élément qui reprend le titre du billet en haut et son contenu à l’horizontale.

Créer un projet dans Visual Studio

Créons un projet pour notre application, que nous intitulerons WindowsBlogReader. Voici comment procéder :

  1. Ouvrez Visual Studio.

  2. Sous l’onglet Page de démarrage, cliquez sur Nouveau projet. La boîte de dialogue Nouveau projet s’ouvre.

  3. Dans le volet Installé, développez JavaScript, puis sélectionnez le type de modèle application du Windows Store. Les modèles de projets proposés pour JavaScript s’affichent dans le volet central de la boîte de dialogue.

  4. Dans le volet central, sélectionnez le modèle de projet Application fractionnée.

  5. Dans la zone de texte Nom, entrez "WindowsBlogReader".

  6. Cliquez sur OK pour créer le projet. L’opération ne prend qu’un instant.

Voici la structure du projet, tel qu’il apparaît dans l’Explorateur de solutions. Le dossier pages contient deux groupes de fichiers : un pour la page d’éléments et un pour les pages fractionnées. Chacun de ces groupes est un objet PageControl, un groupe de fichiers HTML, CSS et JavaScript qui définissent une page à laquelle l’application peut accéder ou qu’elle peut utiliser comme un contrôle personnalisé.

Le nouveau projet contient les fichiers HTML, CSS et JavaScript nécessaires pour créer le PageControl de l’élément et le PageControl fractionné. Nous ajouterons les fichiers pour le PageControl des détails d’élément plus tard.

Capture d’écran du projet WindowsBlogReader dans l’Explorateur de solutions

Pour plus d’informations sur les différents modèles disponibles, voir Modèles de projet JavaScript pour les applications du Windows Store.

Lancer notre nouvelle application du Windows Store

Si vous voulez savoir à quoi ressemble une application fractionnée élémentaire, appuyez sur F5 pour construire l’application, la déployer et la lancer. L’application se présente sous la forme d’une page en plein écran avec le titre "WindowsBlogReader". Elle reprend une liste d’exemples d’éléments disposés en grille. Chaque élément représente un groupe de données. Appuyez ou cliquez sur un élément de la liste pour accéder à la page fractionnée. Un page fractionnée se compose de deux zones de contenu principales. À gauche se trouve la liste des éléments associés au groupe sélectionné. À droite se trouve le contenu de l’élément sélectionné. Vous pouvez revenir dans la page d’éléments en appuyant ou en cliquant sur le bouton Précédent placé dans la page.

Lorsque vous exécutez l’application, elle prend les codes HTML, CSS et JavaScript (ou établit une liaison avec ces codes) dans items.html et les injecte dans la page default.html qui représente la page de démarrage de votre application. Des restrictions sont à connaître sur ce que le code peut effectuer par défaut lorsqu’il s’exécute dans un conteneur d’application. Votre application ne peut par exemple pas accéder à Internet ou à votre webcam à moins que vous ne déclariez qu’elle a besoin de cet accès et que l’utilisateur accorde cet accès une fois l’application installée. Pour en savoir plus, ouvrez package.appxmanifest et accédez à l’onglet Capacités.

Changer le titre et la couleur d’arrière-plan

Essayons deux tâches simples de personnalisation de l’application.

Pour modifier le titre de l’application, ouvrez items.html et remplacez le texte de l’élément h1 dans itemspage par "Blogs de l’équipe Windows" comme indiqué ici.


<h1 class="titlearea win-type-ellipsis">
    <span class="pagetitle">Windows Team Blogs</span>
</h1>

Pour définir la couleur d’arrière-plan de l’application, ouvrez default.css et ajoutez l’attribut background-color à #contenthost.


#contenthost {
    height: 100%;
    width: 100%;    
    background-color: #0A2562;
}

Appuyez sur la touche F5 pour construire, déployer et lancer l’application. Nous voyons que le titre de la page d’éléments change et que l’arrière-plan des pages d’éléments et fractionnée devient bleu.

Remarque  Le dossier images du projet contient les fichiers par défaut que le système réutilise pour les vignettes et pour l’écran de démarrage de votre application au moment où elle se lance. Nous ne les changeons pas dans ce didacticiel, mais vous pouvez utiliser d’autres images si vous le souhaitez. Ajoutez simplement au dossier images les fichiers images que vous voulez utiliser. Ouvrez package.appxmanifest et remplacez les contenus de Logo, de Petit logo et d’Écran de démarrage sur l’onglet Interface utilisateur de l’application par les chemins d’accès de vos fichiers image.

Remplacer l’exemple de données

Le modèle de projet contient un exemple de données visibles lorsque vous exécutez l’application. Ces étapes traitent du remplacement de l’exemple de données par les données des flux ATOM pour les blogs de l’équipe Windows :

Supprimer l’exemple de données

Ouvrez le fichier data.js qui contient l’exemple de données de l’application.

Comme nous n’avons pas besoin de la fonction generateSampleData, vous pouvez la supprimer.


// Returns an array of sample data that can be added to the application's
// data list. 
function generateSampleData() {
    // Omitted code.

        
}

Nous n’avons pas besoin de ce code. Nous pouvons donc le supprimer :


// TODO: Replace the data with your real data.
// You can add data from asynchronous sources whenever it becomes available.
generateSampleData().forEach(function (item) {
    list.push(item);
});

Définir les variables et les fonctions

Ajoutez ce code à data.js juste avant l’instruction var list = new WinJS.Binding.List(); vers le début du fichier. Ce code configure les variables dont nous avons besoin et les fonctions qui les remplissent. Au fur et à mesure des étapes de ce didacticiel, utilisez les commentaires inclus pour savoir où placer le code à chaque étape.


// Set up array variables
var dataPromises = [];
var blogs;

// Declare an HttpClient object to send and receive
// RSS feed data.
var httpClient = new Windows.Web.Http.HttpClient();

// Create a data binding for our ListView
var blogPosts = new WinJS.Binding.List();

// Process the blog feeds
function getFeeds() { 
    // Create an object for each feed in the blogs array
    // Get the content for each feed in the blogs array
    // Return when all asynchronous operations are complete
}

function acquireSyndication(url) {
    // Call xhr for the URL to get results asynchronously
}

function getBlogPosts() {
    // Walk the results to retrieve the blog posts
}

function getItemsFromXml(articleSyndication, bPosts, feed) {
    // Get the info for each blog post
}

Définir la liste des blogs

Pour que cet exemple reste simple, ajoutons une liste déjà codée d’URL dans le tableau de blogs.

Ajoutez le code suivant à la fonction getFeeds. Ce code convertit un tableau d’URL (sous forme de chaînes) en tableau d’objets JavaScript à l’aide de la fonction Array.map. Chaque objet dans la variable blogs stocke le contenu d’un flux RSS.


// Create an object for each feed in the blogs array.
var urls = [
    'http://blogs.windows.com/windows/b/windowsexperience/atom.aspx',
    'http://blogs.windows.com/windows/b/extremewindows/atom.aspx',
    'http://blogs.windows.com/windows/b/business/atom.aspx',
    'http://blogs.windows.com/windows/b/bloggingwindows/atom.aspx',
    'http://blogs.windows.com/windows/b/windowssecurity/atom.aspx',
    'http://blogs.windows.com/windows/b/springboard/atom.aspx',
    'http://blogs.windows.com/windows/b/windowshomeserver/atom.aspx',
    'http://blogs.windows.com/windows_live/b/developer/atom.aspx',
    'http://blogs.windows.com/ie/b/ie/atom.aspx',
    'http://blogs.windows.com/windows_phone/b/wpdev/atom.aspx',
    'http://blogs.windows.com/windows_phone/b/wmdev/atom.aspx'
];

var counter = 0;
blogs = urls.map(function (item) {
    return {
        key: "blog" + counter++,
        url: item,
        title: 'tbd',
        updated: 'tbd',
        acquireSyndication: acquireSyndication,
        dataPromise: null
    };
});

Récupérer les données de flux

Pour les étapes de cette section, nous allons utiliser la classe Windows.Web.Http.HttpClient pour demander les flux RSS. La classe HttpClient fournit des API robustes pour l’envoi et la réception de demandes HTTP, notamment pour permettre la gestion des cookies, le filtrage et les transports flexibles.

Ajoutez le code suivant à la fonction acquireSyndication. Nous devons alors appeler la fonction HttpClient.getStringAsync asynchrone pour récupérer le contenu des flux. Heureusement, une bonne part de la complexité liée à l’utilisation d’appels asynchrones est entièrement prise en charge. Quand une réponse est reçue du serveur, nous recevons des résultats assurés que nous retournons à l’appelant.


// Call HttpClient.getStringAsync passing in the URL to get results asynchronously.
return return httpClient.getStringAsync(new Windows.Foundation.Uri(url)););

Nous ajoutons à présent le code à la fonction getFeeds chargée d’appeler la fonction acquireSyndication pour chaque blog inclus dans le tableau de blogs, puis nous ajoutons la promesse retournée à notre tableau de promesses dataPromises. Nous appelons la fonction WinJS.Promise.join pour attendre que toutes les promises soient satisfaites avant de reprendre l’exécution après la fonction getFeeds. Cela nous permet de disposer de toutes les informations dont nous avons besoin avant d’afficher le contrôle ListView.


// Get the content for each feed in the blogs array
blogs.forEach(function (feed) {
    feed.dataPromise = feed.acquireSyndication(feed.url);
    dataPromises.push(feed.dataPromise);
});

// Return when all asynchronous operations are complete
return WinJS.Promise.join(dataPromises).then(function () {
    return blogs;
});

Ajoutons ensuite le code à la fonction getBlogPosts. Pour chaque blog du tableau de blogs, nous recherchons dans les données de flux XML les informations dont nous avons besoin. Tout d’abord, nous utilisons un objet DOMParser pour convertir la chaîne en document XML, puis la méthode querySelector avec les sélecteurs requis pour obtenir le titre et la date de mise à jour du blog. Nous utilisons Windows.Globalization.DateTimeFormatting.DateTimeFormatter pour convertir la date de mise à jour à afficher.

Si articlesResponse est null, cela signifie qu’une erreur est survenue lors du chargement du blog. Nous affichons donc un message d’erreur à la place du blog.


// Walk the results to retrieve the blog posts
getFeeds().then(function () {
    // Process each blog
    blogs.forEach(function (feed) {
        feed.dataPromise.then(function (articlesResponse) {

            var parser = new window.DOMParser();
            var articleSyndication = parser.parseFromString(articlesResponse, 'text/xml');

            if (articlesResponse) {
                // Get the blog title 
                feed.title = articleSyndication.querySelector("feed > title").textContent;

                // Use the date of the latest post as the last updated date
                var published = articleSyndication.querySelector("feed > entry > published").textContent;

                // Convert the date for display
                var date = new Date(published);
                var dateFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                    "month.abbreviated day year.full");
                var blogDate = dateFmt.format(date);
                feed.updated = "Last updated " + blogDate;

                // Get the blog posts
                getItemsFromXml(articleSyndication, blogPosts, feed);
            }
            else {

                // There was an error loading the blog. 
                feed.title = "Error loading blog";
                feed.updated = "Error";
                blogPosts.push({
                    group: feed,
                    key: "Error loading blog",
                    title: feed.url,
                    author: "Unknown",
                    month: "?",
                    day: "?",
                    year: "?",
                    content: "Unable to load the blog at " + feed.url
                });
            }
        });
    });
});

return blogPosts;

Ajoutons enfin le code suivant à la fonction getItemsFromXml. Utilisons d’abord querySelectorAll pour obtenir l’ensemble de billets de blog avec leurs informations. Utilisons ensuite querySelector pour obtenir les informations de chacun d’entre eux. Nous utilisons Windows.Globalization.DateTimeFormatting.DateTimeFormatter pour convertir la date de mise à jour à afficher. Enfin, nous stockons les informations pour chaque billet de blog dans l’entrée correspondante dans le tableau de bPosts grâce à la méthode push.


// Get the info for each blog post
var posts = articleSyndication.querySelectorAll("entry");

// Process each blog post
for (var postIndex = 0; postIndex < posts.length; postIndex++) {
    var post = posts[postIndex];

    // Get the title, author, and date published
    var postTitle = post.querySelector("title").textContent;
    var postAuthor = post.querySelector("author > name").textContent;
    var postPublished = post.querySelector("published").textContent;

    // Convert the date for display
    var postDate = new Date(postPublished);
    var monthFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
        "month.abbreviated");
    var dayFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
        "day");
    var yearFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
        "year.full");
    var blogPostMonth = monthFmt.format(postDate);
    var blogPostDay = dayFmt.format(postDate);
    var blogPostYear = yearFmt.format(postDate);

    // Process the content so it displays nicely
    var staticContent = toStaticHTML(post.querySelector("content").textContent);

    // Store the post info we care about in the array
    bPosts.push({
        group: feed,
        key: feed.title,
        title: postTitle,
        author: postAuthor,
        month: blogPostMonth.toUpperCase(),
        day: blogPostDay,
        year: blogPostYear,
        content: staticContent
    });                                         
}

Mettre les données à disposition

Maintenant que nous avons terminé le code pour stocker les données des flux dans nos tableaux, nous devons grouper les données des flux comme le contrôle ListView le prévoit. Nous avons aussi besoin de terminer d’établir la liaison de nos données de flux au contrôle ListView.

La fonction getItemsFromGroup appelle la méthode createFiltered et retourne les billets du blog indiqué. La fonction getItemsFromGroup s’appuie sur une variable : list.


var list = new WinJS.Binding.List();

Remplacez cette définition par un appel de notre fonction getBlogPosts, qui retourne la variable blogPosts. Il s’agit d’un objet WinJS.Binding.List.



var list = getBlogPosts();

Notez que l’appel de la méthode createGrouped entraîne le tri des billets de blog d’après la clé indiquée (dans notre cas, le blog auquel chaque billet appartient).


var groupedItems = list.createGrouped(
    function groupKeySelector(item) { return item.group.key; };
    function groupDataSelector(item) { return item.group; }

Mettre à jour l’objet PageControl des éléments

La fonctionnalité principale du PageControl des éléments est le contrôle ListView implémenté via WinJS.UI.ListView. Chaque blog est associé à un élément dans cette liste. Modifions l’élément ListView fourni dans le modèle de manière à ce qu’il contienne le titre du blog et la date de mise à jour du blog.

Ouvrez items.html. Nous devons modifier le code HTML de cette balise div pour refléter le contenu dans notre tableau de blogs.


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <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>
</div>

Effectuez les mises à jour suivantes :

  1. Étant donné que nous ne disposons pas d’une image pour chaque blog, supprimez la balise img.
  2. Dans la balise h6, remplacez textContent: subtitle par textContent: updated. Cette opération permet de placer la date de mise à jour dans la partie superposition de l’élément ListView.
  3. Placez la balise h4 avant la section div de la classe item-overlay. Cette opération permet de placer le titre du blog dans la partie principale de l’élément ListView.

Le résultat est le suivant :


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <div class="item-overlay">           
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>
        </div>
    </div>
</div>

Pour définir la couleur des éléments de la liste sur bleu clair, ouvrez items.css et ajoutez l’attribut background-color illustré ici. En outre, réduisez la taille de la seconde ligne de 90px à 60px dans l’attribut -ms-grid-rows comme illustré ici, car nous affichons uniquement la date de mise à jour dans la superposition.


.itemspage .itemslist .item {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 60px;
    display: -ms-grid;
    height: 250px;
    width: 250px;
    background-color: #557EB9;
}

Pour définir la taille de la police et la marge du titre du blog, ajoutez ce code à items.css.


.itemspage .itemslist .win-item .item-title {
    -ms-grid-row: 1;
    overflow: hidden;
    width: 220px;
    font-size:  24px;
    margin-top: 12px;
    margin-left: 15px;
}

Mettre à jour l’objet PageControl fractionné

Ouvrez split.html. Le code HTML de la page fractionnée dans le modèle reprend les mêmes noms que l’exemple de données. Nous devons modifier le code HTML de cette balise div pour refléter les noms dans notre tableau de blogPosts.


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-info">
            <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            <h4 class="item-description" data-win-bind="textContent: description"></h4>
        </div>
    </div>
</div>

Effectuez les mises à jour suivantes :

  1. Remplacez la balise img par un nouveau nœud <div class="item-date">...</div>.
  2. Dans la balise h6, remplacez textContent: subtitle par textContent: author
  3. Supprimez la balise h4.

Le résultat est le suivant :


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
       <div class="item-date">
          <p class="item-month" data-win-bind="innerHTML: month"></p>
          <span class="item-day" data-win-bind="innerHTML: day"></span> | 
          <span class="item-year" data-win-bind="innerHTML: year"></span>
       </div>
        <div class="item-info">
            <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: author"></h6>
        </div>
    </div>
</div>

Notez que nous utilisons une barre verticale en guise de séparateur, car le code HTML ne contient pas de balise permettant de dessiner une ligne verticale.

Dans la mesure où nous n’avons pas toutes les informations incluses dans l’exemple de données, supprimez ce code d’articleSection pour simplifier la page.


<header class="header">
    <div class="text">
        <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
        <h4 class="article-subtitle" data-win-bind="textContent: subtitle"></h4>
    </div>
    <img class="article-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
</header>

Pour définir la couleur du bloc de texte de la date d’élément, ainsi que la police et les marges du texte, ouvrez split.css et ajoutez ce code.


.splitpage .itemlistsection .itemlist .item .item-date {
    -ms-grid-column:  1;
    background-color: #557EB9;
}

    .splitpage .itemlistsection .itemlist .item .item-date .item-month{
        margin-top: 12px;
        margin-left: 12px;
        margin-bottom: 4px;
        font-weight: bold;
        font-size: 1.2em;
    }

    .splitpage .itemlistsection .itemlist .item .item-date .item-day{
        margin-left: 12px;
        font-size: 0.8em;
    }

    .splitpage .itemlistsection .itemlist .item .item-date .item-year{
        font-size: 0.8em;
    }

Pour obtenir la mise en page souhaitée, remplacez la valeur "1" de l’attribut -ms-grid-row par "2". Cela permet au titre de la page d’occuper toute la première ligne, et place le ListView et l’article sur la deuxième.


.splitpage .articlesection {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    margin-left: 50px;
    overflow-y: auto;
    padding-right: 120px;
    position: relative;
    z-index: 0;
}

Nous pouvons désormais essayer de réexécuter l’application. Appuyez sur la touche F5 pour construire, déployer et lancer l’application. Le titre de la page s’affiche immédiatement. La récupération des données de flux par l’application prend un peu plus de temps. Si tout s’est passé comme prévu, vous devez retrouver un élément pour chaque blog dans le ListView. (Ce code ajoute ces éléments au ListView dans l’ordre où les promesses sont satisfaites.) Appuyer ou cliquer sur un élément de ListView vous permet d’accéder à une page fractionnée reprenant la liste des billets du blog sélectionné ainsi que son contenu. Le premier billet est sélectionné par défaut.

Cliquez sur la flèche Précédent pour revenir à la page d’éléments. Nous pouvons voir que les vignettes reviennent à l’écran au moyen d’une transition animée. Il s’agit là d’une fonctionnalité de la Bibliothèque Windows pour JavaScript permettant aux contrôles et aux autres éléments de l’interface utilisateur de s’animer en accord avec les instructions sur l’expérience utilisateur pour les applications du Windows Store.

Capture d’écran de la page d’accueil en orientation paysage.

Ajouter l’objet PageControl des détails d’élément

Le PageControl des détails d’élément adopte le titre du billet de blog comme titre, et contient une zone qu’il destine au contenu du billet de blog.

Pour ajouter le PageControl des détails d’élément :

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier pages, puis sélectionnez Ajouter > Nouveau dossier.
  2. Attribuez au dossier le nom itemDetail.
  3. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier itemDetail, puis sélectionnez Ajouter > Nouvel élément.
  4. Sélectionnez JavaScript > Windows Store > Contrôle de page, puis utilisez le nom de fichier itemDetail.html.
  5. Cliquez sur Ajouter pour créer les fichiers itemDetail.css, itemDetail.html et itemDetail.js dans le dossier pages/itemDetail.

Ouvrez itemDetail.html et mettez à jour la balise <section> comme illustré ici. Ce code définit la disposition. (Il s’agit d’une version simplifiée du code de la page itemDetail.html incluse dans le modèle Application grille.)


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemDetail</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="itemDetail.css" rel="stylesheet" />
    <script src="itemDetail.js"></script>
</head>
<body>
    <div class="itemDetail fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to itemDetail</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

Remplacez la section Main content par celle-ci.


<section aria-label="Main content" role="main">
    <article>
        <div class="item-content"></div>
    </article>
</section>

Ouvrez itemDetail.js et mettez à jour le code de la fonction ready comme illustré ici. Ce code affiche le titre et le contenu quand les utilisateurs accèdent à la page. (Il s’agit d’une version simplifiée du code de la page itemDetail.js incluse dans le modèle Application grille.)


ready: function (element, options) {
   // Display the appbar but hide the Full View button
   var appbar = document.getElementById('appbar');
   var appbarCtrl = appbar.winControl;
   appbarCtrl.hideCommands(["view"], false);

   var item = options && options.item ? options.item : Data.items.getAt(0);                                           
   element.querySelector(".titlearea .pagetitle").textContent = item.title;
   element.querySelector("article .item-content").innerHTML = item.content;
},

Nous pouvons maintenant définir les styles pour la page des détails d’élément. Ouvrez itemDetail.css et remplacez le code du modèle par celui repris ci-dessous.


.itemDetail section[role=main] {
    -ms-grid-row: 2;
    display: block;
    height: 100%;
    overflow-x: auto;
    position: relative;
    width: 100%;
    z-index: 0;
}

    .itemDetail section[role=main] article {
        /* Define a multi-column, horizontally scrolling article by default. */
        column-fill: auto;
        column-gap: 80px;
        column-width: 480px;
        height: calc(100% - 50px);
        margin-left: 120px;
        width: 480px;
    }

        .itemDetail section[role=main] article .item-content p {
            margin-bottom: 20px;
            margin-right: 20px;
            vertical-align: baseline;
        }



Ajouter une barre de l’application à l’aide d’une commande pour afficher la page des détails d’élément

Ajoutons une barre de l’application qui contient un bouton servant à accéder à la page des détails d’élément. La barre ne doit apparaître que si la page fractionnée est active.

Ouvrez split.html et ajoutez ce code immédiatement avant la balise fermante <body>.


<div id="appbar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{id:'view', label:'Full View', icon:'add'}" type="button">
    </button>
</div> 

Lorsque l’utilisateur clique sur le bouton Full View de la barre de l’application, cette dernière passe au PageControl des détails d’élément et affiche le titre et le contenu du billet de blog sélectionné.

Ouvrez split.js. Ajoutez cette déclaration de variable après celle de la variable utils.


// The selected item
var post;

Ajoutez cette instruction à la fonction ready immédiatement avant le deuxième appel à querySelector, afin de définir this.items en premier. Ce code attribue à la variable post l’index du premier billet de blog chaque fois qu’un utilisateur accède à la page.


// Get the first item, which is the default selection
post = this._items.getAt(0);

Ajoutez cette instruction à la fonction _selectionChanged, après l’instruction qui définit this._itemSelectionIndex. Ce code attribue l’index du billet de blog que l’utilisateur sélectionne à la variable post.


// Get the item selected by the user
post = this._items.getAt(this._itemSelectionIndex);

Hors de la fonction _selectionChanged, ajoutez cette fonction de gestionnaire d’événements après la déclaration de la variable post. Ce gestionnaire est appelé lorsque l’utilisateur clique sur le bouton Full View. La fonction WinJS.Navigation.navigate charge la page des détails d’élément et passe le billet de blog sélectionné sous forme d’élément.


function displayFullView() {
    // Display the selected item in the item detail page
    nav.navigate('/pages/itemDetail/itemDetail.html', { item: post });
}

Ajoutez le code suivant à la fonction ready dans split.js. Ce code inscrit notre fonction displayFullView comme gestionnaire d’événements pour l’événement click du bouton Full View.


// Register the event handler for the Full View button
document.getElementById('view').addEventListener("click", displayFullView, false);

Appuyez sur F5 pour exécuter l’application. Cliquer sur un élément de la page d’éléments vous permet d’accéder à une page fractionnée reprenant la liste des billets de blog et le contenu du billet sélectionné. Appuyez ou cliquez sur un billet d’un blog pour que son contenu s’affiche dans la colonne de droite. Pour afficher la barre de l’application, balayez l’écran du doigt du bas ou du haut, ou cliquez avec le bouton droit si votre système ne prend pas en charge les manipulations tactiles.

Capture d’écran de la page fractionnée en orientation paysage

Appuyez ou cliquez sur le bouton Full View pour que notre application affiche dans la page des détails d’élément le contenu du billet de blog sélectionné.

Capture d’écran de la page de détails en orientation paysage

Si vous appuyez ou cliquez sur le bouton Précédent, vous revenez ainsi à la page fractionnée. Le premier élément de ListView est ici sélectionné, ce qui n’est pas obligatoirement ce que nous avons choisi d’afficher dans la page des détails d’élément. Vous pouvez au besoin ajouter le code nécessaire pour mémoriser et restituer la sélection.

Le code du modèle que notre application utilise se charge des orientations paysage et portrait. Faites pivoter votre ordinateur, ou exécutez votre application dans le simulateur proposé par Microsoft Visual Studio Express 2012 pour Windows 8 et faites pivoter l’affichage. La page d’éléments se présente sous cette forme.

Capture d’écran de la page d’accueil en orientation portrait

La page fractionnée se présente sous cette forme. Vous pouvez voir que seul le contrôle ListView s’affiche jusqu’à ce que vous sélectionniez un élément. Le billet de blog se présente alors verticalement. Si vous cliquez sur le bouton Full View, le billet s’affiche alors à l’horizontale.

Capture d’écran de la page fractionnée en orientation portrait

Récapitulatif

Voilà pour le code de notre application. Nous avons appris élaborer notre application d’après les modèles de page intégrés, à effectuer la liaison de données à un ListView, à accéder à une nouvelle page et à ajouter une barre de l’application avec un bouton.

Pour plus d’informations sur d’autres fonctionnalités que vous pouvez ajouter à votre application, voir Feuille de route pour les applications du Windows Store en JavaScript.

Rubriques associées

Feuille de route pour les applications du Windows Store en JavaScript
Développer des applications du Windows Store à l’aide de Visual Studio

 

 

Afficher:
© 2017 Microsoft