Le Post Infeeny

Les articles des consultants et experts Infeeny

Construire une Metro Style App en HTML5 est simple et rapide ! (en tout cas c’est la promesse)

Message de Pierre-Yves Hemery (Le 15-09-2011)

Package and runtime

Une telle application se deploie avec 2 fichiers :

  • une archive .appx qui contient tous les elemets de l’appli (html, css, js + le manifest)
  • un certificat

Une fois deployee, on retrouve le contenu de l’archive dans un dossier de c:/programmes/application
Une application HTML5 s’execute dans un « app container » qui hoste le process « WWA host process ».
L’app container a moins de privileges c’est pour cela qu’il faut declarer dans le manifest de l’application ses « capabilities » (acces a la webcam, a mes documents…)

Web platform
Le WW host process est equivalent a un tab dans IE, il utilise le meme moteur html/css/js qu’un tab, et donc tous les dev HTML5 ou autres outils javascripts devraient fonctionner de la meme maniere.

Windows platform
En plus du web platfornm, il y a aussi le windows platform (gestion du mode « singlewindow », librairies de controles WinJS)

Process lyfecycle
On ne ferme jamais une application. Elle se met en pause, et s’il n’y a plus de memoire elle sera arretee par l’OS.
Du coup, il faut bien gerer la sauvegarde de l’etat de l’app pour pouvoir le restaurer et replacer l’utilisateur la ou il en etait. Pour cela, soit on utilise le sessionState winJS pour sauvegarder un dictionnaire cle/valeurs, soit le Windows.Storage.ApplicationData pour plus de donnees.
Il faut aussi faire des applications reactives, qui demarre rapidement. On n’attend pas le onLoad de la page, mais on utilise 2 autres evenements pendant le splash screen :

  • DomContentLoaded (chargement de donnees applicatives, preparation de l’UI)
  • Activated (restauration de l’etat)

Pour sauvegarder l’etat, on peut se brancher sur un evenement « checkpoint » declenche periodiquement et surtout quand l’appli est suspendue.
Note : en mode debug, VS11 garde l’app toujours active, donc il y a une option Trigger Suspend dans le menu Debug
WinJS propose tout une libairie de controle pour un rendu Metro basee sur les API Windows. C’est la methode WinJS.UI.processAll() qui permet de parser le HTML pour generer le rendu Metro (list, appbar, bouton…) a partir des attributs supplementaires.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :