Guida introduttiva: Aggiunta della Guida dell'app (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Questa guida introduttiva illustra come aggiungere un riquadro a comparsa Guida al riquadro Impostazioni usando HTML e l'oggetto SettingsFlyout per la Libreria Windows per JavaScript (WinJS). Per visualizzare un riquadro a comparsa Guida in un'app completa, vedi Esempio di impostazioni dell'app.

Nell'esempio seguente definirai un riquadro a comparsa Impostazioni, denominato Guida, in un file HTML (HelpUI.html). Potrai quindi inizializzare il riquadro a comparsa Impostazioni e popolare il riquadro Impostazioni usando JavaScript.

Usi C#/Visual Basic/C++ e XAML? Vedi Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML).

Prerequisiti

Leggi le Linee guida per la Guida dell'app e le Linee guida per le impostazioni dell'app.

Istruzioni

1. Definisci il riquadro a comparsa Help.

Crea un file HTML denominato "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>

Nota Per impostazione predefinita, il riquadro a comparsa sarà "stretto", con una larghezza di 346 px. Imposta l'attributo data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" per creare un riquadro a comparsa largo (646 px).

2. Elabora il riquadro a comparsa di impostazioni e popola il riquadro delle impostazioni.

Il codice seguente elabora il riquadro a comparsa Impostazioni e popola il SettingsPane con JavaScript. Chiama questa funzione durante l'attivazione dell'app.

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();
}

Nota Chiama la funzione dopo l'inizializzazione di DOM. L'inizializzazione di DOM non è necessaria se chiami initializeSettings dalla funzione onactivated; l'evento activated si verifica dopo l'evento DOMContentLoaded. Per altre info, vedi Ottimizzazione del ciclo di vita dell'app (app di Windows Store scritte in JavaScript e HTML).

Riepilogo e passaggi successivi

In questa guida introduttiva abbiamo imparato ad aggiungere la Guida dell'app al riquadro delle impostazioni usando HTML e la Libreria Windows per JavaScript.

Ora puoi imparare a includere la Guida in linea nella pagina di Guida usando gli iframe.

Come includere contenuto online nella Guida