Démarrage rapide : conception d’applications pour différentes tailles de fenêtres

Article
12/11/2015

[ 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 ]

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. Vous pouvez concevoir votre application pour prendre en charge une largeur minimale de 320 pixels au lieu de la largeur minimale par défaut de 500 pixels, et vous pouvez passer à une disposition verticale quand l’application est plus haute que large. Il s’agit là de choix de conception facultatifs.

Voir cette fonctionnalité appliquée dans notre série Fonctionnalités d’application, de A à Z: Interface utilisateur des applications du Windows Store, de A à Z

Objectif: Après avoir lu cet article, vous saurez comment remplacer la largeur minimale de 500 pixels d’une application par 320 pixels et comment modifier votre conception pour que l’application ait un aspect agréable et qu’elle fonctionne correctement à des largeurs étroites. Vous saurez également comment concevoir une application panoramique horizontale qui bascule vers une disposition verticale quand sa hauteur est supérieure à sa largeur.

Prérequis

Créer votre première application du Windows Store en JavaScript

Recommandations en matière d’expérience utilisateur pour la disposition et la mise à l’échelle

Exemple : disposition pour les fenêtres qui sont plus hautes que larges

Cet article illustre les autres options de conception pour les dispositions hautes et étroites en décrivant la façon dont elles sont implémentées dans l’exemple de disposition pour les fenêtres qui sont plus hautes que larges. Cet exemple est basé sur le modèle Application grille dans Microsoft Visual Studio.

Le modèle Application grille comporte quatre pages :

default (default.html), qui charge simplement la page groupedItems après le démarrage de l’application.
groupedItems (pages\groupItems\groupedItems.html), qui permet à l’utilisateur d’afficher les groupes et les éléments. Ce dernier peut sélectionner soit une étiquette de groupe pour naviguer vers la page de détails du groupe (groupDetail), soit un élément pour naviguer vers l’affichage en pleine page de l’élément (itemDetail).
groupDetail (pages\groupDetail\groupDetail.html), qui permet non seulement à l’utilisateur d’afficher les détails du groupe et les éléments, mais aussi de sélectionner un élément pour naviguer vers l’affichage en pleine page de l’élément (itemDetail).
itemDetail (pages\itemDetail\itemDetail.html), qui représente l’affichage en pleine page d’un élément.

Dans cet article, vous allez utiliser la disposition par défaut pour chaque page. Nous n’abordons que les modifications nécessaires du code JavaScript des pages groupDetail et groupedItems.

La technique de codage essentielle ici consiste à vérifier les modifications apportées aux propriétés offsetWidth et offsetHeight d’une page. Si l’utilisateur change la largeur de la page ou l’orientation de l’appareil, et si certaines valeurs de hauteur et de largeur sont atteintes, la page modifie la disposition et le comportement de ses contrôles.

Pour en avoir un aperçu, dans Visual Studio, créez une instance du projet Application grille du Windows Store en JavaScript, puis suivez le reste de ces instructions.

Définir la largeur minimale

Par défaut, la largeur minimale d’une application du Windows Store est de 500 pixels. La hauteur de l’application remplit toujours l’écran. La hauteur d’écran minimale d’une application est de 768 pixels.

Si votre application fonctionne correctement à des largeurs étroites, ou si le multitâche est un scénario important pour votre application et que vous voulez que les utilisateurs le conservent sur le même écran que les autres applications, vous pouvez remplacer la largeur minimale de 500 pixels par 320 pixels. Les utilisateurs peuvent ainsi redimensionner votre application de manière fluide dans toutes les tailles, entre le plein écran et une largeur de 320 pixels.

Vous modifiez la largeur minimale de l’application dans le fichier manifeste package.appxmanifest. Pour ce faire, dans Visual Studio, suivez les étapes ci-après.

