Confirmar la configuración al instante

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 el caso de las aplicaciones de la Tienda Windows, todas las configuraciones se aplican tan pronto como el usuario cambia los valores. Este modelo es importante porque el usuario puede confirmar la configuración al instante mediante el control flotante Configuración WinJS y los datos de la aplicación locales.

Requisitos previos

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

Agregar un control flotante Configuración al acceso a Configuración

Para obtener información detallada sobre cómo agregar un control flotante Configuración, consulta Inicio rápido: agregar la configuración de una aplicación mediante la biblioteca de Windows para JavaScript. Aquí hay un resumen.

Define el HTML para el control flotante Configuración:

<div aria-label="App Settings Flyout" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'settingsExample', width:'narrow'}">
<!-- Add the background color matching you app tile color to the Settings flyout header. -->
<!-- Use add the win-ui-dark class if the background color requires a white text  -->
<!-- Add the app small logo to the Settings flyout header                         -->
    <div class="win-header win-ui-light" style="background-color: #dbf9ff;">
        <button class="win-backbutton" onclick="WinJS.UI.SettingsFlyout.show()" type="button"></button>
     <div class="win-label">Example</div>
     <img alt="smalllogo" src="/images/smalllogo.png" style="height: 30px; width: 30px; position: absolute; right: 40px;"/>
    </div>
    <div class="win-content">
    <!—Your settings contents go here -->
    </div>
</div>

Conecta el control flotante Configuración con el acceso a Configuración:

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = {
        "settingsExample": { title: "Example" }
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

Agregar controles al control flotante

En este ejemplo, agregamos un control de alternancia y un control de selección al control flotante Configuración. Son los dos controles más comunes para la configuración.

<div class="win-content">
    <div class="win-settings-section">
        <h3>Example settings section</h3>
        <p>Description: toggle and select are common settings controls</p>
        <div id="settingsToggle" data-win-control="WinJS.UI.ToggleSwitch" 
             data-win-options="{title:'Example toggle switch', 
             onchange: settingsToggleChange}"></div>
    </div>
    <div class="win-settings-section">
        <h3>Select control</h3>
        <p>Select controls let users select an item from a set of text only items.</p>
        <label>Example select control</label>
        <select id="settingsSelect" aria-label="Example select control">
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
            <option value="3">Value 3</option>
            <option value="4">Value 4</option>
        </select>
    </div>
</div>

Nota

Agregamos una opción de evento OnChange a data-win-options para settingsToggle. Esto registra el evento OnChange para el control ToggleSwitch. Para obtener más información, consulta las directrices para modificadores para alternar.
La configuración se ajusta en las clases CSS de win-settings-section y usa los elementos recomendados para lograr un estilo alineado con las directrices de configuración (consulta las directrices para la configuración de una aplicación).

Inicializar los controles desde el almacén de datos de la aplicación local

En este ejemplo, usamos el almacén de datos de la aplicación local. Cada vez que el usuario invoca el control flotante Configuración, leemos los valores de los datos de la aplicación para asegurarnos de que los controles de la interfaz de usuario reflejen los valores más recientes.

function initSettingsControls() {
    // Initialize the toggle control using the current value of settingsToggleValue in the local state store
    var toggleControl = document.getElementById("settingsToggle").winControl;
    toggleControl.checked = (Windows.Storage.ApplicationData.current.localSettings.values["settingsToggleValue"] === "on");

    // Initialize the select control using the current value of settingsSelectValue in the locale state store
    var selectControl = document.getElementById("settingsSelect");
    var settingsSelectValue = Windows.Storage.ApplicationData.current.localSettings.values["settingsSelectValue"];
    for (var i = 0; i < selectControl.options.length; i++) {
        if (selectControl.options(i).value === settingsSelectValue) {
            selectControl.selectedIndex = i;
            break;
        }
    }

    // Add event listener for change event on select control
    selectControl.addEventListener("change", settingsSelectChange, false);
}

Nota

Asegúrate de que se produzca la inicialización de los controles después de que DOM se ha cargado y que se hayan inicializado los controles WinJS. Si usas un control flotante Configuración definido en su propia página HTML, es posible que debas realizar una llamada al método que determina si el control de la página está preparado para asegurarte de que el control flotante Configuración esté listo para usarse.
En este ejemplo, usamos el almacén de datos de la aplicación local. Puedes usar el almacén de datos de la aplicación de movilidad para asegurarte de que la configuración se movió automáticamente. Consulta las directrices para perfiles móviles de datos de la aplicación para obtener información detallada.

Controlar eventos de cambio en controles de Configuración

Aquí es donde se produce realmente la confirmación al instante. Cuando el usuario cambia los valores asociados con el control, inmediatamente escribimos el nuevo valor en el almacén de datos de la aplicación. Esto se realiza en el controlador de eventos OnChange asociado con el control.

function settingsToggleChange() {
    var toggleControl = document.getElementById("settingsToggle").winControl;
    // Write new value to the local state store
    Windows.Storage.ApplicationData.current.localSettings.values["settingsToggleValue"] = (toggleControl.checked ? "on" : "off");
}

// To protect against untrusted code execution, all functions are required 
// to be marked as supported for processing before they can be used inside 
// a data-win-options attribute in HTML markup.
WinJS.Utilities.markSupportedForProcessing(settingsToggleChange);

function settingsSelectChange(changedEvent) {
    // Write new value to the local state store
    Windows.Storage.ApplicationData.current.localSettings.values["settingsSelectValue"] = changedEvent.target.options.value;
}

Resumen

En este inicio rápido, aprendiste a confirmar actualizaciones para la configuración al instante.

Compartir a través de