Sharovatov’s Weblog

Exploring Windows Desktop Gadgets #4 – flyouts

Posted in IE8, javascript, windows 7 by sharovatov on 1 June 2009

This is the fourth post in "Exploring Windows Gadgets” series. In this post I’ll tell you about the flyouts.

As it’s practical to have small gadgets which don’t take much of screen space, it’s not possible to display much information on them. That’s why Gadget Platform provides a way to add a flyout object to your gadget.

Flyout theory

In theory, flyout is supposed to present additional or detailed information about anything you choose.

The great example of flyout use case is standard Windows 7 Stocks gadget – it shows basic stocks rates information in the main window and the if you click on the stock rate you’re interested, MSN Money chart for this stock rate is shown in a flyout. Here’s how it looks:

image

Flyout is a separate HTML page which you attach to your gadget similarly to settings window – by specifying the following:

System.Gadget.Flyout.file = 'flyout.html';

Another difference from settings dialog is that settings dialog is only accessible by clicking on a options button:

image

and flyout is shown/hidden programmatically by setting its show property to true/false:

//show flyout
System.Gadget.Flyout.show = true;

When you set show to true, flyout html will be rendered and its window will be automatically positioned depending on the content size and gadget’s position.

Flyout provides two events – System.Gadget.Flyout.onShow which is fired when the flyout is shown and System.Gadget.Flyout.onHide which is fired when the flyout is closed.

To set flyout content to something meaningful, you have to get access to flyout’s document from your gadget main window javascript. This is achieved by using System.Gadget.Flyout.document property – but the call to it will throw an exception if flyout is hidden, so make sure you either check System.Gadget.Flyout.show property for true or wrap the code which uses System.Gadget.Flyout.document in try-catch block.

Note that you can also access main gadget page from the flyout by using System.Gadget.document property which is always available.

Enough theory, let’s modify our Gadget to show only comments titles on the main page and render a flyout with comment’s content when title is clicked.

Practice

So here’s what I did:

  1. created flyout.html file
  2. referenced it as System.Gadget.Flyout.file = 'flyout.html'; in rss.js
  3. modified displayRSS function to store current comment object in paragraph’s expando property
  4. added toggleFlyout function to the rss.js file which passes the comment object from the <p>’s expando property to System.Gadget.Flyout.document and displays the flyout

The resulting files and the compressed gadget are here.

In the next posts I’ll show what styling options we’ve got in Gadgets Platform, will proceed talking about gadgets security and talk about advanced javascript techniques that can be used in gadgets.

Stay tuned! :)

Share :

Advertisements
Tagged with: ,