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 :

About these ads
Tagged with: ,

6 Responses

Subscribe to comments with RSS.

  1. mark coyle said, on 28 June 2009 at 11:54 am

    great site a very helpful informations.thamx

  2. [...] Exploring Windows Desktop Gadgets #4 – flyouts [...]

  3. Ali BaderEddin said, on 7 June 2010 at 12:19 am

    Nice work!

  4. francisco said, on 7 March 2011 at 4:50 am

    Hey… i was wondering… is it possible to specify 2 files for a flyout… i mean i already have my flyout working… it shows the minute you click on the button. But… my gadget has three buttons and i would like to trigger three different buttons depending on which button you click… my guess is that is possible but i just don’t know how yet… anyone can help me a little bit?
    THANK YOU

  5. Simon Stewart said, on 3 August 2011 at 1:46 pm

    Great series of posts.
    The last demo download returns a “forbidden” page though.

  6. Fawn said, on 10 May 2013 at 4:25 am

    Hello there! This is kind of off topic but I need some advice from an
    established blog. Is it very difficult to set up
    your own blog? I’m not very techincal but I can figure things out pretty fast. I’m
    thinking about creating my own but I’m not sure where to begin. Do you have any ideas or suggestions? Appreciate it


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: