Sharovatov’s Weblog

Exploring Windows Desktop Gadgets #3 – settings storage

Posted in IE8, javascript, widgets, windows 7 by sharovatov on 29 May 2009

This is the third post in Exploring Windows Desktop Gadgets series and it will be devoted to improving our comments feed reader gadget by adding settings storage functionality.

Settings storage theory

Any desktop program has its own settings storage (ini files, xml files, etc.) or uses a global OS storage (registry).

But in web-applications everything’s different – part of the functionality is provided by client (browser) and another part – by the server. Although it’s dead easy to store data on the server, on the client-side you can’t get access neither to file system nor to registry. (You actually can in IE, but this will require ActiveX scripting and therefore will ask user for an explicit permission.)

Until very recent DOM Storage specification draft, in most browsers you could only use cookies for storing some data on client side. However, IE5 introduced support for true client-side only storage – DOM Storage predecessor – userData. So it took almost eight years for the whole browsers industry to define and support similar client-side storage approach. And right at the time as DOM Storage is being drafted by W3C, it gets support in IE8.

The reason I’m telling you about DOM Storage in IE8 is that I have a strong feeling that this DOM Storage is used by Gadgets Platform to allow storing settings data for each gadget.

Settings storage practice

Settings dialog is a modal window which opens on top of your gadget. As it’s modal, the only way you can close it is to press OK or CANCEL button in its UI. Similarly to the gadget itself, settings dialog is a HTML page displayed by MSHTML.

As it would be useful to have comments feed URL and refresh frequency configurable, this is what I’ll add to my gadget:

image

In the settings dialog only area outlined in red is actually a HTML file, title and OK/CANCEL buttons are provided by Gadgets Platform:

image

To add the settings dialog to our gadget we’ll have to create a HTML file, let’s call it “settings.html”. To save comments feed URL and refresh frequency, we only need two fields and couple of labels. This is what I came up with.

If  you look at the JS code, you’ll see that it does two things:

  1. calls System.Gadget.Settings.read function to retrieve data from the Gadget settings storage
  2. defines a handler for System.Gadget.onSettingsClosing event

There’s a complete reference of Gadget platform events and properties on MSDN, but for our simple case it’s enough to say that System.Gadget.Settings.read reads object from the storage by its name, System.Gadget.Settings.write writes object to the storage with its name and System.Gadget.onSettingsClosing event fires when the settings dialog is closing. Settings store is separate for each gadget so don’t be afraid that your settings names can be accessed from other gadgets.

So in the window.onload handler of settings.html I try to get the data from the storage and set inputs values accordingly, and when the gadget is closing, I check if OK was pressed (e.closeAction == e.Action.commit) and if so, save inputs values into the storage. Dead easy.

Now we have to attach settings.html page to our gadget. This is done by adding the following javascript code to main.html file:

System.Gadget.settingsUI = "settings.html";

Now our Gadget will show this button in the control area:

image

And if you click on it, you’ll see your settings.html page rendered in a nice UI:

image

So now we have a settings dialog that reads and writes data from the Gadget settings store.  What we also need to do is to make our main.html read comments feed URL and refresh frequency from settings store as well. If you look at this javascript, you’ll see how it’s changed from the previous version. Basically, I just did the following:

  1. rss.js now doens’t have blog comments feed URL and refresh frequency hardcoded, instead, it reads these values from settings store:
    window.onload = function(){
    
      //read data from storage
      var data = getDataFromStorage();
    
      if ("" != data.url && 
          "" != data.frequency && 
          /^(\d*)(\.?)(\d*)$/.match(data.frequency)) startLoop(data);
      else document.body.innerHTML = "<b>Please make sure you"+
                                    "configured everything properly</b>";
    
    };

  2. System.Gadget.onSettingsClosed event handler is used to restart main loop with new settings:

    System.Gadget.onSettingsClosed = function(){
      var data = getDataFromStorage();
      startLoop(data);
    };

  3. And startLoop function has been rewritten to allow only one main loop (but that’s pretty irrelevant to Gadgets platform):

    var startLoop = function(data){
       //clear existing interval (if present)
       if ("undefined" != typeof arguments.callee.intervalHandler)
         window.clearInterval(arguments.callee.intervalHandler);
     
       //retrieve feed again
       getRSS(data.url);
     
       //set new main loop
       arguments.callee.intervalHandler = window.setInterval(
         function(){ getRSS(data.url); }, data.frequency * 1000
       );
    };

And here we go – gadget’s ready :)

Save it as rss-comments.gadget to your computer and install it – you will be able to set comments feed URL (so you can start using it to watch comments on your own blog) and refresh frequency in seconds.

In the next posts of this series I will cover flyouts, make the gadget look really slick with UI enhancements Gadget platform provides, show how debugging gadgets can be really effective and dive into more details of the Gadgets platform. Stay tuned for more interesting stuff!

Share :

About these ads
Tagged with: ,

3 Responses

Subscribe to comments with RSS.

  1. […] is a separate HTML page which you attach to your gadget similarly to settings window – by specifying the following: System.Gadget.Flyout.file = […]

  2. […] is a separate HTML page which you attach to your gadget similarly to settings window – by specifying the following: System.Gadget.Flyout.file = […]

  3. […] Exploring Windows Desktop Gadgets #3 – settings storage […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: