Windows Metro – Les templates pour application JavaScript (Grid, Navigation, Split, …)

Après une petite introduction au développement Windows Metro en HTML5, on commence à rentrer dans le vif du sujet. Cet article assume que vous avez installé Windows 8 dans une machine virtuelle avec Visual Studio 11 Express Beta:

http://html5-tutorial.fr/installation-de-windows-8-consumer-preview-sur-vmware-workstation-8/

A la création d’un nouveau projet de type « JavaScript > Windows Metro Style », Visual Studio vous propose plusieurs templates, installés par défaut:

Pour les développeurs Flex, cela devrait vous rappeler les templates disponibles pour AIR Mobile :). Ces templates sont ceux fournis par Microsoft, mais visiblement, il y aura la possibilité d’aller chercher les siens ou d’aller en cherche online.

Un template est une structure de fichiers pour vous aider à bien démarrer. Un template contient ce qu’il faut pour démarrer une application avec parfois de fausses données pour montrer l’interface résultante. Suivant le type d’application que vous allez préparer, vous allez gagner du temps en choisissant le bon template.

Fichiers communs à tous les templates

Peu importe le template que vous allez choisir, une application Windows Metro a une structure de base à respecter. Vous aurez notamment les fichiers:

  • default.html, la page d’accueil de l’applicaiton
  • default.js qui permet de scripter l’application au démarrage
  • default.css pour les styles de l’application.
  • package.appxmanifest qui décrit le package d’application pour Windows (un peu comme le fichier *-app.xml pour Adobe AIR).
  • Les logos / splashscreens nécessaires pour une application Metro
Le fichier default.html référence aussi la feuille de style de base (plusieurs styles sont disponibles).

Le template « Blank Application »

Le template le plus minimaliste. Celui-ci est une application qui pouvoir être exécutée mais sans aucun composant graphique et sans aucune donnée. Vous aurez simplement un texte sur fond noir.

Le template Blank contient uniquement les fichiers communs à tous les templates

Le template « Navigation Application »

Voilà un template plus intéressant. En effet, celui-ci intègre directement un mécanisme de navigation dans les « pages » de votre application. Une « page » est un écran dans le vocabulaire Metro. De base, il contient un « navigator », dans lequel les pages vont venir se placer.

Le template contient une page « homePage.html » qui sera votre premier écran. A vous de rajouter des pages par la suite et de gérer le lancement de chaque page suivant les actions utilisateur.

Le plus intéressant ici est le fichier navigator.js intégré à la page default.html. C’est lui qui contient la logique de navigation, à travers l’objet WinJS.Navigation.

D’autres templates comme Grid ou Split sont basés sur Navigation Application.

Le template « Grid Application »

Le template Grid est déjà plus complexe et contient déjà des composants graphiques ainsi que des données de test. Il présente une page d’accueil ressemblant au menu démarrer de l’interface Metro avec des éléments disposés en groupe. Chaque élément est représenté par une « tuile », c’est la philosophie de l’interface Metro. A la sélection d’un élément, une nouvelle page est ouverte avec le détail de l’élément.

Le template Grid est basé sur le template « Navigation Application » et ajoute simplement des pages d’exemple (groupedItemsPage.html, groupDetailPage, itemDetailPage).

Le template « Split Application »

Un autre template basé sur Navigation Application. Celui-ci présente en page d’accueil, la page « itemsPage.html », contenant une liste de groupe d’éléments rassemblés en grille.

Lors du choix d’un groupe d’éléments, l’utilisateur navigue vers la page « splitPage.html » contenant une interface en 2 parties, séparées verticalement. La partie de gauche contient le détail du groupe et la partie de droite contient le détail de l’élément sélectionné dans ce groupe.

Ce genre de template est adapté pour créer une application lecteur de flux RSS par exemple. Sur la page d’accueil, on aurait la liste des flux disponibles et en cliquant sur un flux, on aurait la liste des derniers articles sur la gauche et le détail de l’article sur la droite.

Le template « Fixed Layout Application »

Le template Fixed Layout est quasiment identique au template Blank. La seule différence est que le contenu est destiné à une fenêtre aux dimensions fixes. Ce template est recommandé pour les jeux créés en JavaScript.

La taille d’une application à disposition fixe est ajustée pour s’adapter à la zone d’affichage. Le modèle utilise un contrôle ViewBox pour l’ajustement. Par exemple, si vous choisissez une résolution de 768 x 1024 pour votre application, mais que le périphérique exécutant l’application ne dispose pas d’une zone d’affichage de 768 x 1024, l’affichage de l’application est agrandi ou rétréci pour garantir que sa fenêtre d’affichage à disposition fixe soit visible par l’utilisateur

