Guia de início rápido: adicionar ajuda ao aplicativo (HTML)

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 mostra como adicionar um submenu de Ajuda no painel Configurações usando HTML e o objeto SettingsFlyout da Biblioteca do Windows para JavaScript (WinJS). Para ver um submenu de Ajuda em um aplicativo completo, veja o Exemplo de configurações do aplicativo.

No exemplo a seguir, você definirá um submenu Configurações, chamado de Ajuda, em um arquivo HTML (HelpUI.html). Você iniciará o submenu Configurações e preencherá o painel Configurações usando JavaScript.

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

Pré-requisitos

Leia as Diretrizes da ajuda do aplicativo e as Diretrizes de configurações de aplicativos.

Instruções

1. Defina o submenu Ajuda.

Crie um arquivo HTML nomeado "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>

Observação Por padrão, esse submenu será "estreito" (346px) em largura. Configure data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" para criar um submenu largo (646px).

2. Processe o submenu Configurações e preencha o painel Configurações.

O código a seguir processa o submenu Configurações e preenche o SettingsPane usando JavaScript. Chame essa função quando ativar seu aplicativo.

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

Observação Essa função deve ser chamada após a inicialização do DOM. Mas não se preocupe sobre a inicialização do DOM se você estiver chamando initializeSettings da função de onactivated; o evento activated ocorre depois do evento DOMContentLoaded. Para obter mais informações, veja Otimizando o ciclo de vida do seu aplicativo (aplicativos da Windows Store em JavaScript e HTML).