Modèles de projet JavaScript pour les applications du Windows Store

Applies to Windows and Windows Phone

Cette rubrique fournit des informations approfondies sur les modèles de projet JavaScript destinés aux applications du Windows Phone Store et du Windows Store, notamment des détails d’implémentation sur le modèle de navigation, le modèles de données, la gestion de l’état d’affichage, etc.

Pour obtenir ces modèles, vous devez disposer d’une version de Visual Studio qui prend en charge le développement Windows. Voir Obtenir les outils.

Pour en savoir plus sur les modèles de projet pour XAML, voir Modèles de projet C#, VB et C++ pour les applications du Windows Store. Pour en savoir plus sur les modèles de projet pour Blend, voir Créer un projet.

Important  Les informations présentées dans cette rubrique ont été mises à jour pour Windows Phone 8, la Mise à jour Windows 8.1 et Microsoft Visual Studio 2013 Update 2. Pour plus d’informations sur l’ajout de la prise en charge de Windows Phone à une application existante du Windows Store, voir Modèles d’applications universelles dans cette rubrique et Portage de votre application Windows Runtime sur Windows Phone.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir Feuille de route pour l’utilisation de JavaScript.

Modèles d’applications universelles

Visual Studio 2013 Update 2 comprend des modèles de projet JavaScript qui prennent en charge le développement d’applications du Windows Phone Store et du Windows Store via du code partagé. Une application universelle est une application créée à partir de code partagé à l’aide d’un modèle d’application universelle (deux packages d’application distincts sont créés quand vous créez le projet). Les modèles d’applications universelles comprennent les éléments suivants :

  • Un projet d’application du Windows Phone Store, nommé appName.Phone. Chaque projet possède un package d’application distinct à télécharger vers son Windows Store respectif.
  • Un projet d’application du Windows Store, nommé appName.Windows.
  • Un dossier appName.Shared où stocker du code partagé. Par défaut, tous les fichiers JavaScript du projet sont partagés. Les fichiers HTML et CSS peuvent également être partagés.

Les modèles d’applications universelles comprennent les éléments suivants :

Pour gérer les différences de comportement entre les plateformes dans du code partagé :

  • Testez la prise en charge d’une fonctionnalité avant de l’utiliser. Par exemple, avec une interface utilisateur différente, vous pourriez vérifier si un élément DOM spécifique d’une plateforme est présent avant de l’utiliser.
  • Si le test d’une fonctionnalité n’est pas concluant dans un scénario particulier, utilisez la propriété WinJS.Utilities.isPhone pour identifier la plateforme actuelle.
  • Certains contrôles d’interface utilisateur tels que Pivot et SettingsFlyout sont spécifiques d’une plateforme. Pour permettre la prise en charge des différences dans une interface utilisateur, utilisez des fichiers HTML distincts, puis déplacez-les vers le projet spécifique de la plateforme.
  • Quand un fichier JavaScript est ouvert dans le dossier partagé, la liste déroulante d’un sélecteur de contexte vous permet de changer rapidement de version ciblée de la bibliothèque Windows pour JavaScript. Celle-ci fournit les éléments IntelliSense spécifiques de la version ciblée de la bibliothèque.

    Liste déroulante du sélecteur de contexte dans un fichier JavaScript partagé

  • Pour plus d’informations sur les différences des API, voir Modifications apportées aux API WinJS pour Windows Phone

Astuce  Pour changer de cible de génération et de déploiement, par exemple, pour passer de l’émulateur Windows Phone au simulateur, choisissez Définir comme projet de démarrage dans le menu contextuel de l’un des projets.

Hh758331.wedge(fr-fr,WIN.10).gifPour ajouter un projet Windows Phone à une solution du Windows Store existante :

  1. Dans l’Explorateur de solutions de Visual Studio, sélectionnez le projet du Windows Store.
  2. Dans le menu contextuel, choisissez Ajouter Windows Phone 8.1.

    Visual Studio ajoute le projet Windows Phone et le dossier de code partagé à la solution. Le nouveau projet Windows Phone est toujours un modèle de projet vide.

    Astuce  De même, si vous démarrez avec un projet Windows Phone, vous pouvez ajouter un projet du Windows Store à la solution.

  3. Si vos applications du Windows Store ne reposent pas sur le modèle vide, vous devez déterminer si le modèle vide est le point de départ qui convient au projet Windows Phone, ou si vous devez créer un projet Windows Phone séparément et porter les fichiers vers le nouveau projet partagé. Pour une application basée sur le modèle Hub pour les applications du Windows Store, le modèle Pivot pour Windows Phone est le point de départ recommandé. Si votre application se base sur le modèle Grille ou Fractionné, des efforts supplémentaires sont requis pour porter l’application vers le projet partagé, et le modèle Pivot peut fonctionner ou pas en tant que point de départ.

    Pour examiner un exemple d’application portée depuis le modèle Hub vers le modèle d’application universelle Hub/Pivot, voir Lecteur Web JSON qui utilise le modèle Hub/Pivot.

    Pour plus d’informations sur le portage d’une application sur Windows Phone, voir Portage de votre application Windows Runtime sur Windows Phone.

Modèle de projet Hub/Pivot pour les applications universelles

Utilisez le modèle de projet Hub/Pivot pour créer une solution partagée pour une application du Windows Phone Store et une application du Windows Store qui affichent le contenu dans une vue panoramique horizontale et qui proposent différents modes d’accès au contenu. Exemples d’applications Hub/Pivot possibles : applications de shopping, applications d’information, applications sportives et applications multimédias.

Par défaut, une application Hub/Pivot affiche plusieurs sections disposées horizontalement. Chaque section représente une catégorie de contenu, par exemple les nouveaux éléments, les éléments en surbrillance et les catégories d’éléments. Si l’utilisateur choisit un élément dans l’un des affichages de la section, un affichage en pleine page présente les détails de l’élément. Cette illustration montre la section 4 sur l’émulateur Windows Phone.

Modèle Application Pivot/Hub

Pour obtenir des informations sur les recommandations en matière d’expérience utilisateur pour le modèle de navigation Hub, voir Modèles de navigation.

Fichiers projet pour le modèle Hub/Pivot

Le modèle d’application Hub/Pivot inclut les fichiers suivants :

  • Tous les fichiers communs comme default.html et navigator.js.
  • hub.html, page de conteneur pour les sections individuelles, ou pages, de l’application (contrôles HubSection ou PivotItem, selon le projet).
  • sectionNumberPage.html, contient le balisage d’une page Pivot individuelle. Par exemple, section1Page.html contient le balisage de la première page Pivot ou page Section hub. Sur certaines pages, les utilisateurs peuvent choisir un élément pour afficher les informations relatives à ce dernier.
  • Un fichier JavaScript et CSS correspondant à chaque page de l’application.
  • section.html, qui montre une catégorie d’éléments et qui est propre à une application du Windows Store. Les utilisateurs peuvent choisir un élément pour afficher celui-ci en mode pleine page.
  • item.html, qui est l’affichage en pleine page d’un élément.
  • phone.css, qui spécifie les styles CSS de la page d’hôte de contenu et de l’application dans son ensemble.
  • hubPhone.css, qui spécifie les styles CSS du contrôle Pivot et des pages Pivot. Ces styles remplacent les styles définis dans hub.css.
  • Un fichier CSS propre à chaque page de l’application, comme hub.css.

Fonctionnement du modèle Hub/Pivot

Les sections du modèle Hub/Pivot sont destinées à fournir des exemples de contenus plutôt que des recommandations en matière de contenu. Il est possible d’ajouter et de supprimer facilement des sections de manière à répondre aux spécifications de contenu de l’application.

Dans le projet Windows Phone, chaque section est un PivotItem distinct dans un contrôle Pivot. Dans le projet Windows, chaque section est un contrôle HubSection distinct.

Les sections du modèle comportent du contenu statique. Il est donc facile de fournir des ressources globalisées. Le fichier de ressources globalisées contient les chaînes localisées des paramètres régionaux en-us.

Pour plus d’informations sur l’implémentation du modèle Hub/Pivot, voir :

Pour obtenir un exemple qui montre comment personnaliser le modèle Hub/Pivot pour ajouter des données dynamiques aux sections de l’application, voir Lecteur Web JSON qui utilise le modèle Hub/Pivot. Pour plus d’informations sur le modèle de données et sur la façon de le personnaliser pour une application du Windows Store, voir la rubrique relative à l’ajout de données.

  • Applies to Windows

Modèle de projet Hub pour les applications du Windows Store

Utilisez le modèle de projet Hub pour créer une application du Windows Store qui affiche le contenu dans une vue panoramique horizontale et qui proposent différentes manières pour accéder au contenu. Exemples d’applications Hub possibles : applications de shopping, applications d’information, applications sportives et applications multimédias. Le modèle Hub est une version de plateforme unique du modèle Hub/Pivot.

Par défaut, une application Hub affiche une page d’accueil comportant plusieurs sections disposées horizontalement. Chaque section représente du contenu, par exemple les nouveaux éléments, les éléments en surbrillance et les catégories d’éléments. Si l’utilisateur appuie sur l’en-tête d’une section interactive (signalée par le signe « > » après l’en-tête), l’application ouvre la page de la section qui répertorie les éléments associés à cette section. Si l’utilisateur choisit un élément dans la page d’accueil ou dans la page de la section, une vue en mode pleine page affiche les détails de l’élément. Cette illustration montre une page d’accueil comportant au moins trois sections.

Modèle de projet Application hub

Pour obtenir des informations sur les recommandations en matière d’expérience utilisateur pour le modèle de navigation Hub, voir Modèles de navigation.

Fichiers projet pour le modèle Hub

Le modèle Application Hub inclut les fichiers suivants :

  • Tous les fichiers communs comme default.html et navigator.js.
  • hub.html, qui affiche les sections et les éléments sur la page d’accueil. Les utilisateurs peuvent choisir un élément pour afficher des informations sur cet élément, ou ils peuvent choisir une étiquette de section pour afficher des informations sur la section correspondante.
  • item.html, qui est l’affichage en pleine page d’un élément.
  • section.html, qui montre une catégorie d’éléments et qui est propre à une application du Windows Store. Les utilisateurs peuvent choisir un élément pour afficher celui-ci en mode pleine page.
  • Un fichier JavaScript et CSS correspondant à chaque page de l’application.

Fonctionnement du modèle Hub

Les sections du modèle Hub sont destinées à fournir des exemples de contenu plutôt que des recommandations en matière de type de contenu à inclure. Il est possible d’ajouter et de supprimer facilement des sections de manière à répondre aux spécifications de contenu de l’application.

Les sections du modèle comportent du contenu statique. Il est donc facile de fournir des ressources globalisées. Le fichier de ressources globalisées contient les chaînes localisées des paramètres régionaux en-us.

Pour plus d’informations sur l’implémentation du modèle Hub, voir :

Pour obtenir un exemple illustrant comment personnaliser le modèle Hub pour ajouter des données dynamiques aux sections Hub, consultez Lecteur Web JSON qui utilise le modèle Hub. Pour plus d’informations sur le modèle de données et la façon de le personnaliser pour le modèle Hub, consultez la rubrique relative à l’ajout de données.

  • Applies to Windows Phone

Modèle de projet Pivot pour les applications Windows Phone 8.1

Le modèle Pivot est une version de plateforme unique du modèle Hub/Pivot.

Le modèle Application Pivot permet de gérer rapidement plusieurs affichages ou pages. Vous pouvez l’utiliser pour filtrer de grands ensembles de données, afficher plusieurs ensembles de données ou basculer entre les affichages de l’application. Le modèle Pivot implémente un contrôle Pivot qui contient des contrôles PivotItem individuels, chacun représentant une page Pivot. Le contrôle Pivot fournit une prise en charge intégrée pour l’interaction tactile et la navigation.

Modèle Application Pivot

Fichiers projet pour le modèle Pivot

Le modèle Application Pivot inclut les fichiers suivants :

  • Tous les fichiers communs comme default.html et navigator.js.
  • hub.html, page de conteneur pour les pages Pivot individuelles (contrôles PivotItem).
  • sectionNumberPage.html, contient le balisage d’une page Pivot individuelle. Par exemple, section1Page.html contient le balisage de la première page Pivot. Sur certaines pages, les utilisateurs peuvent choisir un élément pour afficher les informations relatives à ce dernier.
  • Un fichier JavaScript et CSS correspondant à chaque page de l’application.
  • item.html, qui est l’affichage en pleine page d’un élément.
  • phone.css, qui spécifie les styles CSS de la page d’hôte de contenu et de l’application dans son ensemble.
  • hubPhone.css, qui spécifie les styles CSS du contrôle Pivot et des pages Pivot. Ces styles remplacent les styles définis dans hub.css.

Fonctionnement du modèle Pivot

Les sections du modèle Pivot sont destinées à fournir des exemples de contenus plutôt que des recommandations en matière de contenu. Il est possible d’ajouter et de supprimer facilement des sections, implémentées sous forme de contrôles PivotItem, de manière à répondre aux spécifications de contenu de l’application.

Les sections du modèle comportent du contenu statique. Il est donc facile de fournir des ressources globalisées. Le fichier de ressources globalisées contient les chaînes localisées des paramètres régionaux en-us.

Pour plus d’informations sur l’implémentation du modèle Pivot, voir :

Pour plus d’informations sur le modèle de données et sur la façon de le personnaliser pour une application du Windows Store, voir la rubrique relative à l’ajout de données et voir Lecteur Web JSON qui utilise le modèle Hub/Pivot.

Modèle de projet Navigation pour les applications du Windows Store

Le modèle Application de navigation fournit la navigation de base à l’aide du modèle de navigation recommandé pour les applications du Windows Store. Le modèle contient uniquement un fragment de page minimal auquel vous pouvez facilement ajouter d’autres fragments de page à l’aide du modèle d’élément Contrôle de page. Vous pouvez ensuite ajouter votre propre contenu.

Le modèle de navigation est disponible sous forme d’application universelle pour le Windows Phone Store et le Windows Store, ou sous forme d’application de plateforme unique.

L’application de navigation affiche par défaut une page d’accueil qui affiche le titre « Bienvenue », comme illustré ici.

Modèle de projet Application de navigation

Fichiers projet pour le modèle Navigation

Le modèle Application de navigation inclut les fichiers suivants :

  • La plupart des fichiers communs comme default.html et navigator.js.
  • home.html, qui est la page d’accueil. Elle affiche le titre « Bienvenue ». Dans l’application universelle, ce fichier est partagé.
  • home.js, qui spécifie le comportement associé à la page d’accueil. Dans l’application universelle, ce fichier est partagé.
  • home.css, qui spécifie les styles CSS de la page d’accueil. Dans l’application universelle du modèle Navigation, chaque projet comprend ce fichier.

Fonctionnement du modèle Navigation

Pour plus d’informations sur l’implémentation du modèle Navigation, voir :

Pour ajouter des pages à l’application, utilisez le modèle d’élément Contrôle de page. Pour un exemple d’ajout d’un contrôle de page, voir Ajout d’un modèle d’élément de contrôle de page.

Pour une simple implémentation du modèle Navigation, voir l’exemple Button-Tab Navigator. Cet exemple d’application comprend certaines personnalisations du contrôle de navigation.

Si vous devez inclure une gestion spéciale des modifications de l’état d’affichage dans le modèle Navigation, vous devez apporter des modifications à votre code. Nous vous recommandons d’utiliser le même modèle que celui utilisé dans les modèles Grille et Fractionner, à savoir implémenter updateLayout dans les pages HTML. Pour plus d’informations, voir Gestion de l’état d’affichage. La prise en charge de updateLayout est fournie dans le modèle de navigation partagé.

Pour vous aider à choisir le meilleur modèle de navigation pour votre application, voir Modèles de navigation. En outre, voir le Modèle de navigation plat en action dans le cadre de notre série Fonctionnalités d’application de A à Z.

  • Applies to Windows

Modèle de projet Grille pour les applications du Windows Store

Le modèle Application grille constitue un excellent point de départ pour personnaliser une application du Windows Store et permettre aux utilisateurs de parcourir des catégories à la recherche de contenu auquel ils souhaitent se consacrer totalement. Exemples d’applications possibles : applications de shopping, d’information, de photo ou vidéo. Ce modèle utilise le modèle de navigation JavaScript recommandé pour les applications du Windows Store.

L’application Grille affiche par défaut une page d’accueil dans laquelle figure une liste de groupes. Un groupe représente un jeu nommé d’éléments, à l’image d’un rayon d’un grand magasin virtuel doté d’articles individuels. Si l’utilisateur sélectionne un groupe, l’application ouvre la page de détails du groupe qui comprend une liste des éléments du côté droit. L’utilisateur peut sélectionner un élément dans la page d’accueil ou dans la page de détails du groupe. S’ouvre alors un affichage en pleine page des détails de l’élément. La page d’accueil est présentée ici.

Modèle de projet Application grille

Fichiers projet pour le modèle Grille

Le modèle Application grille inclut les fichiers suivants :

  • Tous les fichiers communs comme default.html et navigator.js.
  • groupedItems.html, qui est la page d’accueil. Il permet à l’utilisateur d’afficher les groupes et les éléments. L’utilisateur peut sélectionner soit un élément pour naviguer vers l’affichage en pleine page de l’élément, soit une étiquette de groupe pour naviguer vers la page de détails du groupe.
  • groupDetail.html, qui permet non seulement à l’utilisateur d’afficher les détails du groupe à gauche et les éléments à droite, mais aussi de sélectionner un élément pour naviguer vers l’affichage en pleine page de l’élément.
  • itemDetail.html, qui est l’affichage en pleine page d’un élément.
  • Un fichier JavaScript et un fichier CSS correspondant à chaque page de l’application, comme groupedItems.js.

Fonctionnement du modèle Grille

Pour plus d’informations sur l’implémentation du modèle Grille, voir :

La rubrique sur l’ajout de données inclut un exemple qui illustre l’ajout de données dynamiques au modèle Grille et la liaison de données à l’interface utilisateur.

  • Applies to Windows

Modèle de projet Fractionner pour les applications du Windows Store

Le modèle Application fractionnée constitue un bon point de départ pour créer une application du Windows Store que vous pouvez ensuite personnaliser afin de permettre aux utilisateurs d’afficher une liste d’éléments et de détails sur ceux-ci dans un affichage à deux colonnes. Vous pouvez aussi faire en sorte que les utilisateurs puissent passer rapidement d’un élément à un autre et mettre à jour dynamiquement la liste. Citons en exemple un lecteur de News, une application répertoriant les résultats sportifs ou encore une application de messagerie. Ce modèle utilise le modèle de navigation JavaScript recommandé pour les applications du Windows Store.

L’application fractionnée affiche par défaut une page d’accueil dans laquelle figure une liste de groupes. Un groupe est un ensemble nommé d’éléments, par exemple une source d’informations qui fournit des sujets d’actualités. Quand l’utilisateur sélectionne un groupe en appuyant ou en cliquant sur ce groupe, l’application ouvre la page en mode fractionné, en affichant les éléments dans la partie gauche et les détails de l’élément actif dans la partie droite. La page à affichage fractionné est présentée ici.

Modèle de projet Application fractionnée

La page à affichage fractionné présente un affichage à deux colonnes (ou affichage maître/détail), où les détails côté droit sont modifiés lorsque l’utilisateur sélectionne des éléments côté gauche. Vous pouvez là encore imaginer une liste de sujets d’actualités à gauche avec les récits à droite.

Fichiers projet pour le modèle Fractionner

