Como confirmar configurações instantaneamente

  • Artigo

[ 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]

Nos aplicativos da Windows Store, todas as configurações são aplicadas assim que o usuário altera seus valores. Esse modelo é importante porque o usuário pode guiá-lo pela confirmação instantânea de configurações usando o submenu Configurações do WinJS e os dados de aplicativo locais.

Pré-requisitos

Leias as Diretrizes para configuração de aplicativos.

Adicionar um submenu Configurações ao botão Configurações

Para saber mais detalhes sobre como adicionar um submenu Configurações, veja Guia de início rápido: adicione configurações de aplicativos usando a Biblioteca do Windows para JavaScript. Veja um resumo a seguir.

Defina o HTML do submenu Configurações:

<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>

Anexe o submenu Configurações ao botão Configurações:

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

Adicione controles ao submenu

Neste exemplo, estamos adicionando um controle de alternância e um controle de seleção ao submenu Configurações. Esses são dois dos controles mais comuns para configurações.

<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>

Observação  

  • Adicionamos uma opção de evento onchange ao data-win-options de settingsToggle. Isso registra o evento onchange para o controle ToggleSwitch. Para saber mais, veja Diretrizes de botões de alternância.
  • As configurações são encapsuladas em classes CSS win-settings-section e usam os elementos recomendados para obter o estilo determinado pelas diretrizes de configurações (veja Diretrizes de configuração de aplicativos).

 

Inicialize os controles a partir do repositório de dados local do aplicativo

Neste exemplo, usamos o repositório local Application data. Sempre que o submenu Configurações for invocado pelo usuário, leremos os valores dos dados de aplicativo para garantir que os controles da interface do usuário reflitam os valores mais recentes.

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

Observação  

  • A inicialização dos controles deve ocorrer após o carregamento de DOM e a inicialização dos controles do WinJS. Certifique-se disso. Se você usar um submenu Configurações definido em uma página HTML própria, isso poderá exigir uma chamada ao método ready do controle de páginas, para verificar se o submenu Configurações está pronto para uso.
  • Neste exemplo, usamos o repositório local de dados de aplicativo. Você pode usar o repositório de dados de aplicativo de roaming para garantir que as configurações sejam sincronizadas automaticamente. Para saber mais, veja Diretrizes de dados de aplicativo de roaming .

 

Manipule eventos de alteração nos controles de configurações

É nesse momento que a confirmação instantânea realmente acontece. Quando o usuário alterar os valores associados ao controle, gravamos imediatamente o novo valor no repositório de dados do aplicativo. Isso é feito no manipulador de eventos onchange associado ao controle.

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

Resumo

Neste guia de início rápido, você aprendeu a confirmar atualizações de configurações instantaneamente.