App settings to be stored into roaming data store

Question

I have implemented an entry in SettingsFlyout control for settings pane. The page itself contains a dropdown. Whatever option user select from this dropdown need to be stored in roaming data store. Obviously this stored data need to be retrieved whenever user gets to this page in settings pane. I am not sure what’s the best place to write this code for data stage and retrieval? I see that SettingsFlyout object has onafterhide, onaftershow, onbeforehide and onbeforeshow events. Should any of these be used for this purpose?

Answer 1

[Windows.Storage.ApplicationData.Current.localSettings] (http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.applicationdata.aspx) or roamingSettings provide the builtin support for getting/setting setting key-value pair. It also handles the persisting to a file in application data folder. It also does required batching as per documentation.

you can find the reference code in the application data sample

var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
function settingsWriteSetting() { 
    roamingSettings.values['my setting'] = 'my setting value'; 
} 

regards, events on the flyout - there events can be used to take some action before/after flyout is hidden - in the overall user flow. For example - I have once created a Promise around a signin flyout. afterhide was used to call error callback for the promise, with error as canceled.

Answer 2

Settings changed in a settings flyout should take effect as soon as the user makes the change rather than waiting until the flyout is hidden. I'd suggest treating your flyout as a page control.

Assuming your settings flyout was defined in settings/mySettings.html, create a JavaScript file named settings/mySettings.js and reference it in the head of your settings page. Then add the following code into the script file.

(function () {
    "use strict";

    var page = WinJS.UI.Pages.define("/settings/mySettings.html", {
        ready: function (element, options) {
            // wire up event handlers for saving changes
            // setup initial state
        },
    });
})();

Just like any other page control, you add event handlers and initialize the page in the ready function. If you are familiar with the navigation app template, it is the same.