Ouvrez le fichier manifeste package.appxmanifest. Le manifeste s’ouvre automatiquement dans le concepteur du manifeste.
Ouvrez l’onglet Application et recherchez le champ Largeur minimale.
Utilisez la liste déroulante pour remplacer la largeur minimale par 320 px.
Si vous ouvrez le fichier manifeste package.appxmanifest dans un éditeur de texte, l’élément ApplicationView doit s’afficher en tant qu’enfant de l’élément VisualElements. Par exemple, la nouvelle largeur minimale dans le fichier manifeste se présente comme suit.
```
<ApplicationView MinWidth="width320" /> 
```

Maintenant que votre application peut être redimensionnée jusqu’à 320 pixels, vous devez la modifier pour qu’elle soit utilisable à des largeurs étroites. Plus précisément, vous devez modifier votre application afin qu’elle utilise un mouvement panoramique vertical et non horizontal.

Définir le comportement de l’affichage des groupes et des éléments

Dans le fichier pages\groupedItems\groupedItems.js, ajoutez du code à la méthode ready de la fonction ui.Pages.define. Cette méthode est appelée après l’initialisation et le rendu de la page. Dans cette méthode, appelez la fonction _initializeLayout, que vous définirez plus tard. (Pour référence, le code que vous devez ajouter est marqué par les commentaires *** START *** et *** END ***.)
```
ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    ready: function (element, options) {
        var listView = element.querySelector(".groupeditemslist").winControl;
        listView.element.focus();
        // *** START ***
        this._initializeLayout(listView);
        // *** END ***
    },
    // ...
```

Dans le fichier groupedItems.js, ajoutez du code à la méthode updateLayout de la fonction ui.Pages.define. Cette méthode est appelée quand l’utilisateur change l’état de la disposition d’affichage de l’application, par exemple étroit, portrait et paysage. Dans cette méthode, faites référence au contrôle ListView de la page, désactivez temporairement les animations de la page, puis appelez la fonction _initializeLayout, que vous définirez plus tard.

ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.
        // *** START ***
        var listView = element.querySelector(".groupeditemslist").winControl;

        // Don't show page entrance animations when the app switches layouts.
        var handler = function (e) {
            listView.removeEventListener("contentanimating", handler, false);
            e.preventDefault;
        }
        listView.addEventListener("contentanimating", handler, false);

        this._initializeLayout(listView);
        // *** END ***
    },
    // ...

Dans le fichier groupedItems.js, ajoutez du code à la fonction ui.Pages.define pour définir la fonction _initializeLayout. Cette fonction détermine si la page est dans une disposition étroite, portrait ou paysage, puis modifie le contrôle ListView de la page en conséquence. Les méthodes ready et updateLayout appellent cette fonction. Voici ce que fait cette fonction.

Si la largeur de la page est supérieure à 320 pixels et inférieure à 500 pixels, le contrôle ListView de la page affiche les données uniquement sous forme de liste de groupes à défilement vertical. (500 pixels est un exemple de largeur. Vous pouvez déterminer la largeur à laquelle vous voulez que la disposition change. Dans cet exemple, nous avons choisi 500 pixels comme limite à laquelle l’application change de disposition. L’application utilise une disposition étroite pour toute largeur située en dessous de 500 pixels.)
Si la largeur de la page est inférieure à sa hauteur, le contrôle ListView affiche les données sous forme de liste de groupes d’éléments à défilement vertical.
Dans le cas contraire, le contrôle ListView affiche les données sous forme de grille de groupes d’éléments à défilement horizontal.

ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    // *** START ***
    _initializeLayout: function (listView) {
        // Narrow layout.
        if (document.documentElement.offsetWidth < 500) {
            // Show data as a vertically-scrolling list of groups only.
            listView.itemDataSource = Data.groups.dataSource;
            listView.groupDataSource = null;
            listView.layout = new ui.ListLayout();                
        }
        // Portait layout.
        else if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) {
            // Show data as as a vertically-scrolling list of groups that contain items.
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.ListLayout();                                
        }
        // Landscape layout.
        else {
            // Show data as a horizontally-scrolling grid of groups contain items.
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.GridLayout();
        }
    },
    // *** END ***
    // ...

Définir le comportement de l’affichage des détails du groupe et des détails des éléments

