What you will get from this article:
- An overview of developing gadgets using a base class with built in support for displaying loaded, loading, and connection error states
What you will not get from this article:
- An introduction to gadget development
- An introduction to ASP.NET AJAX Extensions
Most gadgets that deal with remote data have three basic states: loading, loaded, and connection error. For the sake of simplicity I have intentionally ignored docked and undocked states.
When I set out to develop my first gadget, I was unhappy with how much code I needed to write to support displaying states. The code I had written seemed messy and more functional than object oriented. To solve this problem I created a base class that provides support for rendering display modes and encapsulates some of the basic gadget API.
Using the Code
Creating the HTML for your Gadget
Be sure to reference the MicrosoftAjax.js and Dowds.Gadgets.js files first in your gadget's HTML file.
Instead of dynamically generating the HTML for each state the
Dowds.Gadgets.Gadget class takes a simpler approach. It expects the gadget HTML file to have a
DIV element for each state. They must have the following ids:
dataLoadedDisplay, for the
div to show when the data is successfully loaded
dataLoadingDisplay, for the
div to show while the data is loading
dataNotAvailableDisplay, for the
div to show when there is a connection error
DIV should be absolutely positioned and have its CSS visibility set to
<div id="dataLoadedDisplay" style="position:absolute;visibility:hidden">
<tr><td class="percent"></td><td class="title"><div><a></a></div>
<div id="dataLoadingDisplay" style="position:absolute;visibility:hidden">
<img src="Images/Icon_Spinner.gif" /> Getting Data…
<img src="Images/Icon_Info.png" /> Service Not Available
Create a new class using ASP.NET AJAX Extensions. Use the
registerClass method to make it inherit from
Dowds.Gadgets.Movies = function()
this._data = null;
Accessing remote data such as an XML file or a web service can easily be accomplished using the
Sys.Net.WebRequest class provided by ASP.NET AJAX Extensions.
var wRequest = new Sys.Net.WebRequest();
Once the data is returned you'll need to call the
_updateDisplay method of the
Dowds.Gadgets.Gadget class. It does almost all the work to update the gadgets state. It updates the display based on the values of the
|_dataNotAvailable ||_dataLoaded||DIV Displayed|
Before calling the
_updateDisplay method be sure to update the
_dataLoaded flags based on the success of your request.
var movieDoc = executor.get_xml();
this._dataLoaded = true;
this._dataNotAvailable = false;
this._data = Dowds.Gadgets.MovieInfo.ParseFromDoc(movieDoc);
this._dataLoaded = false;
this._dataNotAvailable = true;
(4 * 3600000));
_updateDisplay method should be called whenever the state flags change. You'll also need to add custom logic to update the UI with the data that is returned. In the example above I call
_bindTable(this.data) to update the table in the
DIV with the movie review data that was returned.
Opening a Flyout
If you open a flyout that is already open it loses focus and becomes grayed out. To avoid this, check and see if the flyout is already open and if it is, just refresh the data.
System.Gadget.Flyout.show = true;
var flyoutWindow = System.Gadget.Flyout.document.parentWindow;
It's very important that you avoid making your gadget look like something a developer designed. Try thinking of an object or metaphor you could use to visually represent your gadget. For example, I created a movie review gadget so a clap board is a fitting backdrop.