Getting started with Windows 7 Gadgets
Written by Ian Elliot   
Monday, 22 August 2011
Article Index
Getting started with Windows 7 Gadgets
Going further
Debugging your gadget
Countdown gadget
Gadget HTML
Page 4 of 5

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.gadget

Store within it the basic AWTY.html file:

<html>
 <head>
  <title>AWTY</title>
  <script>System.Gadget.settingsUI=
                       "settings.html";
</script>
</head>
<body style="width:130; height:50 " >
</body>
</html>

This just sets the size of the gadget and specifies the settings page. A basic an XML manifest is 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.

 

datasetting

The date Settings window

 

Banner
Last Updated ( Monday, 22 August 2011 )