Démarrage rapide : ajout d’une aide à l’application (applications du Windows Store en JavaScript et HTML)

Cette rubrique de démarrage rapide vous guide dans la mise en œuvre d’une icône d’aide dans le volet Paramètres à l’aide de code HTML et de l’objet SettingsFlyout pour la Bibliothèque Windows pour JavaScript. Elle se base sur l’exemple de paramètres d’application.

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.

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

Objectif: Pour apprendre à ajouter une simple page d’aide dans votre application.

Prérequis

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

Durée de réalisation: 2 minutes.

Instructions

1. Définir le menu volant Help

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 the width to 'narrow' for a narrow Settings flyout. -->
        <!-- 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="{width:'wide'}">
            <div class="win-header" style="background-color:#dbf9ff">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" 
                    class="win-backbutton"></button>
                <div class="win-label">Help</div>
                <img src="images/smallTile.png" style="position: absolute; right: 40px;"/>
            </div>
            <div class="win-content">
                <!-- Help content here -->
            </div>
        </div>
        <!-- ENDTEMPLATE -->
    </body>
</html>


2. Traitez le menu volant des paramètres et remplissez le volet des paramètres.

Traitez le menu volant de paramètres et remplissez le volet de paramètres à l’aide de JavaScript. Ceci doit être fait après l’initialisation du modèle DOM.

Ajoutez une fonction pour traiter le panneau Paramètres.


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


Dans cette rubrique de démarrage rapide, vous avez appris à ajouter une aide pour l’application au volet Paramètres à l’aide de code HTML et de WinJS.

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

Rubriques associées

Exemple de paramètres d’application
Ajout de paramètres d’application
WinJS.UI.SettingsFlyout
Windows.UI.ApplicationSettings.SettingsPane

 

 

Afficher:
© 2014 Microsoft. Tous droits réservés.