Démarrage rapide : ajout de paramètres d’application à l’aide de la Bibliothèque Windows pour JavaScript

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 ]

Cette rubrique de démarrage rapide vous guide dans l’implémentation du contrat de paramètres à l’aide de code HTML et de la classe SettingsFlyout pour la Bibliothèque Windows pour JavaScript.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z: Interface utilisateur des applications du Windows Store de A à Z

Introduction

Dans l’exemple suivant, vous définirez deux menus volants de paramètres, Defaults et Help, dans deux fichiers HTML distincts. Vous allez traiter les menus volants de paramètres et remplir le volet des paramètres à l’aide de JavaScript.

Prérequis

Lisez les Recommandations en matière de paramètres de l’application.

1. Créer une application vide

Créez une application vide "Hello World" comme décrit dans Créer une application "Hello, world". Vous devez effectuer uniquement les deux premières étapes :

Créez un projet dans Visual Studio.
Lancez l’application.

Toujours dans Visual Studio, créez un fichier HTML nommé DefaultSettings.html :

Dans le volet Explorateur de solutions, sous la solution "HelloWorld", cliquez avec le bouton droit sur le projet HelloWorld.
Sélectionnez Ajouter, Nouveau dossier.
Nommez le nouveau dossier "html".
Cliquez avec le bouton droit sur le dossier et sélectionnez Ajouter, Nouveau fichier HTML.
Sélectionnez Page HTML, entrez le nom "DefaultSettings.html" et cliquez sur Ajouter.

Copiez le code suivant et collez-le sur le contenu du nouveau fichier.


<!doctype HTML>
<html>
    <head>
        <title>App defaults Settings flyout</title>
    </head>
    <body>
        <!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
        <!-- Each Settings flyout should be defined in its own HTML file. -->
        <!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
        <!-- Set the background color for the header to the background color defined for your
             app tile in the manifest. -->
        <div id="defaultsDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App defaults Settings flyout"
                data-win-options="{settingsCommandId:'help',width:'narrow'}">
            <div class="win-header" style="background-color:#464646">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Defaults</div>
                <img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
            </div>
            <div class="win-content">
                {App defaults content goes here}
            </div>
        </div>
        <!-- ENDTEMPLATE -->
    </body>
</html>

Créez un fichier HTML supplémentaire nommé HelpUI.html sous le dossier "html".

Copiez le code suivant et collez-le sur le contenu du nouveau fichier.

<!doctype HTML>
<html>
    <head>
        <title>Help Settings flyout</title>
    </head>
    <body>
        <!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
        <!-- Each Settings flyout should be defined in its own HTML file. -->
        <!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
        <!-- Set the background color for the header to the background color defined for your
             app tile in the manifest. -->
        <div id="helpDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help Settings flyout"
                data-win-options="{settingsCommandId:'help',width:'narrow'}">
            <div class="win-header" style="background-color:#464646">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Help</div>
                <img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
            </div>
            <div class="win-content">
                {Help content goes here}
            </div>
        </div>
        <!-- ENDTEMPLATE -->
    </body>
</html>

4. Remplir le volet Paramètres

Traitez le menu volant Paramètres et remplissez le volet Paramètres en ajoutant le code JavaScript suivant à default.js. Placez le nouveau code dans la fonction onactivated pour qu’il soit exécuté après l’initialisation de votre modèle DOM.


    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            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.
            }
            args.setPromise(WinJS.UI.processAll());

            // BEGIN BLOCK OF NEW CODE
            // Populate Settings pane and tie commands to Settings flyouts.
            WinJS.Application.onsettings = function (e) {
                e.detail.applicationcommands = {
                    "defaultsDiv": { href: "html/DefaultSettings.html", title: "App defaults" },
                    "helpDiv": { href: "html/HelpUI.html", title: "Help" }
                };
                WinJS.UI.SettingsFlyout.populateSettings(e);
            }
            // END OF BLOCK

        }
    };