Pour pouvoir faire partie du Windows Store, votre application doit correctement supportés les différents états d’affichage d’une application Windows 8 Metro. Microsoft précise bien que votre application doit toujours être utilisable dans tous les modes d’affichage, il vous faudra donc adapter le contenu de votre page à sa nouvelle disposition.
Les différents états d’affichage
Full screen
L’état « classique », dans lequel votre application prend 100% de la place disponible:
Snap
Voici un état spécifique à Windows 8. En effet, Win8 vous permet d’afficher deux applications à la fois (ce qui n’est pas possible sur iOS/Android). Pour cela, une application est « snapped » sur le bord de l’écran, un peu comme dans Windows 7 quand vous déplacez une fenêtre vers un bord de l’écran. Dans ce mode, une application prend 1/3 de l’écran et l’autre les 2/3. Le mode réduit (1/3) est nommé « snap »:
Filled
L’état « Filled » est l’état complémentaire de « snap », cela signifie que votre application prend une majorité de l’écran mais une autre application est affichée en mode snap:
Bien sûr, le matériel gère aussi l’orientation portrait / paysage. Un petit schéma récapitulatif:
Passage en mode fill / snap et bords réactifs
Lorsque votre application est lancée, elle ne prend pas 100% de l’écran, Windows réserve un espace d’un pixel tout autour de l’application. Grâce à cette bordure, Windows peut détecter l’utilisation des bords réactifs.
Si vous avez déjà manipulé une tablette BlackBerry Playbook, vous connaissez déjà ce système de « edge gestures ». Pour éviter d’ajouter une multitude de boutons sur les tablettes, les bords de la tablette sont réactifs. Ainsi, si vous déplacez votre doigt depuis l’extérieur de la tablette (bord plastique) vers l’intérieur de celle-ci (écran), Windows va considérer cela comme une interaction utilisateur.
Pour gérer le multi-tâche sur une tablette W8, il suffit de faire des « edge gestures » sur les bords gauche et droits. Ces 2 bords sont réservés par le système Windows, vous ne pouvez pas les utiliser dans votre application ni supprimer le comportement par défaut. Le bord gauche sert à faire défiler les applications (une sorte de Alt+Tab) et le bord droit sert à faire apparaître le menu Windows (start menu, settings, search, …). Petite explication vidéo, qui montre comment snapper les vues (@5:20):
Vous pouvez voir que les applications snappées adaptent leur contenu à la place disponible. Par exemple, l’application météo va simplement afficher un widget météo car elle n’a plus qu’un tiers de l’écran qui lui est réservée.
Notez que vous pourrez utiliser les edge swipe depuis le haut et le bas de l’écran, car ces derniers servent à manipuler l’application courante. Un swipe depuis la bas va par exemple afficher le composant « app bar » que votre application va personnaliser. C’est dans cette « app bar » que vont se retrouver toutes les options de votre applications, un peu comme le menu sous Android.
Liens utiles
On verra plus tard comment on va gérer les changements d’état d’affichage de notre application. On pourra faire cela avec des media queries CSS ou du JavaScript. En attendant, voici quelques liens: