A tutorial has been prepared to introduce opensocial-jquery as used with iGoogle. You need to have a Google account since the tutorial is structured towards the user experiencing opensocial-jquery on a solitary web browser.

For starters, log in to iGoogle (US) here: http://www.google.com/ig?hl=en

Then, please add the Developer Gadget to iGoogle.

Then, please add the Google Gadget Editor to iGoogle. Installation is confirmed when the source code for the Hello, World! gadget is displayed.

On the Google Gadget Editor, go to the File menu and select Save. Then, type: playground.xml and then click on OK to save the Hello, World! gadget.

Check the URL for playground.xml. Open the playground.xml link

At this point, please note down the playground.xml URL. It should be similar to the URL shown below. The "digits" in brackets below should be the only thing that is different.

http://hosting.gmodules.com/ig/gadgets/file/(digits)/playground.xml

Enter the URL that you noted down for playground.xml into the Developer Gadget. Click on the ADD button, and register the gadget onto iGoogle.

iGoogle will display playground.xml as a saved gadget.

In order to prevent iGoogle from caching playground.xml, click on the cached check box to turn it OFF.

On Google Gadget Editor, please change playground.xml in the manner shown below. Then, select Save from the File menu and save the gadget.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
]]></Content>
</Module>

Click on the browser's refresh button and reload the gadget. Then, check that the search box is displayed.

• If playground.xml is described in HTML, the gadget is displayed as is.

On Google Gadget Editor, please change playground.xml in the manner shown below. Then, select Save from the File menu and save the gadget.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.3.2.5.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    alert(this.q.value + ' ' + this.c.value);
    return false;
  });
});
</script>
]]></Content>
</Module>

Click on the browser's refresh button and reload the gadget. Then, click on the search button and check whether an alert is displayed for the inputted content.

• opensocial-jquery is distributed through the http://scripts.lrlab.to/opensocial-jquery-1.3.2.5.min.js address. For more details please refer to Network Distribution
• If any annotations are made to playground.xml in JavaScript, the gadget will run as is.

On Google Gadget Editor, please change playground.xml in the manner shown below. Then select Save from the File menu and save the gadget.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.3.2.5.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    return false;
  });
});
</script>
]]></Content>
</Module>

Click on the browser's refresh button and reload the gadget. Then, click on the search button and depending on what is entered into the search field, the program will search for YouTube movies. Ensure that a list of thumbnail results is displayed.

• opensocial-jquery extensions are cross-domain compatible with jQuery Ajax API
• YouTube movie search uses YouTube Data API

On Google Gadget Editor, please change playground.xml in the manner shown below. Then, select Save from the File menu and save the gadget.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example">
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.3.2.5.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    $(window).adjustHeight();
    return false;
  });
});
</script>
]]></Content>
</Module>

Click on the browser's refresh button and reload the gadget. Then, click on the search button and depending on the number of thumbnails, check that the gadget's height is automatically adjusted.

• If playground.xml is annotated with <Require feature="dynamic-height">, jQuery.fn.adjustHeight is loaded

On Google Gadget Editor, please change playground.xml in the manner shown below. Then, select Save from the File menu and save the gadget.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example">
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html"><![CDATA[
<style>
#videos img { margin: 2px; width: 80px; hegith: 60px; }
</style>
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.3.2.5.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    $(window).adjustHeight();
    return false;
  });
});
</script>
]]></Content>
</Module>

Click on the browser's refresh button and reload the gadget. Then, click on the search button and check that CSS is applied.

• If playground.xml is annotated with CSS, the CSS can be applied to the gadget as is.

That's it, all finished!