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 4 of 6

The "Are We There Yet" Gadget

A useful gadget that isn't already provided by default is an event countdown timer or an Are We There Yet (AWTY) Gadget. The user inputs a date and the gadget shows how much time is left before the date. It can be used as a birthday count down, holiday countdown, or a countdown to whatever the user considers to be important. Start a new Gadget by creating a folder called AWTY. Store within it the basic AWTY.html file:

<html>
 <head>
  <title>AWTYt</title>
  <script>System.Gadget.settingsUI=
       "settings.html";
  </script>
 </head>
 <body style="width:130; height:50 " >
 </body>
</html>
and an XML manifest called gadget.xml
<?xml version="1.0" encoding="utf-8" ?>
 <gadget>
  <name>AWTY</name>
  <version>1.0.0.0</version>
  <hosts>
   <host name="sidebar">
    <base type="HTML" 
      apiVersion="1.0.0"
      src="/AWTY.html" />
    <permissions>Full</permissions>
    <platform minPlatformVersion="1.0" />
   </host>
 </hosts>
</gadget>

The first part of the gadget that we have to implement is Settings.html which is where the user can set the date of the important event. This is very similar to the previous Settings HTML file but it now has three textboxes for day, month and year:

<html>
 <head>
  <script>
   window.onload=function()
   {
    var Event=System.Gadget.
         Settings.read("Event");
    var d=new Date(Event);
    Text1.value=d.getDate();
    Text2.value=d.getMonth()+1;
    Text3.value=d.getFullYear();
   }
   System.Gadget.onSettingsClosing =
    function(event)
   {
    if (event.closeAction ==
                event.Action.commit)
    {
     d=new Date(Text3.value,
        Text2.value-1,Text1.value);
     System.Gadget.Settings.
     write("Event",d);
    }
    event.cancel = false;
   }
  </script>
 </head>
 <body style="width:250; height:250">
   Enter your important date
  <br />
  Day
  <br />
  <input id="Text1" type="text" />
  <br />
  Month
  <br />
  <input id="Text2" type="text" />
  <br/>
  Year
 <br/>
  <input id="Text3" type="text" />
 </body>
</html>

The conversion from day, month and year to a Date object is via a standard constructor. It is then simply saved to an Event property ready to be retrieved and unpacked into day, month and year form whenever it is needed. You can see the unpacking process in action in the window onload event handler. Notice that the first time the Settings window is opened the date is undefined and all of the textboxes show NaN, i.e. Not a Number. You could fix this with a simple if statement.

fig5


<ASIN: 0672329689>

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