|
Get Down and Glitzy With Gadgets (Continued)
Next up, for example, I'll show you how to build a weather gadget that displays the current temperature, the name of the city, and the date/time that the data was received. You can find several weather-related gadgets online already, but this sample gadget acquaints you with some more advanced script code, timers, and the processes of accessing data feeds, so it's a good example to work with.
First, create a folder called myweather.gadget that holds your myweather.xml file and the html script files. You must modify the gadget.xml file to point to a new html file and adapt the code in Listing 1 for this.
Two things happen as a gadget gets more complex. First, you have to create more markup. Second, you get to write more script code. As is often the case when programming, it's better to break code up into manageable pieces as your gadget files get more complex. I've seen many samples so far that embed all the gadget's script code in script tags in the HTML file. This works, but it's difficult to manage as time goes on. Adding a reference to a script file in your gadget is as simple as adding a line in the <head> section of the HTML file.
<script language="javascript" src="js/weather.js"
type="text/javascript"></script>
Next, add your script to this file, keeping your layout markup separate from your code, just as you do with ASP's code-behind model. The rest of the markup displays the data in your gadget:
<body onload="init()">
<g:background id="background" style=
"position:absolute;z-index:-1">
</g:background>
<div id="wrapper">
<div>
<div id="currentTemp"></div>
</div>
<div>
<div id="city"></div>
</div>
<div id="forcastHigh"></div>
<div id="symbol">
<img id="symbolImage" src=""
width="60" height="60" />
</div>
</div>
</body>
You specify each of the gadget's core attributes (tags)—current temperature, city name, and forecast high temperature—in the file's div tags. You populate the layout tags with the code in your script file, which contains all of the gadget's functionality. You begin writing the script file with the init function:
function init()
{
System.Gadget.settingsUI = "settings.html";
System.Gadget.Flyout.file = "flyout.html";
document.body.style.width="136px";
document.body.style.height="98px";
background.style.width = "136px";
background.style.height = "98px";
background.src = "url(images/back.png)";
window.setInterval(refreshGadget, 60000);
refreshGadget();
}
You can see straight away that there exists a Gadget namespace, and that this namespace gives you the ability to make your gadget do something and look a certain way.
Note how you use the attributes of the document to set details about your gadget UI. This code sets the overall document size, as well as the background size and a background image. Next, you set a timer to refresh your gadget every 60000 milliseconds (1 minute). Once the gadget is setup, you need to get the data and populate your UI (Listing 2).
Back to top
|