Google Wave Gadget to Display an O'Reilly Book Cover

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:



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



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



Try out some of the following ISBNs:

9780596806019 - Google Wave: Up & Running

9780596808518 - Compressed Air Rocket