Créer votre première application Windows Store avec Blend, partie 2 : la page de détails (HTML et JavaScript)

Article
06/05/2015

La collection d'outils HTML et CSS de Blend for Visual Studio vous permet de développer une application Windows Store plus rapidement et facilement. Dans ce didacticiel, vous générerez une application simple, PickaFlick, dans laquelle vous pouvez rechercher de nouveaux films dans une liste générée par une API Rotten Tomatoes.

Créer votre première application du Windows Store - Blend (HTML)

En téléchargeant ce projet à partir de la galerie d'exemples, vous pouvez passer en revue non seulement le code mais aussi tous ses composants, ce qui vous permet de suivre son déroulement et de générer le projet au fur et à mesure.

Notes

Pour exécuter cette application, vous devez vous inscrire auprès de Rotten Tomatoes pour obtenir une clé et la coller dans le code.Consultez Ajouter une référence à l'API JavaScript pour Windows plus loin dans cette rubrique.

Dans Créer votre première application Windows Store avec Blend, partie 1 : la page maître (HTML et JavaScript), vous avez créé la page d'accueil de PickaFlick. Dans la partie 2, vous :

Ajouter un modèle d'élément à votre projet

Lorsque vous créerez la page de détails des films, les premières opérations que vous effectuerez seront celles que vous avez effectuées dans la première partie de ce didacticiel : créer une page HTML, lui ajouter un élément div, puis le renommer pour créer un élément id.

Pour ajouter une page HTML

Dans le panneau Projets, cliquez avec le bouton droit sur le fichier projet, puis cliquez sur Nouvel élément.

La boîte de dialogue Nouvel élément s'ouvre.
Dans la liste des modèles d'élément, cliquez sur Page HTML, nommez la page movieDisplay.html, puis cliquez sur OK.

Pour ajouter un élément div à movieDisplay.html

Dans le panneau DOM en direct, cliquez avec le bouton droit sur body, cliquez sur Insérer un élément, puis sur div, ou appuyez sur Ctrl+Shift+=.
Dans le panneau DOM en direct, renommez l'élément div que vous venez d'ajouter en cliquant dessus puis en tapant movieDisplayContainer dans le champ de texte.

Basculer vers Visual Studio et revenir

L'espace de noms Fragment de JavaScript pour Windows est le même espace de noms que vous avez utilisé lorsque vous avez créé homepage.html dans la première partie de ce didacticiel, et le passage de Blend à Visual Studio vous sera donc familier. Cet appel à l'espace de noms WinJS.Ui.Fragments chargera la page movieDisplay comme fragment dans default.html lorsque le bouton représentant un poulet sera utilisé.

Pour modifier default.js

Dans le panneau Projets, cliquez avec le bouton droit sur le fichier PickaFlick.sln, puis cliquez sur Modifier dans Visual Studio.

Visual Studio ouvre le projet Pick-a-Flick.
Dans l'Explorateur de solutions, développez le dossier js, puis double-cliquez sur default.js pour l'ouvrir.

Recherchez .done(). À l'intérieur des parenthèses, collez le code suivant :

//when the loadInitialPage function is complete, call handleLoadedPage
    function completed(r) {
      handleLoadedPage();
    }
  );
}

//create the chickenButton variable, and add a click event listener
//when chickenButton is clicked, call loadResultsPage
function handleLoadedPage() {
  var chickenButton = document.querySelector("#chickenButton");
  chickenButton.addEventListener("click", loadResultsPage);
}

//define loadResultsPage function, load movieDisplay.html
function loadResultsPage() {
  clearChildren(target);

//When page is loaded, use Windows Javascript Fragments API to load movieDisplay.html
//call getMovieData
  WinJS.UI.Fragments.render("/movieDisplay.html", target).done(
function completed(r) {
  getMovieData();
}
);
}

function clearChildren(element) {
  while (element.hasChildNodes()) {
    element.removeChild(element.lastChild);
  }
}

//define movieData variable and associated movie data variables
//insert your own Rotten Tomatoes API key for apikey variable
var movieData;

