Quick! Let’s Code a Gadget!

So, let’s shift from the cloud to the client. In this exercise we’ll be developing a simple wave “mood” gadget that allows participants to display the mood of the wave using the Google Charts API. If you’re not familiar with the Charts API, it is a great web service that allows you to easily display all kinds of charts (even maps!). We’ll be using the Google-o-meter chart type, which displays a needle and a color gradient background, to provide a visual display of the mood (Figure 5-9).

The Google-o-meter can be programmatically customized via URL parameters.

Figure 5-9. The Google-o-meter can be programmatically customized via URL parameters.

You can view the code for this example in its entirety without any breaks in Appendix B. The code is also available on Google Project Hosting: http://code.google.com/p/gwave-mood-gadget.

The Gadget File

So, we know that gadgets are based on an XML file that includes several elements, including HTML and JavaScript content that is used to render the gadget and process events that occur in a wave. We’ll step through the source code of the Wave Mood Gadget in the following sections.

The gadget preferences

At the beginning of the gadget file we declare a few preferences, including the gadget title and default ...

Get Google Wave: Up and Running now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.