Google Wave Waffle

Update:

Did some UX tweaks and bug fixing. Also the main url for access is now:

www.staunsholm.dk/wave/waffle.xml

Mkkl.

Did my first Google Wave Gadget this weekend:

I call this a Waffle. It's like Doodle but in a Wave. Change the header to reflect what you wan't to find a date for,
then press 'Add date' to suggest as many days as you'd like. Click on a date to remove it again.

Wan't to try it out? Press the puzzle button in a wave to add a gadget and use this URL:
http://test.staunsholm.dk/wave/waffle.xml

Feels kinda cool to see your updates in real time on another computer, this part I definately see future for. Make no mistake, Google Wave is an alpha product. The GUI has hickups. The API doesn't always work as documented. Even the very basics in syncing sometimes have problems.

The xml contains all code (javascript), css and html - and should be pretty self explanatory. Just click on the link above and do a view source.

The interesting part is the real time syncronisation, ie. if you add a new date, it immidiately shows up in all other connected users' waves. Google Wave makes this very easy, but of course you can still create race conditions, unless you are careful.

The magic is in the state variables. These are text only variables that are available to all users connected to a wave. To set a state variable, you simply do this:

var delta = {};
delta[key] = value;
state.submitDelta(delta);
        

where key is the name of the state variable, and value is what you wish to save.

And this is how to read the state variable again:

var myVariable = state.get("myVariable");

All you need now is to setup a listener, and render the gadget accordingly:

function render()
{
  //read state variables
  // render gadget accordingly
}

function init()
{
  if (wave && wave.isInWaveContainer())
  {
    wave.setStateCallback(render); // called every time a state variable changes
    //wave.setParticipantCallback(render); // called whenever a user writes something in the wave
  }
}
gadgets.util.registerOnLoadHandler(init);

Wave on!

Del.icio.us : wave gadget
Technorati : wave gadget