Visual Studio Magazine – Get Down and Glitzy With Gadgets

FTPOnline

Channels

Conferences

Resources

Hot Topics

Partner Sites

Magazines

About FTP

Click here to receive your FREE subscription to Visual Studio Magazine

Get Down and Glitzy With Gadgets (Continued)

The weather gadget uses a Yahoo weather RSS feed to acquire data to display to the user. You instantiate an HTTP object (Microsoft.XMLHTTP) and use it to perform a GET operation on the forecast RSS feed. The only parameter you use specifies a location—a zip code for the city you're interested in seeing the weather for. Once you get the weather data, you parse it, and assign the data to interface tags with the GetWeather function. This next line of code forces a page update for the gadget:

location.href = location.href

Note that this is an all-or-nothing, brute force technique for updating a page. With a little more finesse, you might perform an update on the controls whose data have changed. This would take more code and a little more thought, but it would still be relatively easy to implement.

Support Flyouts in Your Gadgets
Yes, you've added some script to your gadget, but the gadget you're working on remains quite simple. So far, I've covered only the code inside a docked gadget. Gadgets can also be undocked or have a "flyout" state. You typically use an undocked gadget to display more information in a larger window than can be contained in the Sidebar. Some gadgets rely on a flyout instead of an undocked state; other gadgets utilize both. The undocked state uses the same HTML file as the docked state, while the flyout requires a separate html file. You set a reference to the flyout file with this line in the myweather.hml file:

System.Gadget.Flyout.file = "flyout.html";

All you need to do to support this flyout is to define the layout within the flyout.html file:

<body onload="init()">
<g:background id="background" style=
   "position:absolute;z-index:-1"></g:background>
   <div id="day1">
      <div id="date1"></div>
      <div id="hi1"></div>
      <div id="lo1"></div>
      <div id="forcast1"></div>
   </div>
   <div id="day2">
      <div id="date2"></div>
      <div id="hi2"></div>
      <div id="lo2"></div>
      <div id="forcast2"></div>
   </div>
</body>

The Yahoo weather RSS feed provides two-day weather forecasts, in addition to information about current weather conditions. To account for this, set up your flyout HTML divs for each of those days and specify that you will display the high, low, date, and the forecast for the day. When the flyout is activated, the flyout form displays next to the gadget, extending out into the desktop area (Figure 5).

Note that any script that runs inside a browser can also run inside a gadget. For example, you enable a double-click to activate a flyout by adding an ondblclick event to the body element of your HTML. Similarly, you might add an onmouserollover event to implement tooltips-style text for your gadget. Or, you might add drag events to handle something being dropped onto or dragged over your gadget.

In addition to being able to rely on markup language, gadgets have their own namespace (System.Gadget) that contains additional commands and functions you can incorporate in your gadgets.

So far, the samples have relied on hard-coded scripts to indicate the zip code for your weather information. The next step is to enable users to enter their own zip codes. Adding parameters to your gadget script requires that you create a settings dialog and (usually) an associated script file to work with it. Place this code in the main script file (weather.js, in this case) to tell the app that a settings form exists.:

System.Gadget.settingsUI = "settings.html";

You can store the script to support the settings.html file with your default gadget script page; however, a better approach is to create a separate file for, such as settings.js.

Display Appropriate Controls
You must give your settings dialog the ability to display whatever controls it needs to collect data. The weather control requires only a value for location. The RSS feed you use specifies the location in either of two ways: as a zip code or as a location code. This gadget uses the zip code option, so you need to incorporate an input field to collect this data for your settings dialog:

<body onload="init()">
   <div class="captionText">Location (
      Zip Code)</div>
   <span>
      <input type="text" id="locationZip" 
         length="40">
   </span>
</body>

The Gadget namespace gives you the ability to read the information you collect:

function init() 
{
   var currentLocation = 
      System.Gadget.Settings.read("location");
   if (currentLocation != "")
      locationZip.innerText = currentLocation;
   else
      locationZip.innerText = "76110";
}