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 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
Ping : Windows Metro – Cycle de vie d’une application | HTML5 Tutorial
Ping : Windows Metro – Modèle de navigation | HTML5 Tutorial
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.
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
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.
Salut,
Pour pouvoir publier son application sur le store, il faut participer à un « accélérateur Windows 8 » avec des devs MS qui t’aident. Plus d’infos, ici:
http://msdn.microsoft.com/fr-fr/windows/accelerateur-windows-8.aspx
Fabien
Bonjour,
Merci pour l’information.
Je me suis inscrit, sans beaucoup de réaction.
Salutations.
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.
Salut,
Tu as accès aux dossiers « local » et « roaming » de l’application pour pouvoir y stocker ce que tu souhaites.
Plus d’infos ici:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465118.aspx
Fabien
Bonjour,
Je présente mon application sur ce blog en cours de réalisation, vous pourrez y voir les copies d’écran.
http://jpa-win8-apps.blogspot.fr/
Je vous remercie d’avoir apporté un certain nombre de pierres à l’édifice.
Meilleures salutations.
Excellent, ça fait plaisir :D
Fabien
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.
C’est bizarre, tu es sûr que tu as bien réinstallé le package avant de repasser le certification kit?
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.
Quelle est l’autre erreur ?
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 :
Le XML fonctionne pas dans les commentaires, désolé
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 ?
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
Pour la première erreur je n’ai touché à rien.
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.
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.
Salut,
Si au lieu de dire non, quand tu fais un Create App Package, tu dis oui, on va te demander de te connecter à ton compte Microsoft. A la fin de la création du package, il y a un lien vers le site
https://appdev.microsoft.com/StorePortals/fr-FR/Home/Index
pour uploader ton package
Fabien
Merci, pour votre réponse, c’est ce que je n’osais pas faire.
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.
Bonjour,
Mon application Windows 8 est En cours de certification comment en proposer une nouvelle version internationalisée ?
Je vous remercie.
Meilleures salutations.
salut,
Les articles de cette catégorie devraient t’intéresser:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465248.aspx
Fabien
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.
Bonjour, Les solutions de traduction Bing ou Google, à intégrer aux sites, sont payantes.
Donc je traduirais mes pages moi même via Google.
Salutations.