function getMovieData() {
  var movieArray = new Array();
  var apikey = "Insert API Key Here";
  var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
  var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apikey;

  WinJS.xhr({
    url: moviesSearchUrl, dataType: "jsonp"
  }).then(function (xhr) {
    var response = JSON.parse(xhr.response);

//get title, summary, box art
    response.movies.forEach(function (i) {
      movieArray.push({
        title: i.title,
        summary: i.synopsis,
        boxart: i.posters.detailed
      });
    });

//create movieData binding
    movieData = new WinJS.Binding.List(movieArray);

    WinJS.UI.processAll();
  }

Pour exécuter cette application, remplacez le texte Insert API Key Here par la clé que vous avez reçue de Rotten Tomatoes, puis enregistrez toutes vos modifications en appuyant sur Ctrl+Shift+S.

Lorsque vous vous inscrivez pour recevoir une clé d'API Rotten Tomatoes, vous êtes invité à fournir le nom de votre application et une URL. Vous pouvez utiliser n'importe quel nom et fournir l'URL d'un site personnel, par exemple un blog. Vous êtes également invité à sélectionner le type de votre application. Comme il s'agit d'une application Windows 8, elles est optimisée pour les tablettes et ordinateurs de bureau Windows 8. L'application appelle la liste des nouvelles versions de films, comprenant le titre, l'illustration et le résumé.
Dans Blend, cliquez sur Recharger pour charger les modifications que vous venez d'apporter au projet dans Visual Studio.

Utiliser le mode interactif

Si vous générez et exécutez l'application (par exemple en appuyant sur F5), vous pouvez accéder à movieDisplay.html en cliquant ou appuyant sur le bouton représentant un poulet. Toutefois, vous ne pouvez pas cliquer ou appuyer sur ce bouton sur l'aire de conception. Si vous accédez à movieDisplay.html dans Blend, l'état de l'application doit changer. En utilisant le mode interactif, vous pouvez transmettre des événements à votre application au moment de la conception et accéder ainsi à des états de l'application qui ne sont pas disponibles tant que le code JavaScript n'a pas été exécuté.

En mode interactif, vous pouvez interagir avec votre application comme les utilisateurs qui l'ont sur leurs appareils. Après avoir exécuté votre application en mode interactif, vous pouvez appliquer un style aux éléments clés de votre application qui étaient précédemment indisponibles dans Blend.

Pour accéder à movieDisplay.html en mode interactif

Lorsque default.html est visible sur l'aire de conception, cliquez sur Activer le mode interactif (dans l'angle supérieur droit de l'interface d'application), ou appuyez sur Ctrl+Alt+I.
Une fois que l'application a démarré en mode interactif, cliquez ou appuyez sur le bouton représentant un poulet pour accéder à movieDisplay.html, qui est vide.
Cliquez sur Désactiver le mode interactif (dans l'angle supérieur droit de l'interface d'application) ou appuyez sur Ctrl+Alt+I.

Notez que vous travaillez toujours dans default.html, comme l'indique l'onglet en haut de l'application. Toutefois, movieDisplayContainer apparaît désormais dans le panneau DOM en direct. En outre, la notification « Le contenu sélectionné fait partie de movieDisplay.html » apparaît en haut de l'application sous l'onglet default.html. Comme mentionné précédemment dans cette rubrique, cette page n'était pas disponible pour être modifiée dans son état dynamique avant l'activation du mode interactif. Maintenant que vous avez chargé movieDisplay.html, vous pouvez commencer à appliquer un style à movieDisplayContainer.

Pour ajouter un style à movieDisplayContainer

Dans le panneau DOM en direct, cliquez avec le bouton droit sur movieDisplayContainer, puis cliquez sur Créer une règle de style à partir d'un ID d'élément.
Dans le panneau Propriétés CSS, #movieDisplayContainer étant sélectionné dans la catégorie Règles de style appliquées, définissez height sur 100 %.

Ajouter un contrôle FlipView WinJS (bibliothèque JavaScript pour Windows)

Le contrôle FlipView est un contrôle de la bibliothèque JavaScript pour Windows qui affiche un élément à la fois dans une collection pour activer un comportement de consultation qui permet de parcourir les éléments de la collection. En utilisant un contrôle FlipView dans PickaFlick, vous pouvez parcourir facilement la liste des films fournie par un appel de l'API Rotten Tomatoes.

Vous pouvez ajouter un contrôle FlipView directement à partir du panneau Ressources de Blend.

Pour ajouter un contrôle FlipView

Dans la zone de texte Rechercher du panneau Ressources, tapez FlipView, puis appuyez sur Entrée.
Double-cliquez sur FlipView pour ajouter le contrôle à movieDisplayContainer.

Notez que le contrôle FlipView apparaît dans le panneau DOM en direct. Lorsqu'un contrôle winjs est instancié dans Blend, les éléments dynamiques associés à ce contrôle apparaissent également dans le panneau DOM en direct. Pour afficher ces éléments dynamiques, développez FlipView dans le panneau DOM en direct. L'icône d'éclair b5-icn-livedom-dynamic à droite d'un élément indique que l'élément est généré dynamiquement.

Contrôle FlipView dans le volet Live DOM de Blend

Si vous pointez sur FlipView dans le panneau DOM en direct, des informations supplémentaires sur le contrôle s'affichent, notamment les éléments type, tag, id et class. Notez que le contrôle FlipView appartient à la classe win-flipview.

Effet Pointage du contrôle FlipView dans le volet Live DOM de Blend

Si vous cliquez sur FlipView dans le panneau DOM en direct, puis que vous pointez sur .win-flipview (ui-dark.css) dans la catégorie Règles de style appliquées du panneau Propriétés CSS, vous pouvez vérifier que .win-flipview est défini dans .win-flipview (ui-dark.css) et que height est défini sur 400px.

Contrôle FlipView Blend dans ui-dark.css

Vous pouvez remplacer le style par défaut (dérivé de ui-dark.css) en créant un style personnalisé dans default.css. Étant donné qu'une classe est déjà attribuée au contrôle FlipView, vous pouvez ajouter rapidement une référence à cette classe dans default.css puis définir une règle de style pour cette classe.

Pour créer un style pour la classe win-flipview

Dans le panneau Propriétés CSS à droite de Règles de style appliquées, cliquez sur l'icône Créer une règle de style à partir de l'élément sélectionné , puis sur Créer une règle de style à partir d'une classe Element.
Dans le panneau Règles de style, cliquez sur win-flipview.

Notez que .win-flipview (default.css) apparaît maintenant dans la catégorie Règles de style appliquées du panneau Propriétés CSS.
Dans le panneau Propriétés CSS, définissez height sur 100 %.

Créer une liaison avec des données de film

À ce stade, les données de film sont chargées mais elles ne s'affichent pas car le HTML ne contient aucune référence à celles-ci. Ainsi, le code HTML qui apparaît sur l'aire de conception et les données que default.js génère (et que la variable movieData définit) sont complètement indépendants. Pour afficher les données sur l'aire de conception, vous devez lier ces données au contrôle FlipView dans le code HTML.

Pour lier le contrôle FlipView à movieData

Dans le panneau DOM en direct, cliquez sur FlipView.

Vous pouvez maintenant accéder au contrôle FlipView dans le panneau Attributs HTML (l'onglet situé en regard de l'onglet Propriétés CSS).

Conseil

Lorsque vous cliquez sur un élément, le panneau Attributs HTML affiche les propriétés de cet élément.Lorsque vous cliquez sur un contrôle, le panneau Attributs HTML montre les propriétés de ce contrôle.
Dans la catégorie Contrôles d'application Windows du panneau Attributs HTML, tapez movieData.dataSource dans la zone de texte itemDataSource.

Dans movieDisplay.html, l'attribut data-win-options est maintenant appliqué au contrôle FlipView et contient la valeur itemDataSource:movieData.dataSource.

Créer un modèle d'élément et lui appliquer un style

Étant donné que vous exécutez votre application dans Blend, les données actives apparaissent sur l'aire de conception. Les données brutes apparaissent sous forme de chaîne. Maintenant que vous avez vérifié la connexion de données, vous pouvez appliquer un style aux données à l'aide des propriétés title, summary et boxart que vous avez créées dans default.js.

Source de données Blend sur l'aire de conception

Vous allez créer un modèle de données pour appliquer un style cohérent à toutes les données de film que vous avez extraites de Rotten Tomatoes.

Vous allez créer un modèle d'élément en appliquant une propriété itemTemplate au contrôle FlipView.

Pour créer un modèle d'élément

Dans le panneau DOM en direct, vérifiez que FlipView est sélectionné.
Dans la liste itemTemplate de la catégorie Contrôles d'application Windows du panneau Attributs HTML, cliquez sur Créer un modèle.

La boîte de dialogue Créer un modèle s'affiche.
Nommez le modèle movieDisplayTemplate et vérifiez que Identifier par ID est sélectionné.
Dans la liste Ajouter des champs de données au modèle, cliquez sur boxart, summary et title. Cliquez sur OK.

L'illustration, le résumé et le titre du premier film de la liste apparaissent sur l'aire de conception.

Important

Étant donné que cette application utilise des données réelles, les données qui s'affichent peuvent être différentes des données figurant dans l'image précédente.

Les données voulues s'affichent sur la page mais pas tout à fait comme vous le voulez dans l'application finale. Pour modifier la disposition, vous allez appliquer une grille à la propriété display de itemTemplate. Cette grille formera la base de la disposition du contenu de la page. Après avoir créé votre grille, vous pouvez commencer à appliquer un style aux éléments que vous ajouterez à la page.

Pour appliquer un style au modèle d'élément

Sur l'aire de conception, cliquez à droite de l'image d'illustration. Cette opération sélectionne l'élément div qui contient l'illustration, le titre, et le résumé, qui sont indiqués par la zone bleue autour des éléments de la page.
Cliquez avec le bouton droit sur l'élément div, puis cliquez sur Ajouter une nouvelle classe.
Dans la boîte de dialogue Ajouter une nouvelle classe, nommez la classe movieContainer, vérifiez que Créer une règle de style ciblant cette classe est sélectionné, puis cliquez sur OK.
Dans le panneau Règles de style, cliquez sur .movieContainer.
Dans la zone de texte Rechercher ou Définir du panneau Propriétés CSS, tapez height: 100%; width: 100%; pour définir simultanément les propriétés height et width, puis appuyez sur Entrée.

Le contenu se déplace vers l'angle supérieur gauche de l'aire de conception.

Pour faciliter la création de la grille, désactivez la page en supprimant le code suivant de movieDisplay.html :

<img data-win-bind="src:boxart" height="100" width="100">
     <div data-win-bind="textContent:summary"></div>
     <div data-win-bind="textContent:title"></div>

Dans le panneau Propriétés CSS, effacez la zone de texte Rechercher ou Définir en cliquant sur l'icône Effacer la recherche à droite de la zone.
Dans la catégorie Disposition, cliquez sur –ms-grid dans la liste déroulante d'affichage.

Créer la grille de disposition

Maintenant que la propriété d'affichage est définie sur -ms-grid, vous pouvez créer des lignes et des colonnes en cliquant directement sur l'aire de conception.

Vous pouvez modifier des objets à l'aide des ornements, c'est-à-dire les poignées qui apparaissent dans les angles et au milieu des contours des objets. Les ornements s'affichent également aux extrémités des lignes de repère et du quadrillage. Lorsque vous créez une grille, vous utilisez un ornement d'insertion pour placer le quadrillage à l'emplacement voulu.

Pour créer la grille de disposition

Dans le panneau Propriétés CSS, vérifiez que Propriétés gagnantes ou .movieContainer est sélectionné.
Sur l'aire de conception, pointez sur la ligne bleue pointillée en haut de la grille, puis cliquez sur l'ornement orange d'insertion qui apparaît.

Un ornement de colonne est ajouté.
Répétez cette procédure pour ajouter trois autres ornements de colonne de grille, ce qui définit cinq colonnes.
Pointez sur l'ornement de grille de gauche. Cliquez pour ajouter un ornement de ligne, ce qui définit deux lignes.

Lorsque vous aurez terminé, vous devrez avoir une grille avec cinq colonnes et deux lignes qui ressemble à l'illustration suivante :

Pour ce didacticiel, vous pouvez estimer les largeurs de colonne et de ligne. Toutefois, vous pouvez affiner votre disposition en spécifiant les largeurs exactes de chaque colonne ou ligne à l'aide de l'ornement de largeur. Cliquez à l'intérieur de la zone pour taper un nombre, puis choisissez l'une des options suivantes dans la liste :

Fractionnaire (fr)
Pixel (px)
Auto
Pourcentage (%)

Disposer les éléments de grille

La disposition se compose d'un logo, d'une image d'espace réservé pour l'illustration, du titre et du résumé. Dans la procédure suivante, vous allez ajouter les éléments et leur appliquer un style et vous lierez l'illustration, le titre, et les données de synthèse aux éléments sur la page.

Pour insérer les images et leur appliquer un style

Dans le panneau Projets, ouvrez le dossier images, puis faites glisser small-LogoChicken dans la partie supérieure gauche de la cellule dans la grille.
Cliquez avec le bouton droit sur small-LogoChicken, puis cliquez sur Ajouter une nouvelle classe.
Dans la boîte de dialogue Ajouter une nouvelle classe, nommez la classe smallLogo-Chicken.
Assurez-vous que l'option Créer une règle de style ciblant cette classe est sélectionnée, puis cliquez sur OK.
Dans le panneau Propriétés CSS, dans la catégorie Grille, définissez grid-column-align et grid-row-align sur center.
Dans le panneau Projets, ouvrez le dossier images, puis faites glisser temp.png vers la troisième colonne de la deuxième ligne de la grille.
Cliquez avec le bouton droit sur temp.png, puis cliquez sur Ajouter une nouvelle classe.
Dans la boîte de dialogue Ajouter une nouvelle classe, nommez la classe boxart.
Vérifiez que l'option Créer une règle de style ciblant cette classe est sélectionnée, puis cliquez sur OK.
Dans le panneau Propriétés CSS, dans la catégorie Grille, définissez grid-column-align sur center et grid-row-align sur start.

Vous pouvez maintenant créer une liaison avec les données puis leur appliquer un style directement dans l'aire de conception.

Modifier les liaisons de données

En liant les différents éléments aux objets de données spécifiques définis dans default.js, vous pouvez appliquer un style à chaque élément séparément.

Dans la procédure suivante, vous allez lier l'image d'illustration à l'objet de données d'illustration. De plus, vous allez ajouter les éléments de titre et de résumé, les lier au titre et aux données de synthèse, puis leur appliquer un style.

Pour lier l'image d'illustration aux données d'illustration

Sur l'aire de conception, cliquez sur l'image d'illustration.
Dans le panneau Attributs HTML, dans la catégorie Commun, cliquez sur Options avancées , puis sur Modifier la liaison de données.
Dans la boîte de dialogue Créer une liaison de données pour <img>.src, cliquez sur boxart, puis sur OK.

La bordure jaune autour de l'éditeur de valeurs indique un objet lié aux données.

Après un léger délai dû à l'actualisation de la connexion de données, la nouvelle image de film apparaît sur l'aire de conception.
Dans le panneau Propriétés CSS, définissez height sur 500px.

Pour ajouter le titre et lui appliquer un style

Dans le panneau Composants, tapez h1 dans la zone de texte Rechercher, puis faites glisser l'élément h1 dans la troisième colonne de la première ligne.

L'élément h1 apparaît sur la page.
Cliquez avec le bouton droit sur l'élément h1, puis cliquez sur Ajouter une nouvelle classe.
Dans la boîte de dialogue Ajouter une nouvelle classe, nommez la classe title.
Assurez-vous que l'option Créer une règle de style ciblant cette classe est sélectionnée, puis cliquez sur OK.
Cliquez sur l'élément h1, puis, en regard de Couleur dans la catégorie Police du panneau Propriétés CSS, cliquez sur Non défini.
Dans l'angle inférieur droit de l'éditeur de couleurs, cliquez sur Pipette de couleur .
À l'aide de la pipette, pointez sur l'image de poulet sur l'aire de conception pour spécifier la nuance de rouge voulue pour le texte du titre.

Notez que la couleur du titre change lorsque vous pointez sur différentes parties de l'image de poulet.
Cliquez sur la couleur à appliquer au titre.

Pour lier l'élément h1 aux données de titre

L'élément h1 étant sélectionné, dans la catégorie Commun du panneau Attributs HTML, cliquez sur Options avancées , puis cliquez sur Modifier la liaison de données.
Dans la boîte de dialogue Créer la liaison de données pour h1.textContent, cliquez sur title, puis sur OK.

Après un léger délai dû à l'actualisation de la connexion de données, le nouveau titre de film apparaît sur l'aire de conception.

Pour éviter que les titres longs s'affichent sur deux lignes, vous pouvez modifier l'étendue de colonne pour que les titres longs couvrent deux colonnes ou plus.

Pour modifier l'étendue de colonne pour le titre

Dans le panneau Propriétés CSS, dans la catégorie Grille, définissez la valeur de grid-column-span sur 3, puis appuyez sur Entrée.

L'élément h1 couvre maintenant trois colonnes.

Pour ajouter le résumé

Dans le panneau Composants, tapez article dans la zone de texte Rechercher, puis faites glisser l'élément article sur la cinquième colonne de la deuxième ligne.

L'élément article apparaît dans .movieContainer. Étant donné que l'élément est vide, vous ne voyez pas le contenu si vous ne créez pas une liaison avec les données.

Pour lier l'élément article aux données de synthèse

Cliquez avec le bouton droit sur l'élément article, puis cliquez sur Ajouter une nouvelle classe.
Dans la boîte de dialogue Ajouter une nouvelle classe, nommez la classe summary.
Assurez-vous que l'option Créer une règle de style ciblant cette classe est sélectionnée, puis cliquez sur OK.
Dans la catégorie Commun du panneau Attributs HTML, cliquez sur Options avancées à droite de textContent, puis cliquez sur Modifier la liaison de données.
Dans la boîte de dialogue Créer la liaison de données pour article.textContent, cliquez sur summary, puis sur OK.

Le nouveau résumé de film apparaît sur l'aire de conception.

Modifier les propriétés de police

Le style de texte par défaut n'est pas facile à lire, mais vous pouvez modifier facilement les propriétés de police à l'aide du panneau Propriétés CSS. Dans la procédure suivante, vous allez appliquer un style au texte récapitulatif. Vous pouvez modifier la police de titre de la même façon.

Pour appliquer un style au texte récapitulatif

Cliquez sur l'élément article, puis sur la police voulue figurant dans la liste font-family name du panneau Propriétés CSS.

Vous pouvez ajouter des polices à votre liste font-family en cliquant dessus dans la liste font-family name.

Vous pouvez également modifier l'ordre de votre sélection de polices en sélectionnant une police dans la liste font-family name puis en cliquant sur les flèches Haut ou Bas. Vous pouvez vérifier dans le fichier .css que l'ordre des polices change en conséquence.
Dans l'éditeur de valeurs font-size, cliquez sur la valeur voulue ou entrez-la.
En regard de color, cliquez sur Non défini.
Dans l'éditeur de couleurs, cliquez sur la couleur voulue ou entrez son code hexa dans la zone de texte Valeur hexadécimale, puis appuyez sur Entrée.

Vous pouvez aussi cliquer sur la pipette de couleur dans l'angle inférieur droit de l'éditeur de couleurs. Utilisez la pipette pour pointer sur un élément du bureau qui a la couleur voulue. La couleur du titre change à mesure que vous pointez sur différents éléments. Si vous cliquez sur l'élément qui a la couleur voulue, le texte récapitulatif prend cette couleur.

En outre, vous pouvez inclure une police personnalisée pour stigmatiser davantage votre application. Consultez Incorporer une police personnalisée.

Pour ajouter une barre de défilement aux longs résumés, modifiez la propriété overflow de l'élément article.

Pour ajouter une barre de défilement aux longs résumés

Sélectionnez l'élément article, puis, dans la zone de texte Rechercher ou Définir, tapez overflow.
Dans la liste overflow, cliquez sur auto.

Une barre de défilement s'affiche maintenant pour les résumés qui dépassent la page.

Vous pouvez également affiner davantage votre disposition à l'aide de règles et de repères pour aligner les éléments sur la page. Consultez Utiliser des règles et des repères.

Si vous vous êtes inscrit auprès de Rotten Tomatoes et que vous avez incorporé la clé d'API appropriée, vous pouvez maintenant appuyer sur F5 pour générer et exécuter votre application.