Wave UI: Making your gadgets look & feel Wave-y

As part of my Google I/O talk on "Anatomy of a Great Extension", I talked about the optimal look & feel for Wave gadgets. On one hand, if your Wave gadget is based off an existing website, like the 6Rounds gadget, then we recommend mimicing the UI of your website inside the gadget, so that your existing users feel like they're using an extension of your website into Wave. On the other hand, if your Wave gadget is independent and designed purely for Wave, like many extensions in the gallery, then we suggest mimicing the UI of the Google Wave client itself, so that users feel like the gadgets fit inside their environment, and so that waves with multiple independent gadgets look cohesive. To make that easier for developers, we've introduced a new feature to the Wave Gadgets API, the wave.ui library, which makes it easy to turn your gadget elements into wave-styled elements.

For example, you might start with an anchor with some javascript onclick behavior:

<a id="button" href="javascript:void(0)" onclick="doIt()">Do Cool Stuff!</a>

You can then call makeButton and pass in the anchor element:

<script>
wave.ui.makeButton(document.getElementById("button"));
</script>

And, presto, your button will be wave-styled like this:

The wave.ui library also offers the loadCss, makeDialog, and makeFrame methods, and will expand to include additional methods as needed by developers.

For examples of gadgets using the new wave.ui library, check out the Flammard bible bot, which uses makeFrame for a multi-tabbed interface, or the Google Maps gadget, which uses makeDialog for a welcome screen and makeButton for the info window buttons.

As usual, please let us know in the forum how you're using this feature and if you have any questions.

Enjoy wave-styling!

Posted by Pamela Fox, Developer Relations