Démarrage rapide : création de plusieurs fenêtres pour une application (HTML)

  • Article

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

Vous pouvez aider les utilisateurs à accroître leur productivité en leur permettant d’afficher plusieurs fonctions indépendantes dans des fenêtres distinctes. Les utilisateurs peuvent rapidement basculer d’une partie de l’application dans une fenêtre à une autre partie de l’application dans une autre fenêtre. Ils peuvent également comparer le contenu de plusieurs fenêtres côte à côte, par exemple pour afficher deux documents différents en même temps ou pour afficher le tableau de classement d’un jeu et le déroulement du jeu dans des fenêtres séparées. L’application de messagerie permet à l’utilisateur d’ouvrir un message dans une nouvelle fenêtre. L’utilisateur peut composer un nouveau message tout en consultant un message dans la Boîte de réception à l’aide de plusieurs fenêtres.

Si vous créez plusieurs fenêtres pour une application, chacune d’elles se comporte de manière indépendante. La liste des applications utilisées récemment répertorie chaque fenêtre séparément. Les utilisateurs peuvent déplacer, redimensionner, afficher et masquer des fenêtres d’application indépendamment et ils peuvent basculer d’une fenêtre à une autre comme s’il s’agissait d’applications distinctes. Chaque fenêtre opère dans son propre thread et contexte d’exécution.

Application de messagerie avec deux fenêtres ouvertes

Ce guide de démarrage rapide vous montre comment :

  • créer une fenêtre pour votre application ;

  • ajouter du contenu à la nouvelle fenêtre ;

  • afficher la nouvelle fenêtre ;

  • basculer d’une fenêtre à une autre ;

  • fermer une fenêtre quand elle disparaît de la liste des applications utilisées récemment.

Il s’agit de la version JavaScript de ce guide de démarrage rapide. Pour obtenir la version C# en XAML, voir Démarrage rapide : création de plusieurs fenêtres pour une application (XAML).

Il ne faut pas confondre la création de plusieurs fenêtres pour une application et la projection d’une fenêtre distincte de votre application sur un autre écran à des fins d’affichage uniquement, et non pour interaction. Pour plus d’informations sur la projection d’une fenêtre, voir Recommandations en matière de gestionnaire de projection.

Prérequis

Créer la page secondaire

  1. Dans l’Explorateur de solutions, ouvrez le menu contextuel du nœud de projet, puis choisissez Ajouter > Nouvel élément.
  2. Dans la boîte de dialogue Ajouter un nouvel élément, choisissez Contrôle de page dans le volet du milieu.
  3. Dans la zone Nom, entrez un nom pour votre page, tel que secondaryView, puis choisissez le bouton Ajouter.
  4. Ajoutez les éléments d’interface utilisateur et la fonctionnalité souhaités à votre page secondaire. Pour plus d’informations, voir Disposition de votre interface utilisateur et Recommandations en matière de fenêtres multiples.

Créer une vue

Créez un thread et une fenêtre sur ce thread en appelant MSApp.createNewView. L’association d’un thread et d’une fenêtre porte le nom de « vue ». Les autres objets que vous créez dans cette vue, tels que les éléments d’interface utilisateur, sont liés à ce thread.

La première vue créée lors du démarrage de votre application s’appelle la vue principale. Si la fenêtre de la vue principale est fermée, l’application se termine.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");

Ce code charge automatiquement la page spécifiée, secondaryView, dans la nouvelle fenêtre.

Chaque fenêtre opérant dans son propre contexte d’exécution, une fenêtre secondaire peut communiquer avec la fenêtre principale uniquement à l’aide de postMessage ou de fichiers et paramètres partagés. Ce code montre comment utiliser postMessage pour inclure des informations d’état supplémentaires dont vous pourriez avoir besoin pour configurer la fenêtre.

newView.postMessage({ myState: 'My important state'}, thisOrigin);

Afficher la nouvelle fenêtre

Après avoir créé une vue, qui est l’association d’un thread et d’une fenêtre, vous pouvez afficher la nouvelle fenêtre à l’aide de la méthode ApplicationViewSwitcher.TryShowAsStandaloneAsync. Le paramètre viewId dans la méthode TryShowAsStandaloneAsync est un entier qui identifie de manière unique chacune des vues dans votre application. Vous récupérez l’ID de la vue en utilisant ApplicationView.Id ou ApplicationView.GetApplicationViewIdForWindow.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");
newView.postMessage({ myState: 'My important state' }, thisOrigin);
Windows.UI.ViewManagement.ApplicationViewSwitcher.tryShowAsStandaloneAsync(newView.viewId).done(function (viewShown) {

});

Nous vous déconseillons d’ouvrir automatiquement une nouvelle fenêtre quand un utilisateur accède à une autre partie de l’application. L’utilisateur doit initier l’ouverture d’une nouvelle fenêtre. Vous pouvez ajouter l’appel à TryShowAsStandaloneAsync à un élément d’interface utilisateur, par exemple une commande dans la barre de l’application inférieure.

Basculer d’une fenêtre à une autre

Vous devez permettre à l’utilisateur de revenir à la fenêtre principale à partir d’une fenêtre secondaire. Pour cela, utilisez la méthode ApplicationViewSwitcher.SwitchAsync. Vous appelez cette méthode à partir du thread de la fenêtre que vous quittez et vous passez l’ID de vue de la fenêtre vers laquelle vous basculez.

Windows.UI.ViewManagement.ApplicationViewSwitcher.SwitchAsync(viewIdToShow).done();

Dans l’application de messagerie, le bouton Précédent de la fenêtre secondaire appelle SwitchAsync. Cette application utilise aussi SwitchAsync quand un utilisateur envoie ou supprime le message contenu dans la fenêtre secondaire. Elle remplace la fenêtre secondaire par la fenêtre de courrier principale.

Lorsque vous utilisez SwitchAsync, vous pouvez choisir si vous voulez fermer la fenêtre initiale et la supprimer de la liste des applications utilisées récemment en spécifiant la valeur de ApplicationViewSwitchingOptions.

Fermer la nouvelle fenêtre

Une fois affichée, une fenêtre secondaire reste dans la liste des applications utilisées récemment jusqu’à ce que l’utilisateur ait lancé suffisamment d’autres applications pour la faire disparaître de la liste. L’consolidated event se produit quand la fenêtre est supprimée de la liste d’applications utilisées récemment, à condition que l’application ait encore au moins une autre fenêtre dans la liste. Comme chaque fenêtre consomme de la mémoire, nous vous recommandons de fermer la fenêtre quand elle disparaît de la liste.

Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("consolidated", viewConsolidated, false);

function viewConsolidated(e) {
    if (!isMainView) {
        window.close();
    }
}

Remarque  Ne fermez pas la fenêtre de la vue principale, car cela entraîne l’arrêt de l’application. Le processus de certification d’application impose que vous ne fermiez pas une application par programmation. Vous ne pouvez fermer qu’une fenêtre autre que la fenêtre principale, comme dans cet exemple.

 

Récapitulatif et étapes suivantes

Vous avez découvert comment créer et afficher plusieurs fenêtres pour une application. Vous avez également appris à basculer d’une fenêtre à une autre, et comment et quand fermer une fenêtre d’application.

Pour découvrir comment projeter une fenêtre séparée de votre application sur un autre écran à l’aide du gestionnaire de projection, voir Recommandations en matière de gestionnaire de projection.

Rubriques associées

Recommandations en matière de fenêtres multiples

Recommandations en matière de gestionnaire de projection

Conception dynamique (101) des applications de plateforme Windows universelle (UWP)

Exemple de plusieurs vues