Guida introduttiva: Aggiunta di impostazioni app con la libreria Windows per JavaScript

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 i passaggi necessari per implementare il contratto impostazioni usando HTML e la classe SettingsFlyout per la libreria Windows per JavaScript.

Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app, dall'inizio alla fine: Interfaccia utente delle app di Windows Store, dall'inizio alla fine

Introduzione

Nell'esempio seguente definirai due riquadri a comparsa di impostazioni, Defaults e Help, in due file HTML distinti. Per elaborare i riquadri a comparsa di impostazioni e popolare il riquadro delle impostazioni, userai JavaScript.

Prerequisiti

Leggi le Linee guida per le impostazioni dell'app.

1. Creare un'app vuota

Crea un'app vuota "Hello World" come illustrato in Creare un'app "Hello, world". Dovrai completare solo i promi due passaggi:

Creare un nuovo progetto in Visual Studio.
Avviare l'app.

2. Definire il riquadro a comparsa Impostazioni predefinite

In Visual Studio, crea un file HTML denominato DefaultSettings.html:

Nel riquadro Esplora soluzioni, sotto la soluzione "HelloWorld", fai clic con il pulsante destro del mouse sul progetto HelloWorld.
Seleziona Aggiungi, Nuova cartella.
Assegna alla nuova cartella il nome "html".
Fai clic con il pulsante destro del mouse sulla cartella e scegli Aggiungi, Nuovo file HTML
Seleziona Pagina HTML, immetti il nome "DefaultSettings.html" e fai clic su Aggiungi.

Copia quanto segue e incollalo sopra il contenuto del nuovo file.


<!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>

3. Definire il riquadro a comparsa Help

Crea un file HTML aggiuntivo denominato HelpUI.html nella cartella "html".

Copia quanto segue e incollalo sopra il contenuto del nuovo file.

<!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. Popolare il riquadro delle impostazioni

Elabora il riquadro a comparsa delle impostazioni e popolalo aggiungendo il seguente JavaScript in default.js. Posiziona il nuovo codice nella funzione onactivated in modo che venga eseguito dopo l'inizializzazione di 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

        }
    };