none
Visual Studio et les applications de style Metro en utilisant JavaScript

All replies

  • Le modèle de projet Grid Application a plusieurs dossiers :

     

    1. References – les références nécessaire
    2. css – les fichiers CSS sont utiles pour donner à votre application les caractéristiques spécifiques a Windows 8.
    3. html – les fichiers HTML représentent un ensemble de pages qui seront chargées dynamiquement dans default.html.
    4. images – les images utilisées dans notre application.
    5. js – les fichiers JavaScript
    6. winjs – les fichiers JavaScript pour la libraire défaut utilisée pour créer une application de style Metro en utilisant JavaScript. Cette librairie est appelée WinJS (The Windows Library for JavaScript) et contient toutes les librairies et contrôles essentiaux qui ne sont pas inclus dans HTML5 standard.

    JavaScript Metro Style project folders

     

    Le projet contient aussi le fichier package.appxmanifest où on trouve des informations concernant notre application (ses capacités et comment l’application est représentée à l'utilisateur dans shell, par exemple).


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    Thursday, March 01, 2012 11:42 AM
  • Le fichier default.htmlreprésente le point de départ de votre application. Si on analyse son contenu on observera plusieurs aspects importants :


    JavaScript Metro style default.html

     

    1. Les librairies WinJS sont inclues dans ce fichier pour pouvoir créer des applications de style Metro:

      <script src="/winjs/js/base.js"></script>
      <
      script src="/winjs/js/ui.js"></script>
      <
      script src="/winjs/js/binding.js"></script>
      <
      script src="/winjs/js/controls.js"></script>
      <
      script src="/winjs/js/animations.js"></script>
      <
      script src="/winjs/js/uicollections.js"></script>
      <script src="/winjs/js/wwaapp.js"></script>
      <script src="/winjs/js/res.js"></script>
    • base.js - définit les fonctions de base pour les promesses, les espaces de noms et les autres fonctions utilitaires de base comme la recherche d'éléments dans votre application (comme vous trouveriez dans jQuery).
    • ui.js -définit les fonctions d'assistance prenant en charge les contrôles d'interface utilisateur dans votre application. Utilisez ui.js pour les contrôles ajoutés à votre application JavaScript ainsi que HTML Fragment loader que nous le verrons plus tard
    • binding.js - définit les fonctions de liaison de données. Ces fonctions permettent aux contrôles tels que ListView d'être lié aux tableaux que vous remplir avec les données et lorsque vous ajoutez des éléments a ce tableau, le contrôle ListView les montre aux utilisateurs.
    • controls.js - définit les contrôles d'interface utilisateur principaux tels que le contrôle Ratings et le contrôle DatePicker.
    •  animations.js- définit les fonctions de Personality Visual Library (PVL) qui permettent aux contrôles ainsi qu’a vos éléments d'interface utilisateur à déplacer selon les directives de Windows 8 UX.
    • uicollections.js - définit des contrôles comme Flipper pour montrer du contenu comme dans les pages d’un magazine et qui s’animent avec des touches.
    • wwaapp.js - définit les fonctions pour gérer la navigation et les événements de composants de système comme Process Lifetime Manager (PLM) pour votre application
    • res.js – offre des fonctions pour gérer des ressources comme la localisation.

     

    1. On observe aussi un référence vers default.css(le fichier où vous ajouterez à la plupart de vos styles et qui contient quelques styles pour vous permettre de démarrer avec le modèle de l'application)

     

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



    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    Thursday, March 01, 2012 11:45 AM
  • Visual Studio offre plusieurs options pour exécuter votre application : vous pouvez utiliser un simulateur ou la machine locale. On va utiliser la deuxième option (vous pouvez aussi utiliser F5 pour lancer l’application) :

     

                Visual Studio 11 Debug

     

    L’application sera lancée en plein écran :

    Mais, qu’est-ce qu’il se passe exactement quand on lance l’application? On peut s’imaginer que la page default.html est ouverte en plein écran dans IE. De point de vue conceptuel c’est vrai : IE a rendu default.html, mais IE est hébergé dans un processus complètement différent que ce que vous êtes habitué. Plus précis, IE est hébergé en WWAHost.exe qui s'exécute dans un processus spécial appelé app container.

     

    App container est créé en enregistrant le package AppX qui représente votre application, pratiquement c’est équivalent a installer l'application sur le système avant qu’elle fonctionne.


    Thursday, March 01, 2012 11:48 AM
  • Si on clique sur une tile on voit que la page change selon la sélection :




     

    Cliquez sur la flèche retour pour retourner à la page principale avec une animation de transition, qui fait partie de la magie des animations PVL dans animations.jsque nous avons déjà discuté.

     

    Puis, notez qu’on n’a pas un buttons pour fermer l’application. C'est un exemple de la fenêtre plein écran dans Windows 8, qui est en fait une fenêtre qui n'a aucune « chrome ». Vous pouvez utiliser Alt-Tab pour revenir en Visual Studio. Cliquez sur l'icône « Arrêter le débogage ».
    Visual Studio 11 Stop Debugging


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    Thursday, March 01, 2012 11:52 AM
  • Avant faire quelques modification, il faut analyser un peu le fichier landingPage.js : on a du code qui gère l’évènement ‘fragmentappended’et qui appelle la fonction fragmentLoad. On verra dans les autres sections de ce tuto que les fragments sont très importants pour notre application.

     

    Pour changer un peu l’interface on va modifier la fonction getGroups()dans le fichier landingpage.js. Modifiez le titre ‘Collection title lorem’a ‘My Collection’. Placez le curseur on sur groups.pushet appuyez F9  pour avoir un point d’arrêt à cette ligne :

     Visual Studio 11 BreakPoint

     

     

    Exécutez l’application en appuyant sur F5 et l’exécution va s’arrêter au point d’arrêt défini. Vous pouvez vous familiariser avec le débogueur. Pour continuer l’exécution et voir la modification supprimez le point d’arrêt et appuyez sur F5.


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    Thursday, March 01, 2012 11:53 AM