Vista Gadgets
Written by Ian Elliot   
Sunday, 28 June 2009
Article Index
Vista Gadgets
Second Gadget
A debug flyout
Are we there yet?
Date setting
Advanced gadgets
Page 3 of 6

A debug flyout

Unless you have a full copy of Visual Studio debugging a gadget can be difficult because the alert function has been disabled and you can't open new windows. In addition to the settings window, a gadget can open another type of window - the flyout. The gadget can have as many flyout windows as it needs but only one can be on display at any given time. To make debugging easier, and to provide an example of using the flyout, let's create a debug flyout. First we need an HTML page to be used as the basis for the flyout:

<html>
 <head>
 </head>
 <body style="width: 130; height: 75">
   Debug Message
   <br />
   <div id="flyoutContent"></div>
   <input id="Button1" type="button"
     value="OK"
     onclick="System.Gadget.Flyout.
         show=false;" />
 </body>
</html>

The <div> tag is going to be used to receive the text we want to display. The button is used to dismiss the flyout and simply sets its show property to false. The big difference between the Settings and Flyout windows are that Settings is modal and doesn't vanish until the user clicks on OK or Cancel but the Flyout vanishes as soon as it loses focus.

The Gadget HTML starts out in the usual way:

<html>
 <head>
  <title>Debug</title>
  <script>window.onload=function()
  {
   debug("hello debug world");
  }

It simply calls the debug function to display the message. The debug function, which can be added to any Gadget you are trying to debug, is fairly simple. First it sets the file that contains the HTML we want to use for the flyout and then sets the show property to true:

function debug(message)
{
System.Gadget.Flyout.File="debug.html";
System.Gadget.Flyout.show=true;

At this point the flyout starts to load. To start making use of it we set its onShow handler to a function that we are about to write:

System.Gadget.Flyout.onShow = showFlyout;

We retrieve its document object and save the debug message in local variables:

var oFlyDoc = System.Gadget.Flyout.document;
var text=message

The showFlyout function is nested within the debug function and this has the huge advantage that when it is triggered by the onShow event it has access to the variables defined in the debug function. This is a sophisticated JavaScript feature called "closure" and it's very useful in situations like this:

   function showFlyout()
   {
    oFlyDoc.getElementById('flyoutContent')
       .innerText =text;
   }
  }
  </script>
 </head>
 <body style="width:130; height:50">
 </body>
</html>

If you try this out you should see the flyout appear and display the appropriate message. If you don't, try it a second time because for reasons that aren't clear sometimes the onload event isn't triggered when you reload a gadget.

fig4
The debug flyout in action

<ASIN: 0470043946>
Last Updated ( Sunday, 28 June 2009 )