|Number of votes:||1|
The architecture of a Windows Sidebar gadget is surprisingly simple, it’s a little browser window that you populate with a mini-site built on standard HTML, stuff we already know. Distribution is as simple as zipping the mini-site and changing the extension to .gadget, upon installation it gets extracted to C:\Users\<USERNAME>\appdata\local\microsoft\Windows Sidebar\Gadgets.
An easy way to test your gadget while developing is actually pointing Visual Studio to that directory during development.
The only requirement for a gadget is that it has the gadget.xml file in the root folder pointing out the actual HTML-file that will load upon startup. This XML file, which has a scheme defined by Microsoft, also includes meta data such as author and logo.
There are a lot of introductions to gadgets and Hello World-samples if you are interested so I’ll focus on describing in short terms how the EPiServer Feed Gadget works. The main functionality is toggling news items from an RSS feed, the items are clickable and opens up the web site in the flyout window. The design of the gadget was made to integrate with the current design of www.episerver.com. When you hover the gadget previous/forward-buttons are displayed to toggle news items manually.
var fm = new ActiveXObject("Microsoft.FeedsManager");
var feed = fm.GetFeedByUrl(rssFeedUrl);
Configuring the file for the settings dialog looks like this:
System.Gadget.settingsUI = "settings.htm";
The settings dialog is reached by clicking on the toolbox icon while hovering the gadget. Only the inner content in between title and buttons is your own HTML file settings.html, the rest is provided by Vista.
Here is a screen dump and startup code for the settings dialog:
Maybe not that obvious but the way you actually save changes is by listening to the event onSettingsClosing. Settings are read from the API and then put into the appropriate textboxes for the user interface. A typical initialization may look like this:
System.Gadget.onSettingsClosing = SettingsClosing;And the save routine looks something like this:
rssFeedUrl.value = System.Gadget.Settings.read(
rssFeedName.value = System.Gadget.Settings.read(
ifTo make sure the main gadget window detects changes in configuration(because it won’t be reloaded automatically even if looks like it does) we use a second event called onSettingsClosed and make sure we read any new changes from the settings API.
(event.closeAction == event.Action.commit)
If you see the “Loading..”-message while waiting for the site to load you are seeing the HTML file we initialize the IFRAME with. Sample code to show the flyout:
System.Gadget.Flyout.file =And here is what it looks like when displayed, you may notice that we switch background for the gadget to get clean transition to the flyout. We use the onHide event to change backround back when closed.
System.Gadget.Flyout.onHide = HidingFlyout;
That wraps up the walk-through of the EPiServer Feed gadget, feel free to modify it to integrate with your EPiServer site and download more samples from the Windows Live Gallery, just rename the files from .gadget to .zip and extract to get behind the scenes.
›› Windows RSS Platform API: http://msdn2.microsoft.com/en-us/library/ms684701.aspx
›› Windows SideBar API: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sidebar/sidebar/reference/refs.asp
›› Windows Live Gallery: http://gallery.live.com