Le modèle Application fractionnée inclut les fichiers suivants :

  • Tous les fichiers communs comme default.html et navigator.js.
  • items.html, qui est la page d’accueil. Il permet à l’utilisateur de sélectionner un groupe pour naviguer vers la page à affichage fractionné de l’application.
  • split.html, qui est la page à affichage fractionné. Deux sections sont définies : une pour la liste d’éléments côté gauche et une autre pour les détails des éléments côté droit.
  • Un fichier JavaScript et un fichier CSS correspondant à chaque page de l’application, comme split.js et split.css.

Fonctionnement du modèle Fractionner

Pour plus d’informations sur l’implémentation du modèle Fractionner, voir :

La rubrique sur l’ajout de données inclut un exemple qui illustre l’ajout de données dynamiques au modèle Fractionner et la liaison de données à l’interface utilisateur.

Pour obtenir un exemple illustrant l’ajout de la recherche au modèle Fractionner, voir Ajout d’un modèle d’élément Contrat de recherche.

Modèle de projet vide pour les applications du Windows Store

Le modèle Application vide fournit une application du Windows Store dépouillée qui se compile et s’exécute, mais qui ne contient aucun contrôle d’interface utilisateur ni aucune donnée. Lorsque vous exécutez une application basée sur le modèle de projet Vide, vous voyez s’afficher un écran noir contenant le texte de l’espace réservé.

Le modèle Vide est disponible sous forme d’application universelle pour le Windows Phone Store et le Windows Store, ou sous forme d’application de plateforme unique.

Fichiers projet pour le modèle Vide

Le modèle Application Vide inclut les fichiers suivants :

Fonctionnement du modèle Vide

Pour plus d’informations sur l’implémentation du modèle Vide, voir :

Le comportement et l’aspect d’ensemble du modèle Vide sont créés par une feuille de style CSS : ui-dark.css. Vous pouvez modifier cette référence dans vos pages HTML et la remplacer par ui-light.css. Pour plus d’informations, voir Styles CSS.

Fichiers de modèles de projet communs

Les fichiers suivants sont communs à la plupart des modèles de projet.

FichierDescription
default.htmlCette page est chargée en premier. Pour les applications qui incluent le modèle de navigation sur une seule page, cette page fournit le balisage pour l’hôte de contenu (où chaque page est chargée dans la fenêtre principale). Dans les modèles d’applications universelles, chaque projet comprend ce fichier.
navigator.jsImplémente le modèle de navigation sur une seule page des modèles de projet JavaScript. Le modèle de projet Vide n’inclut pas ce fichier.

Habituellement, il n’est pas nécessaire de personnaliser le comportement de navigation implémenté dans les modèles. Toutefois, le contrôle de navigation (navigator.js) est implémenté en tant que fichier de projet standard pour que vous puissiez y apporter des modifications si besoin. Pour plus d’informations, voir :

data.jsFournit un objet de source de données (WinJS.Binding.List) qui expose les données au reste de l’application. Ce fichier inclut des exemples de données. Pour plus d’informations sur le modèle de données, voir Personnalisation de données dans un modèle de projet. Les modèles de projet Navigation et Vide n’incluent pas ce fichier.
package.appxmanifestDécrit le package d’application pour des applications du Windows Store et du Windows Phone Store. Dans un modèle d’application universelle, chaque projet comprend ce fichier.
Fichier PFXCe fichier est utilisé pour signer le fichier appxmanifest. Il est inclus en tant que fichier projet pour prendre en charge la génération des applications du Windows Store à partir de la ligne de commande.
default.jsSpécifie comment l’application se comporte au démarrage. Dans les modèles d’applications universelles, chaque projet comprend ce fichier.
default.cssSpécifie les styles CSS de l’application. Dans les modèles d’applications universelles, chaque projet comprend ce fichier.
Divers fichiers image Les fichiers image inclus par défaut sont notamment splashscreen.png pour l’image de l’écran de démarrage et storelogo.png, qui est utilisé pour le Windows Store, parmi d’autres fichiers.
resources.jsonUn exemple de fichier de ressources qui contient des chaînes de localisation.

 

Fonctionnalités de codage communes

Les fonctionnalités suivantes sont communes à tous les modèles du projet :

  • Chaque fichier JavaScript encapsule le code dans une fonction anonyme qui s’exécute automatiquement, comme suit :
    
    (function () {
        // . . .
    })();
    
    

    Les membres ajoutés à l’intérieur de la fonction sont privés, mais vous pouvez les rendre publics à l’aide de la fonction WinJS.Namespace.define. L’utilisation de la fonction anonyme modifie la façon d’écrire du code, comme lorsque vous ajoutez vos propres gestionnaires d’événements. Pour plus d’informations, voir Codage d’applications de base.

  • Chaque fichier JavaScript spécifie l’utilisation du mode strict avec l’instruction « use strict ». Pour plus d’informations, voir Mode strict dans la référence du langage JavaScript.
  • Le traitement déclaratif strict est toujours activé. Vous devez utiliser WinJS.Utilities.markSupportedForProcessing pour indiquer qu’une fonction est autorisée à utiliser le traitement déclaratif.

