Inicio rápido: agregar la configuración de una aplicación mediante la biblioteca de Windows para JavaScript

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 recorren los pasos necesarios para implementar el contrato de Configuración mediante HTML y la clase SettingsFlyout para la biblioteca de Windows para JavaScript.

Consulta esta característica como parte de nuestra serie Características de aplicaciones, de principio a fin: Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Presentación

En el siguiente ejemplo definirás dos controles flotantes de configuración, valores predeterminados y ayuda, en dos archivos HTML independientes. Procesarás los controles flotantes de configuración y rellenarás el panel de configuración con JavaScript.

Requisitos previos

Lee las instrucciones para usar una configuración de aplicación.

1. Crear una aplicación vacía

Crea una aplicación vacía "Hello World" tal como se describe en Crear una aplicación "Hello, world". Debes completar únicamente los primeros dos pasos:

Crear un nuevo proyecto en Visual Studio.
Iniciar la aplicación.

2. Definir el control flotante Configuración predeterminado

Siguiendo en Visual Studio, crea un archivo HTML denominado DefaultSettings.html:

En el panel del Explorador de soluciones, en la solución "HelloWorld", haz clic con el botón derecho en el proyecto HelloWorld.
Selecciona Agregar, Nueva carpeta.
Asigna el nombre "html" a la nueva carpeta.
Haz clic con el botón derecho en la carpeta y selecciona Agregar, Nuevo archivo HTML....
Selecciona Página HTML, escribe el nombre "DefaultSettings.html" y haz clic en Agregar.

Copia lo siguiente y pégalo sobre el contenido del nuevo archivo.


<!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 el control flotante Ayuda

Crea un archivo HTML adicional denominado HelpUI.html en la carpeta "html".

Copia lo siguiente y pégalo sobre el contenido del nuevo archivo.

<!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. Rellenar el panel de configuración

Procesa el control flotante Configuración y rellena el panel de configuración agregando el siguiente JavaScript en default.js. Coloca el nuevo código dentro de la función onactivated de modo que se ejecute después de que tu DOM se inicialice.


    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

        }
    };