Dans le fichier pages\groupDetail\groupDetail.js, ajoutez du code à la méthode updateLayout de la fonction ui.Pages.define. Cette méthode est appelée chaque fois que l’utilisateur fait basculer l’application entre les dispositions portrait et paysage. Dans cette méthode, faites référence au contrôle ListView de la page, désactivez temporairement les animations de la page, puis appelez la fonction _initializeLayout, que vous définirez plus tard. Faites également défiler le contrôle ListView afin que le premier élément visible soit l’élément approprié.

ui.Pages.define("/pages/groupDetail/groupDetail.html", {
    // ...
    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.
        // *** START ***
        var listView = element.querySelector(".itemslist").winControl;

        // Don't show page entrance animations when the app switches layouts.
        var handler = function (e) {
            listView.removeEventListener("contentanimating", handler, false);
            e.preventDefault();
        }
        listView.addEventListener("contentanimating", handler, false);

        var firstVisible = listView.indexOfFirstVisible;

        this._initializeLayout(listView);

        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
            listView.indexOfFirstVisible = firstVisible;
        }
        // *** END ***
    },
    // ...

Dans le fichier groupDetail.js, ajoutez du code à la fonction ui.Pages.define pour définir la fonction _initializeLayout. Cette fonction détermine si la page est dans une disposition portrait ou paysage, puis modifie le contrôle de la page en conséquence. La méthode updateLayout appelle cette fonction. Voici ce que fait cette fonction.
- Si la largeur de la page est supérieure à 320 pixels et inférieure à 500 pixels, le contrôle ListView de la page affiche les données uniquement sous forme de liste de groupes à défilement vertical. (500 pixels est un exemple de largeur. Vous pouvez déterminer la largeur à laquelle vous voulez que la disposition change. Dans cet exemple, nous avons choisi 500 pixels comme limite à laquelle l’application change de disposition. L’application utilise une disposition étroite pour toute largeur située en dessous de 500 pixels.)
- Si la largeur de la page est inférieure à sa hauteur, le contrôle ListView affiche les données sous forme de liste à défilement vertical sans afficher d’en-tête de groupe.
- Dans le cas contraire, le contrôle ListView affiche les données sous forme de grille à défilement horizontal, où l’en-tête de groupe s’affiche à gauche.
```
ui.Pages.define("/pages/groupDetail/groupDetail.html", {
    // ...
    // *** START ***
    _initializeLayout: function (listView) {
        // Portrait layout.
        if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) {
            listView.layout = new ui.ListLayout();
            var header = document.getElementsByTagName("header");
            header.item(0).style.display = "none";
        }
        // Landscape layout.
        else {
            listView.layout = new ui.GridLayout({ groupHeaderPosition: "left" });
            var header = document.getElementsByTagName("header");
            header.item(0).style.display = "inherit";
        }
    },
    // *** END ***
    // ...
```

Basculer entre les dispositions

Maintenant, vous pouvez voir à quoi ressemble la disposition de l’application quand vous changez de taille de fenêtre.

Dans Visual Studio, démarrez l’application dans le simulateur. (Pour connaître la marche à suivre, voir la rubrique relative à l’exécution d’applications du Windows Store dans le simulateur.)
Cliquez sur Mode tactile de base.
Faites glisser le haut de la page sur le côté, puis déplacez le séparateur afin que la page fasse 500 pixels de large. Les données s’affichent sous forme de liste de groupes d’éléments à défilement vertical.
Déplacez le séparateur afin que la page fasse 320 pixels de large. Les données s’affichent uniquement sous forme de liste de groupes à défilement vertical.
Cliquez sur Rotation horaire. Les données s’affichent sous forme de liste de groupes d’éléments à défilement vertical.
Faites quelques tests en appuyant sur les titres de groupes, les titres d’éléments et le bouton Précédent, ainsi qu’en changeant de largeur de page et d’orientation de l’appareil.

Récapitulatif

Vous devez maintenant savoir comment concevoir votre application pour qu’elle ait un aspect agréable et qu’elle fonctionne correctement à des largeurs étroites et dans des dispositions plus hautes que larges.

Rubriques associées

Démarrage rapide : définition de dispositions d’application