Simple IGoogle Gadget

Introduction

It's a short article about iGoogle gadgets. Gadgets API is easy but documentation is really fuzzy.

Background

Gadgets are mini applications that use the IGoogle framework and can live inside other site. In short it's a your page inside iFrame.

There are several steps to create your first gadget:

1. Sign up for the Sandbox. Note: behavior of application in Sandbox is different from the one on IGoogle home page (looks like they use different JS libraries).

2. Add developer tools. These tools will protect your gadget from caching.

3. Use Online editor or any other editor to create your gadget.

4. Publish your gadget.

Using the code

The full gadget code is available here.

I decided to create a gadget which display the Hot deals from Expedia.com. After a few minutes in Google, I found the DataSource for my gadget - Expedia RSS Feed.

Gadget has 2 presentation parts:

- form to configure gadget;

- list of entries from the feed;

<ModulePrefs 
   title="Travel Deals on Expedia" 
   description="Hot Travel Deals from Expedia.com. Cheap flights and hotels, cruises and top deals." 
   title_url="http://www.expedia.com/daily/outposts/rss/expedia_rss.asp"
   author="Maxim Kazitov"
   author_email= href="mailto:mvkazit@tut.by">mvkazit@tut.by
   screenshot="http://www.yogageneration.com/~mvkazit/expedia/iexpedia/screen.jpg" 
   thumbnail="http://www.yogageneration.com/~mvkazit/expedia/iexpedia/thumbnail.gif"
   directory_title="IG Expedia Hot Deals" 
   height="250"
   width="250">

   <icon>http://www.yogageneration.com/~mvkazit/expedia/iexpedia/icon.gif</icon>
   <Require feature="setprefs"/>
   <Require feature="dynamic-height"/>
</ModulePrefs>

In code above we are setting up all required settings for a future gadget and including 2 modules at the end : "setprefs" and "dynamic-height". First module allows us to programatically save the user settings, the second one allows to adjust the height of IFrame (if content height was changed).

_IG_RegisterOnloadHandler(pgLoad);
function pgLoad()
{
//...................
}

pgLoad function will be called and a page will finish the loading process. Actually IG framework will add following line at the end of the body.

_IG_TriggerEvent("domload");

Note: looks like "registerOnLoadHandler()" is working only inside the Sandbox.

"hidden" default_value="false" name="hasCfg" /> 
.................
var m_UsrPref   = new _IG_Prefs(__MODULE_ID__);
m_UsrPref.getBool("hasCfg"))
m_UsrPref.set("hasCfg", true); 

It's easy to read/write settings, but you MUST declare these settings first.

Now we want to read RSS feed

_IG_FetchFeedAsJSON(buildURL(), parseResponse);

function parseResponse(obj) 
{  
  if(obj && obj.Entry)
  {

     for(var i=0; i

Framework will automatically refresh feed every 60 min or so.

Note: looks like "gadgets.io.makeRequest()" are working only inside the Sandbox. In general gadgets.io* functions are working only in dev environment and only _IG_* is really working.

_IG_AdjustIFrameHeight();

This call will adjust the size of IFrame to fit the content height (again don't try to use adjustHeight). Now we can publish our gadget and share it with friends.