Inicio rápido: agregar ayuda de la aplicación (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

En este inicio rápido se muestra cómo agregar un control flotante de Ayuda al panel de Configuración mediante HTML y el objeto SettingsFlyout para la biblioteca de Windows para JavaScript (WinJS). Para ver un control flotante de Ayuda en una aplicación completa, consulta la muestra de configuración de la aplicación.

En el ejemplo siguiente definirás el control flotante Configuración, llamado Ayuda, en un archivo HTML (HelpUI.html). Inicializarás el control flotante Configuración y rellenarás el panel de configuración con JavaScript.

¿Utilizas C#/Visual Basic/C++ y XAML? Consulta Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML).

Requisitos previos

Lee las directrices para ayuda de la aplicación y las directrices para la configuración de una aplicación.

Instrucciones

1. Define el control flotante de la Ayuda.

Crea un archivo HTML llamado "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 De manera predeterminada, este control flotante será "estrecho" (346 píxeles de ancho). Establece data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" para crear un control flotante ancho (646 píxeles).

2. Procesa el control flotante Configuración y rellena el panel de configuración.

El código siguiente procesa el control flotante Configuración y rellena el SettingsPane con JavaScript. Llama a esta función al activar la aplicación.

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 Esta función debe llamarse después de inicializar el DOM. Sin embargo, no te preocupes sobre la inicialización del DOM si invocas a initializeSettings mediante la función onactivated; el evento activated se producirá después del evento DOMContentLoaded. Más información en Optimizar el ciclo de vida de la aplicación (aplicaciones de la Tienda Windows con JavaScript y HTML).

Resumen y siguientes pasos

En este inicio rápido, aprendiste a añadir la ayuda de una aplicación al panel de Configuración mediante HTML y la biblioteca de Windows para JavaScript.

A continuación, aprenderás a incluir ayuda en pantalla en tu página de ayuda con iframes.

Cómo incluir contenido en línea en la ayuda