Définition de dispositions et d’affichages (HTML)
[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Il est possible de créer des applications Windows Runtime offrant aux utilisateurs une expérience fluide et harmonieuse dans divers formats, tailles d’écran et états d’affichage via une gestion cohérente et prévisible de l’interface utilisateur. Vous souhaitez que votre application conserve son apparence de qualité, que ce soit sur un téléphone, une tablette ou un grand écran HD, quand l’utilisateur passe en affichage portrait et redimensionne l’application. Si vous planifiez les appareils et vues que les utilisateurs sont susceptibles de choisir, vous pouvez faire en sorte que votre interface s’adapte de façon élégante en fonction du choix de l’utilisateur.
.png "Vues en mode Paysage plein écran, Portrait plein écran et redimensionnées avec une largeur étroite")
La spécification de l’interface d’une application Windows Runtime en JavaScript tourne autour de deux facteurs principaux : les vues prises en charge par l’application et les dispositions requises. Pour atteindre cet objectif, vous utilisez des feuilles CSS (Cascading Style Sheets).
CSS Vous décrivez et gérez votre interface utilisateur via un langage CSS normalisé, qui sépare le contenu de la présentation (à savoir ce qui s’affiche de son affichage). Cela permet d’offrir une expérience utilisateur cohérente, agréable et conviviale prenant en charge plusieurs appareils, formats, tailles d’écran, préférences utilisateur et états d’affichage.
Dispositions Une disposition est le mécanisme permettant à votre application d’accueillir les vues qu’elle prend en charge. Vous attribuez un style, une structure et une présentation au contenu de votre application via des modules de disposition CSS3 (Cascading Style Sheets de niveau 3) tels que des grilles, des colonnes multiples, des régions et des boîtes flexibles s’adaptant à la façon dont l’utilisateur choisit d’afficher le contenu.
Vous pouvez associer des seuils sémantiques à une application intégrant la fonctionnalité de zoom sémantique où, selon la granularité et la quantité d’informations présentées, l’interface utilisateur peut basculer entre une disposition en grille et une disposition linéaire.
Vues Une vue correspond à la façon dont l’utilisateur accède au contenu de l’application et le manipule.
- Orientations paysage et portrait
- Plein écran ou redimensionnée
- Surface d’interface redimensionnée ou mise à l’échelle, avec possibilité de mouvement panoramique ou de zoom
- Éléments d’interface spécifiques, tels que les volets de résultats de recherche ou les structures de dossiers
Une connaissance des langages HTML, JavaScript et CSS est nécessaire pour définir des dispositions et des vues relatives à une application Windows Runtime.
Dans cette section
| Rubrique | Description |
|---|---|
Démarrage rapide : définition des dispositions d’application |
Vous pouvez définir des dispositions d’application pour n’importe quelle taille ou orientation de fenêtre. |
Démarrage rapide : conception d’applications pour différentes tailles de fenêtres |
Quand vous concevez une application pour qu’elle ait un aspect agréable et qu’elle fonctionne correctement quelle que soit la taille des fenêtres, vous devez décider si vous voulez créer d’autres dispositions pour venir en complément de la disposition horizontale en plein écran par défaut. |
Démarrage rapide : création de plusieurs fenêtres pour une application |
Vous pouvez aider les utilisateurs à accroître leur productivité en leur permettant d’afficher plusieurs fonctions indépendantes dans des fenêtres distinctes. |
Pour fournir l’interface la plus souple et adaptable qui soit aux utilisateurs de votre application Windows Runtime, vous devez d’abord choisir le mode de disposition qui convient le mieux à votre contenu, ainsi que les affichages possibles pour ce dernier. Cette rubrique décrit les fonctionnalités de disposition CSS3 (Cascading Style Sheets de niveau 3) prises en charge par les applications du Windows Store dans Windows 8. |
|
Vous pouvez utiliser le modèle de disposition décrit ici pour disposer les éléments d’interface utilisateur sur les pages de votre application. Le respect de modèles établis pour les marges, les en-têtes de page, les largeurs de gouttière et d’autres éléments de ce type maintient une unité dans les applications et aide les utilisateurs à comprendre facilement les interactions dans l’ensemble du système. |