In my previous post I talked about Windows 8 JavaScript Metro App Basics, and some getting started with the new Metro Apps.

In order to help you get inside Windows 8 Metro Apps I’ll start writing on specific features in Metro Apps, starting from Settings.

As you build your Metro App you probably need to let the user to change some settings in the application, you don’t need to write any things special for that because Win8 comes with integrated Settings Pane allow you to add your own settings.

Download Demo Project

This is a very simple task, just define your settings as Pages, for example:

1. Help Page
2. About
3. Dummy 1
4. etc…

(Remember – Each page should have it’s own CSS and JS file, don’t be lazy!)

before we can get started you need to build new JavaScript application, the second part is getting inside the default.js file and register to onsettings event:

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.
                             Activation.ActivationKind.launch) {
      WinJS.UI.processAll();
      // app.addEventListener("settings", function (e) { Load Settings });
      // OR       
      app.onsettings = loadSettings;
    }
};

I’ve created a new folder in my project called – “Settings”, inside I’ve create 2 pages – Help and About.

Now, you need to register those pages to the application onsettings event, and make sure to use the flyout control to populate those setting.

function loadSettings(e) {
    e.detail.applicationcommands =
    {
        "Help":
            {
                title: "Help",
                href: "/Settings/Help.html"
            },
        "About":
            {
                title: "About Me",
                href: "/Settings/About.html"
            }
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
}

Now, how can I see my settings? There are three ways to see them:

1. User perform a proper gesture to open the setting page.
   
2. Call the Setting Pane using SettingsPane
   Windows.UI.ApplicationSettings.SettingsPane.show();
   
3. Call specific page using SettingsFlyout  (using id and path)
   WinJS.UI.SettingsFlyout.showSettings("Help", "/Settings/Help.html");

document.querySelector("#btnShowSettings").addEventListener
("click", function (e) {
    Windows.UI.ApplicationSettings.SettingsPane.show();
});
 
document.querySelector("#btnHelp").addEventListener("click", function () {
    WinJS.UI.SettingsFlyout.showSettings("Help", "/Settings/Help.html");
});
 
document.querySelector("#btnAbout").addEventListener("click", function () {
    WinJS.UI.SettingsFlyout.showSettings("About", "/Settings/About.html");
});

Download Demo Project