Créer votre première application Windows Store avec Blend, partie 1 : la page maître (HTML et JavaScript)
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érez PickaFlick, une application simple qui sert à parcourir une liste de nouveaux films. La liste est générée via une API Rotten Tomatoes, et vous devez vous inscrire pour obtenir une clé d'API que vous collez dans le code.
Page d'accueil de l'application PickaFlick
Dans la première partie de ce didacticiel, vous allez créer la page d'accueil de l'application. En cours de route, vous apprendrez à :
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.
Aucune expérience de HTML, CSS, ou JavaScript n'est nécessaire pour suivre ce didacticiel. Toutefois, pour réussir à utiliser Blend, il est utile d'avoir un niveau d'expérience intermédiaire de HTML, CSS et JavaScript.
Blend et Visual Studio comportent les mêmes modèles de projet qui vous aident à commencer à développer votre application Windows Store. Pour plus d'informations sur les modèles que Blend et Visual Studio proposent pour le développement d'autres types d'applications, consultez Modèles permettant d'accélérer le développement de vos applications.
Dans Blend, dans le menu Fichier, cliquez sur Nouveau projet.
Dans la boîte de dialogue Nouveau projet, une liste de types de projet apparaît sur le côté gauche. Lorsque vous cliquez sur un type de projet, les modèles de projet associés à ce type apparaissent sur le côté droit.
Dans la liste des types de projets, cliquez sur HTML (Windows Store).
Dans la liste des modèles de projet, cliquez sur Application vide.
Dans la zone de texte Nom, tapez PickaFlick.
Dans la zone de texte Emplacement, vérifiez l'emplacement du projet.
Dans la liste Langage, JavaScript est la seule option.
Afficher comment l'interface utilisateur Blend reflète les modifications apportées à votre application
L'espace de travail par défaut de Blend comporte une interface visuelle pour concevoir des applications Windows Store : l'aire de conception, les panneaux, les configurations de l'espace de travail, les modes de conception et les menus. Pour plus d'informations, consultez Espace de travail de l'application Blend (HTML).
Lorsque vous travaillez sur un projet, les modifications effectuées dans un domaine de l'application sont répercutées dans l'interface.
Dans la partie gauche supérieure, cliquez sur l'onglet Projets pour afficher les dossiers et les fichiers générés automatiquement lorsque vous créez un projet à partir du modèle Application vide :
Références Contient les bibliothèques CSS et Windows en lecture seule pour JavaScript.
css Contient le fichier .css pour votre application.
images Contient les ressources d'image par défaut pour votre application.
js Contient le fichier .js par défaut pour votre application.
default.html Page de démarrage par défaut de votre application.
package.appxmanifest Répertorie le contenu de votre application et décrit ses fonctionnalités (par exemple, si elle peut accéder à la webcam de l'utilisateur). Ce fichier spécifie également la page de démarrage de l'application.
Pour plus d'informations, consultez Panneau Projets (HTML).
Sous le panneau Projets, dans la partie inférieure gauche de l'interface, se trouve le panneau DOM en direct. Le panneau DOM en direct montre la structure de default.html. Si vous développez body, l'élément p apparaît.
Le panneau DOM en direct fournit une vue de la hiérarchie d'objets de la page HTML sur laquelle vous travaillez. Lorsque vous travaillez directement dans le panneau DOM en direct, vous pouvez modifier rapidement et facilement la hiérarchie d'objets au fur et à mesure.
Pour plus d'informations, consultez Panneau DOM actif (HTML).
L'élément p contient le texte « Emplacement du contenu » qui apparaît sur l'aire de conception.
Dans la vue des documents connexes, vous pouvez voir le code pour default.html et default.css. Lorsque vous modifiez des éléments affichés sur l'aire de conception, les documents connexes sont mis à jour automatiquement. Lorsque vous apportez des modifications à JavaScript, vous êtes averti que vous devez actualiser la vue. Cliquez sur Actualiser dans l'angle supérieur droit de l'application pour afficher les modifications sur l'aire de conception.
Pour plus d'informations, consultez Affichage des documents associés (HTML).
Si vous ne voyez pas default.html et default.css, cliquez sur l'icône Mode Fractionné dans l'angle supérieur droit de l'aire de conception.
Dans cette procédure, vous supprimerez l'élément par défaut p de default.html, ajouterez une couleur d'arrière-plan à body, et vérifierez que le code est mis à jour à mesure que vous travaillez.
Dans le panneau DOM en direct, cliquez avec le bouton droit sur p, puis cliquez sur Supprimer.
Dans le panneau Règles de style, développez default.css, puis cliquez sur body.
Notez que le sélecteur body est également sélectionné dans default.css dans la vue des documents connexes.
Dans le panneau Propriétés CSS, développez la catégorie Arrière-plan.
En regard de Couleur d'arrière-plan, cliquez sur Non défini.
Dans la zone de texte Valeur hexadécimale, tapez #D5BF9A, puis appuyez sur Entrée.
Le sélecteur body dans default.css contient désormais la règle de style background-color: #D5BF9A.
En plus des modèles de projet, Blend et Visual Studio comportent des modèles d'éléments qui contiennent le code utilisé couramment. Vous pouvez facilement en ajouter un à un projet pour contribuer à accélérer le développement de l'application. Consultez Modèles permettant d'accélérer le développement de vos applications.
Pour l'application PickaFlick, vous allez ajouter un modèle d'élément pour une page HTML au projet existant. Cette page contiendra le code HTML pour la page d'accueil de votre application.
Dans le menu Fichier, 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.
Dans la zone de texte Nom, tapez homepage.html, puis cliquez sur OK pour ajouter le modèle d'élément.
Dans la vue des documents connexes, notez que le balisage pour homepage.html est minimal.
Étant donné que homepage.html s'affiche comme fragment à l'intérieur de default.html, homepage.html héritera du style de default.html. Ainsi, vous n'avez pas besoin d'ajouter des références CSS ou HTML à homepage.html.
Ensuite, vous ajouterez un élément div à la page puis renommerez cet élément div. Lorsque vous renommez l'élément div, un attribut id est attribué à ce dernier, qui simplifie l'identification de l'élément div parmi d'autres éléments div dans la page et dans toute l'application.
Vous pouvez ajouter des éléments à votre page HTML en :
les tapant directement dans l'éditeur de code ;
insérant l'élément à l'aide du panneau Composants ;
insérant l'élément directement dans le panneau DOM en direct.
La procédure suivante vous montre ces trois méthodes d'ajout d'un élément à la page HTML. Une fois que vous aurez ajouté l'élément div, vous ajouterez un attribut id à cet élément div en le renommant dans le panneau DOM en direct.
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+=.
Conseil
Les méthodes supplémentaires pour ajouter un élément à l'aire de conception dans Blend sont les suivantes :
-
Dans la vue des documents connexes, dans homepage.html, placez le curseur entre les balises body d'ouverture et de fermeture, puis tapez <div>.La balise de fermeture est ajoutée automatiquement.
-
Dans le panneau DOM en direct, cliquez sur body, puis, dans le panneau Composants, recherchez l'élément div en tapant div dans la zone de texte Rechercher, puis effectuez l'une des opérations suivantes :
-
Double-cliquez sur div pour ajouter un élément div à la page.
-
Faites glisser l'élément div du panneau Composants vers l'aire de conception.
-
Faites glisser l'élément div du panneau Composants vers le panneau DOM en direct.
-
Dessinez un élément div directement sur l'aire de conception.
-
Un nouvel élément div apparaît dans le panneau DOM en direct et dans le code HTML de homepage.html.
-
Dans le panneau DOM en direct, effectuez l'une des opérations suivantes pour appliquer un élément id au nouvel élément div :
Double-cliquez sur l'élément div, puis tapez homepageContainer dans le champ de texte.
Cliquez avec le bouton droit sur l'élément div, cliquez sur Modifier l'ID, puis tapez homepageContainer.
Dans le panneau Attributs HTML, dans le champ ID, tapez homepageContainer.
Dans la vue des documents connexes, dans homepage.html, un attribut id avec la valeur homepageContainer est ajouté à l'élément div.
Dans cette section, vous apprendrez à :
Implémenter le modèle de navigation sur une seule page
basculer entre Blend et Visual Studio pour modifier JavaScript.
Pour l'application PickaFlick, vous allez utiliser le modèle de navigation sur une seule page, ce qui signifie que vous utiliserez une seule page pour afficher votre application et que vous chargerez des données dans cette page à partir d'autres pages, si nécessaire. Vous continuez à fractionner votre application en plusieurs fichiers, mais votre application charge les autres pages en tant que fragments de page dans la page par défaut au lieu de se déplacer de page en page (navigation multipage). Consultez Démarrage rapide : utilisation de la navigation sur une seule page (applications Windows Store en JavaScript et HTML).
Pour charger le contenu de homepage.html dans default.html, vous devez appeler l'espace de noms Win.JS UI.Fragment pour afficher le fragment de page dans default.html. Vous pouvez modifier vos fichiers .js dans Blend, mais vous pouvez ajouter, modifier et déboguer JavaScript plus facilement avec les outils intégrés à Visual Studio. Pour plus d'informations sur ces outils, consultez IntelliSense JavaScript.
Vous pouvez basculer facilement entre Blend et Visual Studio tout en travaillant sur un projet. Vous pouvez même ouvrir un même fichier projet simultanément dans Blend et Visual Studio sur le même ordinateur. Lorsque vous enregistrez une modification apportée à un fichier dans un outil et que vous basculez ensuite vers l'autre outil, il vous suffit de recharger le fichier pour actualiser votre vue du projet.
Notes
Vous pouvez copier et coller du code dans Blend ou Visual Studio.Toutefois, Visual Studio est l'outil recommandé pour l'écriture et la modification de code JavaScript.Cette étape montre comment vous pouvez basculer facilement entre Blend et Visual Studio même si vous travaillez sur un seul projet.
Si vous ajoutez de nouveaux fichiers à votre projet lorsque vous travaillez dans Visual Studio, vous devez enregistrer le projet avec Enregistrer tout (Ctrl+Shift+S) ou générer et exécuter l'application avant de revenir à Blend.Lorsque vous basculez vers Blend, vous recevez un message qui vous demande si vous souhaitez recharger votre projet.Cliquez sur Oui et les nouveaux fichiers sont ajoutés à votre projet dans Blend.
Vous êtes maintenant prêt pour ajouter une référence à l'espace de noms Fragment de JavaScript Windows.
Dans le panneau Projets, cliquez avec le bouton droit sur PickaFlick, puis cliquez sur Modifier dans Visual Studio.
Visual Studio ouvre le projet PickaFlick.
Dans Visual Studio, dans l'Explorateur de solutions, développez le dossier js, puis double-cliquez sur default.js pour l'ouvrir.
Collez le code suivant immédiatement après app.start(); :
//add DOMContentLoaded event document.addEventListener("DOMContentLoaded", loadInitialPage, false);
Collez le code suivant à la fin du script :
//When initial page is loaded, use WinJS.UI.Fragments Namespace to load homePage.html into the body element of default.html var target; function loadInitialPage() { target = document.querySelector("body"); WinJS.UI.Fragments.renderCopy("/homePage.html", target).done(); }
Appuyez sur Ctrl+Shift+S pour enregistrer toutes vos modifications, puis basculez vers Blend.
Lorsque vous êtes invité à recharger le projet, cliquez sur Recharger. Blend reflète les modifications que vous venez d'apporter au projet dans Visual Studio.
Notez que homepageContainer apparaît désormais dans le panneau DOM en direct. Cliquez sur l'onglet default.html en haut de l'application. Notez que la couleur d'arrière-plan de homepageContainer dans le panneau DOM en direct est différente de celle du reste du panneau DOM en direct, ce qui indique qu'il provient d'une autre page. À droite de homepageContainer se trouve l'icône de fragment .
Si vous cliquez sur homepageContainer dans le panneau DOM en direct, homepage.html s'ouvre dans la vue de document associée. En plus de ces caractères indicateurs, lorsque vous sélectionnez un élément provenant de homepage.html pendant que vous travaillez sur default.html, en haut de l'application, sous l'onglet default.html, la notification «Le contenu sélectionné fait partie de homepage.html » s'affiche. Ce message vous aide à identifier la source des objets ou éléments figurant sur l'aire de conception lorsque vous travaillez sur default.html, le cœur de votre modèle de navigation sur une seule page.
L'application PickaFlick est générée avec des images créées par un concepteur graphique. En plus d'ajouter un intérêt visuel, l'image représentant un poulet sert également de bouton sur lequel l'utilisateur clique pour démarrer l'application.
Vous pouvez ajouter des images au projet en :
utilisant la commande Ajouter un élément existant du menu Projet ;
en effectuant un copier-coller ;
déplaçant des données avec la méthode glisser-déplacer.
Pour cet exemple, vous effectuerez un copier-coller des images.
Les images suivantes sont incluses dans l'exemple de projet :
ChickenSprite
Extrait de film
Logo principal
SmallLogo-Chicken
TempBoxArt
Si vous avez téléchargé l'exemple de projet, ouvrez le dossier Assets, appuyez sur Ctrl+A, puis sur Ctrl+C.
Dans Blend, dans le panneau Projets, cliquez avec le bouton droit sur le dossier Images, puis sur Coller.
Ajoutez maintenant les images à l'aire de conception lorsque vous appliquez un style à votre application.
Vous modifiez l'apparence de votre application surtout en appliquant des styles CSS. Vous pouvez modifier vos styles à l'aide d'un éditeur de texte, mais vous pouvez les créer et les modifier plus facilement à l'aide de l'ensemble sophistiqué d'outils CSS de Blend.
Vous pouvez définir des propriétés spécifiques CSS dans Blend en :
tapant directement dans l'éditeur de code ;
recherchant la propriété à modifier dans le panneau Propriétés CSS, visuellement ou en tapant son nom dans la zone de texte Rechercher ou Définir, puis en entrant la valeur voulue de cette propriété dans l'éditeur de valeurs ;
tapant la déclaration de propriété directement dans la zone de texte Rechercher ou Définir et en utilisant la syntaxe CSS correcte. Par exemple, pour définir la propriété background-repeat sur repeat-x, tapez background-repeat: repeat-x dans la zone de texte Rechercher ou Définir, puis appuyez sur Entrée.
Vous pouvez également entrer plusieurs propriétés d'un même élément en tapant les noms de propriété et les valeurs directement dans la zone de texte Rechercher ou Définir. Utilisez la syntaxe CSS correcte et ajoutez un point-virgule (;) entre chaque définition de style. Par exemple, vous pouvez définir la propriété background-repeat sur repeat-x et position-y sur center en tapant background-repeat: repeat-x; position-y: center dans la zone de texte Rechercher ou Définir, puis en appuyant sur Entrée.
Vous pouvez réorganiser les propriétés du panneau Propriétés CSS de deux façons : par catégorie ou par nom.
Si vous réorganisez les propriétés par catégorie, les propriétés CSS semblent groupées par catégorie, les catégories étant organisées par ordre alphabétique. Si vous réorganisez les propriétés par nom, vous voyez une liste alphabétique de toutes les propriétés CSS disponibles.
Ensuite, vous allez appliquer une propriété height à homepageContainer, puis ajouter les images et leur appliquer un style.
Dans le panneau DOM en direct, cliquez avec le bouton droit sur homepageContainer et cliquez sur Créer une règle de style à partir d'un ID d'élément.
Notez que #homepageContainer apparaît désormais dans le panneau Règles de style. Un contour vert indique qu'il s'agit du style actuellement sélectionné. L'indicateur jaune sous #homepageContainer est le point d'insertion de nouveaux styles. Vous pouvez faire glisser le point d'insertion pour insérer de nouveaux styles à un emplacement différent. Dans le panneau Propriétés CSS, notez également que #homepageContainer (default.css) apparaît désormais dans la fenêtre Styles appliqués.
Dans le panneau Propriétés CSS, recherchez la propriété height en tapant height dans la zone de texte Rechercher ou Définir.
Dans l'éditeur de valeurs, pour height, tapez 100 %.
Si les propriétés sont organisées par catégorie, line-height apparaît en premier dans la liste. Si les propriétés sont organisées par nom, height apparaît en premier dans la liste.
Dans la zone de texte Rechercher ou Définir, cliquez sur le x pour effacer la sélection dans la procédure précédente.
Dans la catégorie Arrière-plan du panneau Propriétés CSS, recherchez la zone Couches, cliquez sur Ajouter , puis sur le bouton de composants d'image.
Dans la liste des sources, cliquez sur FilmStrip.png.
Définissez position-y sur center, puis définissez repeat sur repeat-x.
Dans la zone Couches, cliquez sur Ajouter , puis cliquez sur le bouton de ressource d'image.
Dans la liste des sources, cliquez sur MainLogo.png.
Notez que MainLogo.png apparaît derrière filmstrip.png.
Modifiez z-index (ordre de superposition) en cliquant sur MainLogo.png dans la zone Couches puis sur la flèche Haut pour déplacer MainLogo.png au-dessus de filmstrip.png dans la liste des images.
MainLogo.png apparaît désormais au-dessus de filmstrip.png.
Définissez position-x et position-y sur center et définissez repeat sur no-repeat.
Dans cette section, vous allez ajouter une image de poulet et y appliquer un style. L'image de poulet apparaît au centre de la page maître mais les modifications se positionnent lorsque vous pointez sur elle. Cet effet n'est pas véritablement une animation, mais une pseudo-classe hover appliquée à l'image. Par défaut, seule la moitié de l'image apparaît. Lorsque vous pointez sur l'image, la partie masquée de l'image devient visible, remplace la vue par défaut et simule une animation.
Pour positionner plus facilement l'image, vous allez créer un flexbox conteneur de disposition en modifiant la propriété display de homepageContainer. Consultez Disposition de zone flexible (« Flexbox »).
Dans le panneau DOM en direct, cliquez sur homepageContainer.
Dans le panneau Projets, ouvrez le dossier images, puis double-cliquez sur ChickenSprite.png pour ajouter l'image de poulet à l'aire de conception.
En cliquant sur homepageContainer, vous avez ajouté ChickenSprite.png en tant qu'enfant de homepageContainer. L'élément img est actif et l'image de poulet apparaît sur l'aire de conception.
Dans le panneau DOM en direct, cliquez sur homepageContainer.
Dans le panneau Propriétés CSS, recherchez la catégorie Disposition, puis cliquez sur flex dans la liste d'affichage.
Dans la catégorie Flexbox, définissez align-items et justify-content sur center.
Dans le panneau DOM en direct, cliquez avec le bouton droit sur l'élément img, cliquez sur Grouper, puis sur div ou appuyez sur Ctrl+G.
Conseil
Vous pouvez également faire glisser l'élément img sur div.
L'élément image est maintenant encapsulé dans un conteneur div.
Cliquez sur div, puis tapez spriteContainer dans la zone de texte.
Cliquez avec le bouton droit sur spriteContainer, puis cliquez sur Créer une règle de style à partir d’un ID d’élément.
Dans le panneau Propriétés CSS, définissez height sur 180px et définissez overflow-y sur hidden.
Cliquez sur img dans le panneau DOM en direct, puis tapez chickenButton dans la zone de texte.
Conseil
Développez spriteContainer si l'élément img n'est pas visible.
Dans le panneau Règles de style, à droite de default.css, cliquez sur Ajouter.
Dans le panneau Règles de style, cliquez sur .newStyle, puis tapez #chickenButton:hover pour créer un pseudo-sélecteur pour chickenButton.
Notez qu'à mesure que vous tapez, CSS IntelliSense fournit les références CSS disponibles pour faciliter le développement des règles de style.
Dans le panneau Propriétés CSS, dans la catégorie Marge, définissez margin-top sur -180px.
Appuyez sur F5 pour générer et exécuter votre application, ou appuyez sur Ctrl+I pour afficher l'application en mode interactif. Pointez sur l'image de poulet pour vérifier qu'elle change d'état. Appuyez sur Alt+F4 pour fermer l'application.
Vous êtes maintenant prêt à créer la page de détails. Pour continuer, reportez-vous à Créer votre première application Windows Store avec Blend, partie 2 : la page de détails (HTML et JavaScript).