Get Down and Glitzy With Gadgets (Continued)

This code attempts to get the data from a location parameter. If a valid location is returned, you assign it to your locationZip variable. If nothing (an empty string) is returned, then you set a default value for the parameter:

System.Gadget.onSettingsClosing = SettingsClosing;

function SettingsClosing(event) 
{
   if (event.closeAction==event.Action.commit) 
   {
      var variableName = locationZip.value;
      System.Gadget.Settings.write("location", variableName);
   }
   event.cancel=false;
}

In your settings form, create an onSettingClosing event on the gadget so it calls your SettingsClosing function. This function examines how it is being closed. This is analogous to checking for a DialogResult in a standard .NET application, where you want to determine whether a value is OK. Here, you check the closeAction to see whether the user wants to commit the changes. If so, you write the variable to your settings with the Settings.write command. Your settings are written to a file called Settings.ini file when you save them; this file sits just above the myweather.gadget folder. If you look at Settings.ini, you will see the settings not only for your own gadget, but also any other gadgets currently in the Sidebar. Once you save your setting location, it should be obvious how to load the value into your myweather.html file:

var location = "76110";
...
var currentSetting = 
   System.Gadget.Settings.read("location");
if (currentSetting != "")
   location = currentSetting;

You use the location variable to build the POST request to the RSS feed:

req.open("GET", "http://weather.yahooapis.com/
   forecastrss?p="+ location, false);

Displaying images on your gadget is also straightforward, but not without a couple of potential gotchas:

<g:background id="background" style=
   "position:absolute;z-index:-1"></g:background>

This line in the myweather.html file sets the main background image for the gadget. You can add additional images or icons using the Standard <img…> construct, or you can add them using script code:

weatherImage2.src = "images/icons/" + code2 + ".gif";
    
background.addImageObject(
   "images/icons/32.gif", 150, 30);
background.addImageObject(
   "images/icons/33.gif", 150, 100);

Using the background object defined in the HTML layout tag enables you to incorporate additional background images that sit underneath anything else on the form. The images added with the addImageObject are layered; the more recently you've added an image, the closer it is to the top in Z-Order.

One glitch you will likely encounter concerns images. If you attempt to layer images that are semi-transparent, you get pink spots in the areas where the semi-transparent areas overlap. The method shown in this article resolves that problem, but it's something you need to bear in mind as you create your own gadgets. If you add images to a gadget using HTML, then you need to make sure you avoid overlapping semi-transparent areas.

Debug Your Gadgets
At some point in any project, your code becomes complex enough that you have to fix something that's not working as expected. Gadgets are not an exception to this general rule.

To debug your gadgets, you can create a solution in Visual Studio (or use any other editor that provides the features that you want). I use VS 2005, so I created a solution and put the files directly into the folder where Vista wants them for the Gadget Gallery to find them. There is no such thing as a Gadget project, however; this means there is no way to debug your gadgets directly within the VS IDE. As I pondered this problem, it became clear to me that I needed a way to debug script because a gadget is basically script code running in a browser.