Démarrage rapide : ajouter de l’aide dans une application (HTML)

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 ]

Ce didacticiel de démarrage rapide vous montre comment ajouter un menu volant d’aide au volet Paramètres à l’aide de code HTML et de l’objet SettingsFlyout pour la Bibliothèque Windows pour JavaScript. Pour voir un menu déroulant d’aide dans une application complète, consultez l’exemple de paramètres d’application.

Dans l’exemple suivant, vous allez définir un menu volant de paramètres appelé Aide, dans un fichier HTML (HelpUI.html). Vous allez ensuite initialiser le menu volant de paramètres et remplir le volet Paramètres à l’aide de JavaScript.

Vous développez en C#/Visual Basic/C++ et XAML ? Consultez Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML).

Prérequis

Voir Recommandations en matière d’aide de l’application et Recommandations en matière de paramètres de l’application.

Instructions

Créez un fichier HTML nommé "HelpUI.html".

<!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 data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" to create 
         a wide flyout. -->
    <!-- Set the background color for the header to the background color defined
         for your app tile in the manifest. -->
    <div data-win-control="WinJS.UI.SettingsFlyout"
         data-win-options="{settingsCommandId:'helpDiv', width:'wide'}">
        <div class="win-ui-dark win-header" title="Help">
            <button type="button" 
                    onclick="WinJS.UI.SettingsFlyout.show()"
                    class="win-backbutton"></button>
            <div class="win-label">Help</div>
        </div>
        <div class="win-content">
            <!-- Help content here -->
        </div>
    </div>
    <!-- ENDTEMPLATE -->
</body>
</html>

Remarque Par défaut, ce menu volant sera "étroit" (346 pixels) de largeur. Définissez data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" pour créer un menu volant large (646 pixels).

Le code suivant traite le menu volant de paramètres et remplit SettingsPane en JavaScript. Appelez cette fonction quand vous activez votre application.

function initializeSettings() {
    // Initialize Settings flyout(s) and WinJS controls.
    WinJS.UI.processAll();
    
    // Populate Settings pane and tie commands to Settings flyouts.
    WinJS.Application.onsettings = function (e) {
        e.detail.applicationcommands = {
            "helpDiv": { href: "HelpUI.html", title: "Help"}
        };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }
    WinJS.Application.start();
}

Remarque Cette fonction doit être appelée après l’initialisation du modèle DOM. Toutefois, ne vous souciez pas de l’initialisation du modèle DOM si vous appelez initializeSettings à partir de la fonction onactivated ; l’événement activated se produit après l’événement DOMContentLoaded. Pour plus d’informations, voir Optimisation du cycle de vie d’une application (applications du Windows Store en JavaScript et HTML).

Récapitulatif et étapes suivantes

Dans ce didacticiel de démarrage rapide, vous avez appris à ajouter une aide pour l’application au volet Paramètres à l’aide de code HTML et de la Bibliothèque Windows pour JavaScript.

Ensuite, vous pouvez apprendre à inclure de l’aide en ligne dans votre page d’aide à l’aide d’iframes.

Comment inclure du contenu en ligne dans votre aide