Les commentaires de documentation XML sont utilisés à quelques emplacements des fichiers JavaScript afin de fournir une expérience IntelliSense plus complète. Pour plus d’informations, voir IntelliSense JavaScript.

Cycle de vie de l’application

L’implémentation du cycle de vie de l’application est identique pour tous les modèles de projet JavaScript pour les applications du Windows Store. Le cycle de vie de l’application commence lorsque l’application démarre et se termine lorsque l’application est fermée. Les modèles de projet incluent un modèle générique pour gérer le cycle de vie de l’application. Lorsque vous créez une application basée sur un modèle de projet, vous pouvez inclure du code pour gérer des scénarios supplémentaires, comme la gestion des données en cas de suspension ou d’arrêt de l’application.

Le fichier default.html est défini comme la page d’accueil de chaque modèle. Le fichier JavaScript correspondant pour default.html inclut l’appel suivant à WinJS.Application.start qui démarre la distribution des événements de l’application.


var app = WinJS.Application;
// . . .
app.start();

default.js est le meilleur endroit pour ajouter du code lié à la gestion du cycle de vie de l’application. L’implémentation de default.js est la même pour tous les modèles de projet. Ce fichier inclut du code pour gérer l’événement onactivated WinJS. Cet événement est déclenché au moment de l’activation de Windows Runtime. Le code dans le gestionnaire d’événements onactivated vérifie si l’application a été démarrée à partir de l’écran d’accueil de Windows et appelle WinJS.UI.processAll. La fonction processAll charge tous les contrôles qui incluent l’attribut data-win-control dans l’élément DIV du contrôle. Voici le code qui contient la fonction processAll.



app.addEventListener("activated", function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // . . .
        } else {
            // . . .
        }
        // . . .
        }
        // . . .

        // . . .
        var p = ui.processAll().then(function () {
            return nav.navigate(nav.location || Application.navigator.home, nav.state);
        }).then(function () {
            return sched.requestDrain(sched.Priority.aboveNormal + 1);
        }).then(function () {
            ui.enableAnimations();
        });

        args.setPromise(p);
    }
});

Si vous avez du code qui doit être exécuté lorsque l’application configure son état initial, vous devez inclure ce code dans le gestionnaire pour l’événement onactivated WinJS. Il peut aussi être nécessaire d’inclure du code supplémentaire si l’application a été réactivée à la suite d’une suspension. Ajoutez ce code à l’emplacement indiqué par les commentaires du code.



if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    // TODO: This application has been newly launched. Initialize
    // your application here.
} else {
    // TODO: This application has been reactivated from suspension.
    // Restore application state here.
}


Comme indiqué précédemment, les modèles n’incluent pas de code pour gérer la suspension de l’application. Pour gérer cet état d’application dans votre code, vous pouvez ajouter du code au gestionnaire d’événements oncheckpoint WinJS, illustré ici dans default.js, ou ajouter du code pour une inscription à l’événement suspending Windows Runtime (qui appelle oncheckpoint).


app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. If you need to 
    // complete an asynchronous operation before your application is 
    // suspended, call args.setPromise().
    app.sessionState.history = nav.history;
};

Vous pouvez utiliser des événements WinJS ou Windows Runtime, ou une combinaison des deux, pour gérer le cycle de vie de l’application. Toutefois, les événements et les fonctions WinJS sont suffisants pour la plupart des applications. Pour plus d’informations, voir Comment suspendre une application et Comment reprendre une application.

Voici quelques-uns des événements et des fonctions WinJS liés au cycle de vie de l’application :

Modèle de navigation

Le modèle de navigation utilisé dans les modèles de projet d’application Hub, Grille, Fractionner et Navigation est le modèle de navigation recommandé pour les applications du Windows Store en JavaScript. Dans ce modèle, les pages HTML sont chargées par l’intermédiaire de l’URI dans un contexte unique couvrant l’ensemble de l’application. Le chargement des pages se produit si nécessaire, généralement en réponse à des actions de l’utilisateur. Les développeurs Web parlent souvent de « navigation sur une seule page » pour faire référence à ce type de modèle de navigation. Le fichier navigator.js implémente le modèle de navigation. Le modèle de navigation sur une seule page fournit une transition plus fluide (de type application) entre les pages et facilite également la gestion de l’état car les scripts ne sont jamais déchargés.

Astuce  Pour vous aider à choisir le meilleur modèle de navigation pour votre application, voir Modèles de navigation. En outre, voir le Modèle de navigation plat en action dans le cadre de notre série Fonctionnalités d’application de A à Z.

Pour personnaliser la navigation dans vos applications à l’aide du modèle de navigation sur une seule page fourni dans les modèles de projet :

  • Assurez-vous que votre application comprend navigator.js et les balises de l’hôte de contenu requises pour le contrôle de navigation dans default.html (voir ci-dessous).
  • Assurez-vous que chaque page est implémentée en tant qu’objet PageControl. (Vous pouvez utiliser Visual Studio pour ajouter un modèle d’élément PageControl.)
  • Implémentez le code d’initialisation pour chaque page dans la fonction ready ou init.
  • Appelez WinJS.Navigation.navigate pour naviguer vers de nouvelles pages.

Vous trouverez ci-après des détails supplémentaires sur ces exigences.

Les modèles de projet, tels que le modèle Vide, n’incluent pas de fichier navigator.js. Pour ce modèle, vous devez implémenter une navigation personnalisée si vous n’ajoutez pas le fichier de projet navigator.js manuellement. Si vous utilisez le modèle de navigation sur une seule page et WinJS.Navigation.navigate pour naviguer entre les pages, gardez à l’esprit que WinJS.Navigation.navigate n’effectue pas la navigation directement, mais cette fonction est une fonction de wrapper qui stocke un objet d’état associé à votre emplacement actuel, puis appelle l’événement WinJS.Navigation.onnavigated. Pour plus d’informations sur la navigation et pour obtenir un exemple d’utilisation de la navigation sur une seule page dans les applications du Windows Store générées pour Windows en JavaScript, voir Démarrage rapide : utilisation de la navigation sur une seule page.

Dans le modèle de navigation sur une seule page utilisé dans les modèles Grille, Fractionner, Hub et Application de navigation, un élément DIV qui est déclaré comme contrôle de navigation de l’application fournit l’hôte de contenu pour toutes les pages de l’application. Tout le contenu de la page est chargé dans cet élément DIV. L’élément, représenté ici, est inclus dans default.html dans les modèles de projets.


<div id="contenthost" data-win-control="Application.PageControlNavigator"
    data-win-options="{home: '/pages/items/items.html'}">
</div>

Le contrôle de navigation lui-même est implémenté dans navigator.js et, pour la plupart des applications, il est inutile de le modifier. Le contrôle de navigation définit des gestionnaires pour l’événement WinJS.Navigation.onnavigated.

Les pages chargées dans l’hôte de contenu doivent être des objets PageControl. Chaque contrôle de page représente une unité modulaire de code HTML, CSS et JavaScript. Lorsque le contrôle de navigation charge une page, il appelle les méthodes définies en interne de l’interface IPageControlMembers, telles que ready.

Les modèles de projet implémentent la fonction ready ainsi que, dans certains modèles, la fonction init. La fonction ready est appelée lorsque la page est chargée et entièrement traitée.

Astuce  Pour plus d’informations sur le processus de chargement d’une page, voir IPageControlMembers.init.

Pour naviguer vers une nouvelle page, chaque application de modèle appelle WinJS.Navigation.navigate. Ces appels forcent le contrôle de navigation à charger le fichier HTML dans l’élément DIV de l’hôte de contenu. Plusieurs fonctions des pages de modèle appellent la fonction navigate de la bibliothèque Windows pour JavaScript (WinJS) :

  • La fonction _itemInvoked, qui gère la sélection d’un élément dans une vue de liste. Selon la page active et le contexte, la sélection peut se trouver dans un élément individuel ou un groupe.
  • La fonction _selectionChanged, qui gère la sélection d’un élément dans split.html (modèle Fractionner).

Dans certains modèles, des fonctions particulières au sein des fichiers JavaScript des pages HTML peuvent modifier l’historique du bouton Retour, selon l’état d’affichage actuel. Par exemple, dans le modèle d’application Fractionner, l’application modifie l’historique du bouton Retour si l’application est dans un état d’affichage défini par le modèle appelé affichage maître/détail. Pour plus d’informations, voir Gestion de l’état d’affichage.

Pour plus de détails sur l’implémentation de la navigation entre les pages, voir Navigation entre les pages.

Styles CSS

Le comportement et l’aspect d’ensemble des modèles sont créés par une feuille de style CSS : ui-dark.css. Il s’agit d’une feuille de style WinJS qui définit le modèle de couleurs principal, les polices et d’autres propriétés de style. La référence du projet est indiquée ici :


<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

Vous pouvez remplacer cette référence dans toutes vos pages HTML par ui-light.css, qui est l’autre modèle de couleur et de style recommandé pour les applications du Windows Store :


<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

La plupart des pages HTML dans les modèles de projet Grille et Fractionner utilisent un ou plusieurs modèles WinJS (qui ne sont pas les mêmes que les modèles de projet et d’élément Visual Studio) pour mettre en forme et afficher plusieurs instances des données. Par exemple, chaque fois qu’un contrôle ListView est présent sur une page, vous trouverez un modèle WinJS ayant pour nom de classe itemtemplate. Les noms de classes sont utilisés pour récupérer des éléments dans les fichiers JavaScript et pour spécifier le style CSS. Voici le modèle d’élément qui figure dans items.html dans le modèle de projet Fractionner :


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-overlay">
        <h4 class="item-title" 
            data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle win-type-ellipsis" 
            data-win-bind="textContent: subtitle"></h6>
    </div>
</div>


