Comment valider des paramètres instantanément

  • Article

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Pour les applications du Windows Store, tous les paramètres sont appliqués dès que l’utilisateur en change les valeurs. Ce modèle est important car l’utilisateur peut vous guider dans la validation instantanée des paramètres à l’aide du menu volant Paramètres WinJS et des données d’application locales.

Prérequis

Lisez les recommandations pour les paramètres d’application.

Ajouter un menu volant Paramètres à l’icône Paramètres

Pour plus d’informations sur la manière d’ajouter un menu volant Paramètres, reportez-vous à Démarrage rapide : ajout de paramètres d’application à l’aide de la Bibliothèque Windows pour JavaScript. Mais en voici le résumé.

Définissez le code HTML pour votre menu volant Paramètres :

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

Liez votre menu volant Paramètres à l’icône Paramètres :

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

Ajouter des contrôles au menu volant

Dans cet exemple, nous ajoutons un contrôle de bascule et un contrôle de sélection à notre menu volant Paramètres. Il s’agit de deux des contrôles les plus courants pour les paramètres.

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

Remarque  

  • Nous avons ajouté une option d’événement onchange à data-win-options pour settingsToggle. Cela permet d’enregistrer l’événement onchange pour le contrôle ToggleSwitch. Pour plus d’informations, voir Recommandations pour les boutons bascule.
  • Les paramètres sont renvoyés dans des classes CSS win-settings-section et utilisent les éléments recommandés pour respecter le style en adéquation avec les recommandations concernant les paramètres (voir Recommandations concernant les paramètres d’application).

 

Initialiser les contrôles depuis le magasin de données d’application locales

Dans cet exemple, nous utilisons le magasin de données d’application locales. Chaque fois que le menu volant Paramètres est appelé par l’utilisateur, nous allons lire les valeurs à partir des données d’application afin de veiller à ce que les contrôles inclus dans l’interface utilisateur reflètent les dernières valeurs.

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

Remarque  

  • Vérifiez que cette initialisation des contrôles se produit après le chargement du DOM et l’initialisation des contrôles WinJS. En cas d’utilisation d’un menu volant Paramètres défini dans sa propre page HTML, un appel de la méthode de contrôle des pages peut être nécessaire pour veiller à ce que le menu volant Paramètres soit prêt à être utilisé.
  • Notez que dans cet exemple, nous utilisons le magasin de données d’application locales. Vous pourriez utiliser le magasin de données d’application itinérantes pour veiller à ce que les paramètres soient automatiquement transmis. Reportez-vous à Recommandations en matière de données d’application itinérantes pour plus d’informations.

 

Gérer les événements de modification apportée aux contrôles Paramètres

C’est là que se produit réellement la validation instantanée. Lorsque l’utilisateur modifie les valeurs associées au contrôle, nous écrivons immédiatement la nouvelle valeur dans le magasin de données d’application. Cela est effectué dans le gestionnaire d’événements onchange associé au contrôle.

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

Récapitulatif

Dans ce guide de démarrage rapide, vous avez appris à valider des mises à jour de paramètres instantanément.