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.
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:
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:
and flyout is shown/hidden programmatically by setting its show property to true/false:
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.
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.
So here’s what I did:
- created flyout.html file
- referenced it as
System.Gadget.Flyout.file = 'flyout.html';in rss.js
- modified displayRSS function to store current comment object in paragraph’s expando property
- added toggleFlyout function to the rss.js file which passes the comment object from the <p>’s expando property to
System.Gadget.Flyout.documentand displays the flyout
The resulting files and the compressed gadget are here.
Stay tuned! :)