Concevoir votre première application Windows Store (HTML)

Ce didacticiel vous aidera à vous familiariser avec les tâches de conception HTML les plus fondamentales de Blend for Visual Studio 2012. À la fin de ce didacticiel, vous aurez créé une version simplifiée et dynamique du jeu de mémoire plus connu sous le nom de « Concentration ».

Pour aller jusqu'au bout du didacticiel, téléchargez l’exemple de projet de jeu de mémoire HTML à partir de la galerie d'exemples d'applications du Windows Store. Ce projet est le point de départ pour suivre ce didacticiel et inclut tous les fichiers, y compris toutes les images, nécessaires pour créer l'application.

Lorsque vous avez téléchargé l'exemple de projet de jeu de mémoire HTML, récupérez les fichiers sur votre ordinateur, par exemple dans \My Documents\Visual Studio 2012\Projects\. Une fois que les fichiers sont extraits, vous êtes prêt à ouvrir le projet.

Pour ouvrir un projet existant

  1. Dans le menu Fichier, cliquez sur Ouvrir un projet/une solution.

  2. Dans la boîte de dialogue Ouvrir un projet, accédez à l'emplacement où vous avez extrait les fichiers projet et recherchez le fichier solution (memory.sln) dans votre dossier de projet ou dans l'un des sous-dossiers de projet. Cliquez sur OK.

    Conseil Conseil

    Vous pouvez également ouvrir un projet en cliquant avec le bouton droit sur le fichier projet (.jsproj) dans l'Explorateur de fichiers et en pointant sur Ouvrir avec, puis en sélectionnant Blend.

JJ129451.collapse_all(fr-fr,VS.110).gifDossier du projet

Si vous examinez le panneau Projets, vous apercevez les fichiers et dossiers par défaut générés automatiquement lorsque vous créez un projet.

Conseil Conseil

Si le panneau Projets n'est pas visible, dans le menu Fenêtre, cliquez sur Projets.

  • Références Contient les bibliothèques CSS et Windows en lecture seule pour JavaScript.

  • CSS Contient tous les fichiers CSS personnalisés utilisés par votre application.

  • images Contient les ressources image pour votre application.

  • js Contient vos fichiers JavaScript personnalisés.

  • default.html Page de démarrage par défaut de votre application.

  • package.appxmanifest Répertorie votre application et ses ressources. Ce fichier définit également la page de démarrage de votre application.

Ouvrir le projet en mémoire

JJ129451.collapse_all(fr-fr,VS.110).gifFichiers sources

Dans le panneau Projets, en plus des fichiers et des dossiers par défaut, vous consulterez également les fichiers sources du projet. Il s'agit notamment des fichiers suivants :

  • Images Dossier photos qui inclut les images sources du jeu.

  • Structure sémantique définie dans le code HTML Le fichier HTML fournit le modèle DOM (Document Object Model) ainsi que des ID et des noms de classe. Par défaut, default.html s'ouvre en mode Fractionné. Vous pouvez afficher le code default.html en cliquant sur Code Icône du mode Code ou sur le mode Fractionné Bouton Mode Fractionné.

    Remarque Remarque

    Si le fichier default.html n'est pas visible dans l'aire de conception, double-cliquez sur default.html dans le dossier Projets.

  • Logique de jeu en JavaScript Le code JavaScript fournit des fonctions de jeu. Le script crée aussi dynamiquement des ID et des classes. Pour afficher le code JavaScript du jeu, dans le dossier Projets, développez le dossier js, puis double-cliquez sur default.js pour ouvrir le fichier.

Outre les fichiers sources, le développeur a également remis les Notes du développeur (HTML), avec des détails sur le code et des suggestions sur la manière d'appliquer un style aux éléments du jeu.

Conseil Conseil

Il est conseillé d'enregistrer votre projet au cours de la procédure. Pour enregistrer le document actif, dans le menu Fichier, cliquez sur Enregistrer ou appuyez sur Ctrl+S.

Si plusieurs fichiers threads ont changé, vous pouvez enregistrer toutes les modifications en cliquant sur Enregistrer tout dans le menu Fichier ou en appuyant sur Maj+Ctrl+S.

Un astérisque sous l'onglet de document indique qu'un fichier a été modifié. Si les fichiers threads ont changé, un astérisque apparaît sur chaque onglet.

Étape suivante : Appliquer un style à l'application.

Afficher:
© 2014 Microsoft