Guia de início rápido: adicionando configurações de aplicativos usando a Biblioteca do Windows para JavaScript

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Este guia de início rápido lhe guia pela implementação do contrato de Configurações usando HTML e a classe SettingsFlyout para a Biblioteca do Windows para JavaScript.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim: Interface do usuário de aplicativo da Windows Store, do início ao fim

Introdução

No exemplo a seguir, você vai definir dois submenus Configurações, Padrão e Ajuda, em dois arquivos HTML separados. Você vai processar os submenus Configurações e preencher o painel Configurações usando JavaScript.

Pré-requisitos

Leias as Diretrizes para configuração de aplicativos.

1. Criando um aplicativo em branco

Crie um aplicativo em branco "Olá Mundo" conforme descrito em Criar um aplicativo "Olá, Mundo". É necessário concluir somente as duas primeiras etapas:

Crie um novo projeto no Visual Studio.
Inicie o aplicativo.

2. Definir o submenus Configurações Padrão

Ainda no Visual Studio, crie um arquivo HTML denominado DefaultSettings.html:

No painel Gerenciador de soluções, sob a solução "HelloWorld", clique com o botão direito do mouse no projeto HelloWorld.
Selecione Adicionar, Nova pasta.
Dê um nome para a nova pasta "html".
Clique com o botão direito do mouse na pasta e selecione Adicionar, Novo Arquivo HTML....
Selecione Página HTML, insira o nome "DefaultSettings.html" e clique em Adicionar.

Copie o seguinte e cole sobre o conteúdo do novo arquivo.


<!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. Definir o submenu Ajuda

Crie um arquivo HTML adicional denominado HelpUI.html sob a pasta "html".

Copie o seguinte e cole sobre o conteúdo do novo arquivo.

<!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. Popular o painel Configurações

Processe o submenu Configurações e preencha o painel Configurações adicionando JavaScript em default.js. Coloque o novo código dentro da função onactivated de forma que ele executará depois de seu DOM ser inicializado.


    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

        }
    };