Important  Le modèle itemtemplate s’applique à n’importe quel type d’élément ListView, qu’il s’agisse d’un groupe ou d’un élément de données individuel (selon le contexte).

Les styles CSS qui sont associés aux pages HTML, et les modèles WinJS associés, sont des styles CSS délimités. L’utilisation de styles délimités restreint l’application de styles à des pages particulières. Ceci peut permettre de réduire le temps qu’il faut pour résoudre les problèmes qui se produisent lorsque la source d’un style CSS particulier n’est pas clairement établie. Un exemple d’utilisation de styles délimités est présenté ci-après. Cette section de code, dans items.css, affiche les propriétés CSS définies pour l’élément IMG du modèle d’élément précédent. Cet élément représente l’image associée à chaque élément dans ListView.


.itemspage .itemslist .item .item-image {
    -ms-grid-row-span: 2;
}


Dans l’exemple précédent, l’entrée itemspage définit l’étendue pour le style, limitant ainsi l’application du style CSS aux éléments se trouvant dans l’élément DIV itemspage déclaré dans items.html. L’entrée itemslist limite davantage le style CSS à la section de contenu principal dans la page d’accueil, et ainsi de suite. La section de contenu principal dans items.html, qui déclare ListView, ressemble à ceci :


<div class="itemslist win-selectionstylefilled" 
    aria-label="List of groups" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ selectionMode: 'none' }">
</div>


La prise en charge des feuilles de style pour les systèmes d’écriture de la droite vers la gauche est fournie dans les modèles dans Microsoft Visual Studio 2012 Update 1. L’exemple suivant illustre un style CSS pour un en-tête de groupe affiché de la droite vers la gauche dans groupedItems.css (modèle Grille).


.groupeditemspage .groupeditemslist.win-rtl .group-header .group-chevron:before {
    content: "\E26C";
}

Pour utiliser les styles de droite à gauche, vous devez inclure des ressources pour une langue de droite à gauche dans votre projet, et Windows doit être configuré selon les paramètres de langue appropriés. Pour plus d’informations, voir Démarrage rapide : traduction des ressources de l’interface utilisateur. Pour obtenir des recommandations en matière de prise en charge des systèmes d’écriture de la droite vers la gauche dans les applications du Windows Store, voir Comment prendre en charge une interface utilisateur bidirectionnelle.

Gestion de l’état d’affichage

Les modèles Grille et Hub n’implémentent pas de prise en charge particulière pour les différents états d’affichage, au-delà des contrôles de disposition, mais ils fournissent une infrastructure de base permettant la personnalisation suite à des modifications de disposition. Les modifications de disposition peuvent être gérées dans le modèle de navigation du modèle de projet. Pour plus d’informations, voir modèle de navigation.

Dans navigator.js, le contrôle de navigation crée un gestionnaire pour l’événement window.onresize.


window.onresize = this._resized.bind(this);


Dans le code du constructeur pour PageControlNavigator, l’événement onresize mappe finalement à la fonction updateLayout qui est implémentée dans le fichier JavaScript associé à la page HTML active. Au moment de l’exécution, l’événement onresize appelle cette fonction.

L’implémentation de updateLayout est spécifique à chaque page, mais n’est généralement pas implémentée dans les modèles de projet. Ce code affiche le code stub pour updateLayout dans la page Section du modèle Hub.


updateLayout: function (element) {
    /// <param name="element" domElement="true" />

    // TODO: Respond to changes in layout.
},


Le modèle Fractionner prend en charge un comportement relatif à l’état d’affichage. Par défaut, la page à affichage fractionné (split.html) dans le modèle Fractionner est un affichage à deux colonnes — l’« affichage maître/détail ». Le modèle Fractionner définit un autre affichage appelé affichage à une seule colonne, défini en vérifiant la largeur du nœud racine du document. Le code qui définit l’affichage à une seule colonne se trouve dans split.js. La fonction _isSingleColumn définit l’état d’affichage à une seule colonne :


_isSingleColumn: function () {
    return document.documentElement.offsetWidth <= 767;
},


Plusieurs méthodes différentes dans split.js, telles que _updateVisibility, appellent _isSingleColumn. La fonction _updateVisibility active et désactive la visibilité des colonnes, selon que l’application est actuellement en mode affichage à une seule colonne et qu’un élément a été sélectionné. _updateVisibility est appelé dans split.js par la fonction ready quand la page est chargée, et également par updateLayout quand l’événement de redimensionnement se produit. Pour plus d’informations, voir split.js dans le modèle Fractionner.

Plusieurs fonctions dans split.js modifient aussi l’historique du bouton Précédent ou le comportement de navigation en fonction de l’état d’affichage. La fonction ready et la fonction updateLayout modifient l’historique du bouton Précédent. La fonction selectionChanged, qui est appelée lorsqu’un élément dans l’affichage de liste est sélectionné, modifie le comportement de navigation.

Pour plus d’informations sur la gestion des modifications de disposition, voir Recommandations en matière de tailles de fenêtre et de mise à l’échelle à la taille des écrans.

 

 

Afficher:
© 2014 Microsoft