|Getting started with Windows 7 Gadgets|
|Written by Ian Elliot|
|Monday, 22 August 2011|
Page 5 of 5
The main window
The main Gadget HTML is fairly simple but with the addition of two new features - some date manipulation and an auto-refresh. The first thing we need to do is to set up the Settings window:
To make the Gadget auto-update we need to make use of the main window's Timer function. This can be set to run a specified function at a set interval, repeatedly, or just once. The window onload event handler is a good place to set up the timer:
This specifies that the getTime() function should be called every 10,000 milliseconds i.e. every 10 seconds. You can adjust the refresh time to suit your particular application. Although not used in this Gadget, the setInterval function returns a code that identifies the timer that has been created. This code can be used by other functions to start, stop and change the time interval so it's worth storing in a global variable - in this case it's stored in Timer.
The getTime function does the actual work of retrieving the target date, retrieving the current date, finding the difference between the two and then displaying a reasonably formatted display of the result.
Retrieving the target date is easy:
We only want to do any work if the target has been defined by the user:
var d=new Date(Event);
Later on we are going to also need a string formatted as a simple date i.e. dd/mm/yyy and this can be constructed using the date object:
Getting the current date is just a matter of using the default date object constructor:
var Now=new Date();
To convert this to number of days we divide by 1000 to give seconds, 60 to give minutes, 60 to give hours and finally by 24 to give days:
Notice this gives a result that is in days and fractional days. If you want to convert to days and hours, say, then you would need to truncate the result to an integer and convert the fractional day into hours, minutes and seconds. Not difficult but potentially confusing. In this example we simply round the result to six significant digits:
In this case the target date and the number of days to the target are separated by a line break. You could include additional HTML formatting tags such as <b> or <h1> etc. to make the text stand out.
Finally all that remains is the body of the page:
<body style="width:130; height:150">
You can see the pair of <div> tags with the id Display defining where the date information will appear on the page along with some additional text and formatting. It really is this simple.
The complete listing is:
As long as you have stored everything in the correct directory and given everything the correct names you should now be able to load your gadget, set a target date and watch as the countdown proceeds. Of course there is lots of scope for making the user interface look more exciting - a background picture, an icon and some colour would make an immediate impression - but this is just standard web page design.
Notice that you can use the debug window function to find out what is happening within timer interrupts but you have to be careful because the debug window will be recreated each time the event handler is called and this can be very confusing.
As long as you know about HTML, the DOM and scripting then the only thing you need to concentrate on is the new API. It is worth mentioning, however, that many of the Windows scripting APIs and ActiveX objects are still available for you to use and you shouldn't forget about old favourites such as the WMI API. You also need to think in terms of Ajax and the HTTPRequest object to see how you might go about downloading live data from the Internet.
The new API introduces many useful new objects and functions but these are mainly about giving a web page script access to the local machine - much of the work of a Gadget is achieved using nothing really new.
Coming soon: Building a timer gadget
|Last Updated ( Monday, 22 August 2011 )|