Jump to content

Google Wave Gadget to Display an O'Reilly Book Cover

+ 4
  tmo9d's Photo
Posted Oct 02 2009 11:24 AM

If you have access to the Google Wave preview, you might be wondering how to start writing your own Wave Gadgets. Instead of a simple, "Hello World" example, here's a gadget which takes an O'Reilly book's ISBN and loads the thumbnail of the book cover. This particular gadget stores the book ISBN in the Wave's shared state, and is a simple demonstration of some of the key features of the Wave API.

Note: The Javascript to swap out an image doesn't work in Safari or Chrome, only good old Firefox.

If you want to host this gadget yourself, here is what you need to do:

1. Find a web server that can host a simple XML document. This simple Wave gadget is an XML document which contains content and Javascript, to add the gadget to a Wave, you will have to supply Google Wave with a URL of an XML document.

2. Copy the following code to an XML file:

<Module>

<ModulePrefs title="ISBN Lookup" height="250">
  <Require feature="wave-preview"/>
</ModulePrefs>

<Content type="html">
 
  <script type="text/javascript">
    function buttonClicked() {
      // var viewerId = wave.getViewer().getId();
      var state = wave.getState();
      var isbn = parseInt(document.getElementById('isbn').value);
      var currentIsbn = state.get('isbn', '0');
      if (isbn != currentIsbn) {
        delta = {};
        delta['isbn'] = isbn;
        state.submitDelta(delta);
      }
    }

    function renderInfo() {
      if (!wave.getState()) {
        return;
      }
      
      var state = wave.getState();
      var keys = state.getKeys();
      var currentIsbn = state.get('isbn', '9780596517335');

      var thumbNail = 'http://covers.oreilly.com/images/' + currentIsbn + '/thumb.gif'
      document.getElementById('bookThumbnail').src = thumbNail;
    }

    function init() {
      if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback(renderInfo);
        wave.setParticipantCallback(renderInfo);
      }
    }
    gadgets.util.registerOnLoadHandler(init);
  </script>
  <img id="bookThumbnail" src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/unknown.gif"/><br/><br/>
  O'Reilly ISBN: <input id="isbn" size="5" value="0"><button id="butCount" onclick="buttonClicked()">Load Cover</button>
  
</Content>
</Module>


That's it. All this example does is load the Gadget with a default book cover (Maven: The Definitive Guide). To change the book cover, type in an ISBN and click the "Load Cover" button. Clicking this button will trigger a call to state.submitDelta() which will change the shared state of the Google Wave.

3. Load the widget into a wave by clicking on the Add widget icon as shown below:

Posted Image

Then provide a path to your server in the popup window:

Posted Image

4. Once the gadget is loaded you should see something like this:

Posted Image

Try out some of the following ISBNs:

9780596806019 - Google Wave: Up & Running

9780596808518 - Compressed Air Rocket

Google Wave: Up and Running

Learn more about this topic from Google Wave: Up and Running.

Catch Google Wave, the revolutionary Internet protocol and web service that lets you communicate and collaborate in realtime. With this book, you'll understand how Google Wave integrates email, instant messaging (IM), wiki, and social networking functionality into a powerful and extensible platform. You'll also learn how to use its features, customize its functions, and build sophisticated extensions with Google Wave's open APIs and network protocol.

See what you'll learn


Tags:
1 Subscribe


0 Replies