Mettre en place la vue ancrée rapidement en JavaScript et CSS3 [Partie 1]

  • Article

Dans Windows 8, les applications modernes (ou Windows Store Apps) se veulent plus immersives et sont dans ce but optimisées pour le plein écran… mais pas seulement. La vue ancrée (désignation française pour la Snapped View) est une visualisation de votre application dont la résolution est en partie figée : elle mesure précisément 320 pixels de largeur, et peut être ancrée d'un côté ou de l'autre. Elle s'étend en verticale sur toute la hauteur disponible. Enfin elle offre la possibilité de cohabiter à l'écran avec une seconde application, qui sera dans un mode dit « remplie » (Filled View en anglais).

Ce que j'aime dans la vue ancrée, c'est que le contenu de l'application s'adapte aussitôt que l'on passe de la vue plein écran à la vue ancrée et inversement. On se retrouve alors devant une autre vue de son application où tout le contenu et la disposition de ce dernier a été pensée pour cette résolution bien particulière. On peut mettre en place une nouvelle mécanique toute différente ; le défilement se fait alors verticalement, les actions importantes restent et les autres disparaissent ; c'est comme si l'application se transformait en application mobile !

Vous pourriez vous dire « C'est beau, mais pour moi développeur, c'est aussi plus de travail ! ». Mais à cela, je vous réponds : rassurez-vous les outils et les langages sont là pour vous aider ! Comme nous le verrons, CSS et JavaScript permettent de réaliser la vue ancrée de votre application très facilement à partir de la vue plein-écran, et Blend sera l'outil indispensable pour tester le desing de votre application dans tous ces états !

CSS3 et les Media Queries

CSS for dummies

Si vous connaissez bien le modèle de développement C# / XAML, que ça soit par le biais de WPF, de Silverlight ou des apps Windows 8, le layout d'une page en HTML/CSS peut vous paraître pour le moins étrange. Habituellement en XAML, on utilise différent contrôles  "conteneurs" pour contenir les contrôles (ou d'autres conteneurs). Par exemple : Grid, StackPanel, WrapPanel, etc.

En HTML, on utilise des balises telles que div, section, article, etc. pour contenir les autres éléments. C'est ensuite dans la feuille de style CSS que l'on définit si le conteneur dispose les éléments enfants en les empilant horizontalement ou verticalement, ou en utilisant une grille, etc.

Une feuille CSS est donc un fichier contenant une liste de règles qui définissent les propriétés graphiques et de layout des éléments de la page HTML. Une règle peut cibler certains éléments à l'aide de sélecteurs :

  • Un élément spécifique : on donne un identifiant unique au contrôle et on peut appliquer un style en passant cet identifiant.
  • Une classe CSS : on donne un nom de classe à plusieurs éléments pour leur appliquer des propriétés communes.
  • On peut également chainer les sélecteurs pour cibler certains éléments bien spécifiques (ex : le premier article de chaque section)

Les Media Queries au service de la vue ancrée

Cela devient intéressant lorsque l'on précise que certaines règles ne sont appliquées que dans certaines conditions. Ces conditions peuvent être un certain type de média (un écran, une télé, une imprimante, etc.) ou une certaine taille d'écran par exemple. Ce sont ces ensembles de règles qui se basent sur une condition pour s'appliquer ou non qui sont appelées media queries. Windows 8 ajoute l'état courant de la vue (snapped, fill, fullscreen-portrait, fullscreen-landscape) comme un nouveau critère utilisable dans une media query. Dans l'exemple suivant on change la couleur du fond de la vue selon qu'on est en vue ancrée ou en vue plein écran / remplie :

 @media screen and (-ms-view-state: filled), (-ms-view-state: fullscreen-landscape) { 
 body { 
   background-color: red; 
 } 
} 
 
@media screen and (-ms-view-state: snapped) { 
 body { 
   background-color: green; 
 } 
}

Concevoir une vue ancrée pour une application existante

Prenons un exemple plus concret : disons que je suis en train de concevoir une application pour gérer ma collection de jeux vidéo. J'ai d'abord développé une page qui affiche les différentes catégories de jeux, puis un écran pour détailler chaque catégorie et en afficher la liste des jeux. Les éléments qui me permettent d'ouvrir une catégorie sont des balises div que j'ai mis dans un autre div. J'ai ensuite créé la feuille de style de la page et ai défini que la balise parente utiliserai une flexbox à défilement horizontal pour afficher ses enfants.

Le problème c'est je n'ai rien fait pour que cette page soit compatible avec la vue ancrée ; par conséquent, si on met mon application en mode snapped, on voit exactement la même chose, sauf que la fenêtre est coupée à 320 px.

Pour remédier à ce problème, je vais copier les règles CSS qui s'appliquent à la balise parente, et aux enfants dans une media query qui s'exécutera dans le cas d'un mode snapped :

 @media screen and (-ms-view-state: snapped) {
 .itemspage .itemslist { 
   padding-left: 20px; 
   width: calc(100% - 20px); 
   -ms-flex-direction: column; 
   overflow-y: auto; 
   overflow-x: hidden; 
 }
 
 .itemspage .gamecategory-item { 
   height: 200px; 
   margin-bottom: 10px; 
 }

.itemspage .gamecategory-item-title { 
   font-size: 32pt; 
 }
}

Comme j'utilise une flexbox pour afficher les éléments à l'intérieur du div parent, je peux changer dans le cas d'une vue ancrée la direction de la flexbox. En mettant column à la place de row et en changeant la taille des éléments enfants, on obtient déjà un résultat bien plus probant quand on est dans la vue ancrée !

- Sébastien Mornas -