Continuing with Part 10 of building WinRT applications with HTML and JavaScript.  You can find earlier installments at their respective links: Part 1 – Part 2 -  Part 3- Part 4- Part 5- Part 6- Part 7- Part 8- Part 9. If you are interested in the source code for the TweetScan application, you can get it off of GitHub.  Make sure you sign up for How to develop a Windows 8 app in 30 days from Generation App.

Get video here.

Our sample app, TweetScan, defaults to using #Windows8 as the default search term when you launch the application from the Start page.  Part 8 showed how we could start with a new search term by integrating with the Search contract, but what about setting a new default search team from the Start page.  Clearly, we need a way to specify settings for our application.

Windows 8 provides an integrated Settings experience via the Charms bar that should be used by all applications.  When a user opens the Charms bar, they will see the Setting charm at the bottom of the bar.  Clicking on the Settings charm opens the Settings Flyout.  Without any customization, the settings flyout only displays an option for viewing the application’s permission set.  We can update the settings flyout to display custom options that we can use to provide a place for users to change settings for our application.

We hook our application into the settings flyout with the following code inside the activated event handler inside default.js

WinJS.Application.onsettings = function (e) {

   e.detail.applicationcommands = 

      { "preferences": { title: "Preferences", href: "/pages/settings/preferences.html" } };

   WinJS.UI.SettingsFlyout.populateSettings(e);

};

This registers an entry on the settings flyout that will show up as a link called Preferences.  When someone clicks that link, it will open preferences.html in the settings flyout.  You can specify more than one entry in the flyout by adding additional applications commands.

Prefences.html will contain all of the markup for a settings.

<div data-win-control="WinJS.UI.SettingsFlyout" 

       data-win-options="{settingsCommandId:'preferences', width:'narrow'}">

        <div class="win-ui-dark win-header">

               <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>

               <div class="win-label">Preferences</div>

        </div>                

        <div class="win-content ">

          <div class="win-settings-section">

              <h3>Default Search Tag:</h3>

              <input id="tag" type="text">

              <button id="save" type="button">Save</button>          

          </div>

     </div>

</div>

It’s a very simple example – a text box to take the new default search tag and a button to commit the changes.  Not that the root <div> is a WinJS control – WinJS.UI.SettingsFlyout

In preferences.js, loaded by preferences.html when it is displayed in the settings flyout, the following code is added to the page’s ready event handler:

 var defaultTag = Windows.Storage.ApplicationData.current.roamingSettings.values["tag"];

if (defaultTag === undefined)

    defaultTag = "Windows8";

tag.value = defaultTag;

 save.onclick = function (e) {

    Windows.Storage.ApplicationData.current.roamingSettings.values["tag"] = tag.value;

Essentially, we check the roaming settings for a tag value (what the video for a more in-depth discussion of roamingSettings, please see the video).  If we have one, we set the text box with the tag value, otherwise we default to “Windows8”.  If the user click’s the save button, we update the setting value.

In home.js, we update the ready event handler to check for a default search setting.

var tag = Windows.Storage.ApplicationData.current.roamingSetting.values["tag"];

if (tag === undefined)

     tag = "Windows8";