29 réflexions au sujet de « Windows Metro – Les templates pour application JavaScript (Grid, Navigation, Split, …) »

  1. Ping : Windows Metro – Cycle de vie d’une application | HTML5 Tutorial

  2. Ping : Windows Metro – Modèle de navigation | HTML5 Tutorial

  3. ancillon

    Bonjour,
    Je ne sais ce que vous en pensez, mais c’est vraiment plein d’interdictions, si c’est pour mettre des images statiques plutôt que de créer des elements dynamiques exemple dans une boucle pour chaque image :
    ResultComment = « \ »  »
    contentDiv.innerHTML = ResultComment;
    Interdit de créer des éléments par jquery ou innerHTML ?
    Merci pour toute information pouvant me mettre sur la bonne piste.
    Meilleures salutations.

    Répondre
  4. admin Auteur de l’article

    Bonjour,
    Il n’est pas interdit de créer du contenu HTML, il y a juste des protections quand on fait un innerHTML sur un contenu venant de l’extérieur. En effet, cela pourrait permettre de faire de l’injection de code. Dans le cas de contenu HTML venant d’un appel XHR par exemple, il faut passer ce contenu dans la fonction window.toStaticHTML(…) qui va empêcher les injections:
    http://msdn.microsoft.com/en-us/library/ie/cc848922(v=vs.85).aspx
    http://stackoverflow.com/questions/10859523/using-jquery-with-windows-8-metro-javascript-app-causes-security-error

    Fabien

    Répondre
  5. ancillon

    Bonjour,
    J’ai créé une première application qui reprend les thèmes traités sur mon site les grandes familles, comment puis-je la soumettre en test ?
    Cette application a été crée avec le template Grid, elle est pilotée par .js qui permettrait à l’utilisateur d’adapter l’application à sa convenance.
    Apres bien des essais infructueux soit par Jquery ou autre procédé je ne suis pas arrivé à lire des données externes et les passer en paramètre pour traitement exemple un nom de dossier qui pourtant s’affichait en msg.. ?
    Je vais pouvoir blogger cela.
    En 2003 j’avais développé une appli. html sous XP et IE pour les personnages Microsoft : Genie, Merlin, Robot et Peedy qui a été abandonné depuis.
    Merci pour votre aide.
    Meilleures salutations.

    Répondre
  6. ancillon

    Bonjour,
    Lorsque un utilisateur installe une application Windows 8 « metro » a t-il accès au dossier images de l’application pour y stocker ces photos et textes, j’autorise l’utilisateur à choisir les dossiers dans lesquelles se trouveront les informations le concernant, mais est-ce possible ?
    Ou faut-il toujours partir de la bibliothèque images de l’user ?
    Je vous remercie.
    Meilleures salutations.

    Répondre
    1. ancillon

      Merci, mais je viens d’échouer au Windows cert kit, il parle de fichiers js et html pas correctement codé en UTF-8, je les ré-encode et sauvegarde à nouveau, repasse le test c’est la même erreur.
      Puis bien d’autres anomalies que je ne saurais corriger.
      Là s’arrête mon rêve.
      Salutations.

      Répondre
    1. ancillon

      Bonjour,
      En effet il n’y a plus d’erreur UTF-8 mais les autres erreurs je ne sais pas les corriger, je ne comprends pas leur signification ?
      Meilleures salutations.

      Répondre
    1. ancillon

      Je commence à comprendre comment exploiter le fichier résultant :

      Je ne sais pas Désinstaller le package et réinstaller normalement
      Il y a ces nombreuses lignes mais je ne sais pas si c’est des erreurs par exemple :

      Répondre
    1. ancillon

      Voici les 2 erreurs Fail :
      1:
      Erreur d’application : L’interruption de l’application App n’a pas été détectée. Il est possible que l’interruption de l’application ait échoué. Veuillez effectuer de nouveau le test et évitez d’interagir avec l’application pendant l’exécution de tests.
      2:
      Ce package a été déployé en mode développement ou création. Désinstallez le package et réinstallez-le normalement.
      Je ne sais corriger aucune de ces erreurs ?

      Répondre
  7. admin Auteur de l’article

    Pour la 1ère, tu as touché à l’application pendant les tests ? Sinon, cela veut dire que Windows 8 n’a pas réussi à fermer l’application tout seul (force quit)

    Pour la 2ème, c’est simple en fait mais pas évident avec les explications. En fait, il nefaut pas lancer le certification kit sur une application que tu as lancé avec Visual Studio.
    Il faut faire Store > Create App Packages > For store? No. Ca va te créer un AppPackage dans le dossier de ton application tu vas dedans, il y aura un script PowerShell. Tu fais click droit Executer avec PowerShell, quelque chose comme ça. Ca va lancer l’installation de l’AppPackage sur ton poste. Après tu pourras relancer le certif kit.

    Je vais faire un article dessus je pense

    Répondre
    1. ancillon

      Après avoir galéré je n’ai plus que cette erreur :

      Erreur d’application : L’interruption de l’application App n’a pas été détectée. Il est possible que l’interruption de l’application ait échoué. Veuillez effectuer de nouveau le test et évitez d’interagir avec l’application pendant l’exécution de tests.

      Alors que je ne touche à rien pendant le déroulement de la validation.

      Répondre
  8. ancillon

    Bonsoir,
    Mon appli est validée comment peut-on la transmettre, l’option ne m’a pas été proposée ?
    Pardonnez-moi ces questions mais tout ce protocole reste très obscure, on n’a pas fait plus simple, s’il croit attirer des développeurs avec autant d’obstacles à surmonter, mais moi j’ai été depuis 1967 un galérien de l »informatique, il en faut un peu plus pour me décourager.
    Bonne soirée.

    Répondre
  9. ancillon

    Bonjour, J’ai pu hier envoyer mon application, qu’elle galère car maintenant il faut remplir un bordereau fiscal, cela fait trois fois que je le remplis et qu’il est refusé, pourquoi tant de complications ? Je suis un individu donc c’est de faire un prélèvement à la source.
    Salutations.
    Merci pour votre aide.

    Répondre
  10. ancillon

    Bonjour,

    Mon application Windows 8 est En cours de certification comment en proposer une nouvelle version internationalisée ?

    Je vous remercie.

    Meilleures salutations.

    Répondre
    1. ancillon

      Bonjour,
      Merci pour l’info. c’est en effet ce genre de fonctionnalité que je recherchais, j’ai tout de suite utilisé celle-ci sous cette forme:

      var el = document.getElementById(‘header’);
      var res = WinJS.Resources.getString(mes_sys[e][FR]);//ma table des messages systèmes
      var message_affiche = res.value;

      et tout baigne.

      J’essaye d’utiliser translate.google.com pour la traduction automatique du texte de mes pages.

      Affaire à suivre.

      Merci et Bon dimanche.

      Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *