Google Gadget Basics

The source code of a gadget is written in XML. In other words, a gadget is an XML document. The root element of a gadget is <Module>. And a gadget consists of three main sections:

Gadget Preferences: Specifies the characteristics of a gadget. Wrapped with <ModulePrefs> XML element. Mandatory.
User Preferences: Defines controls that allow users to specify settings for the gadget. Wrapped with <UserPrefs> XML element. Optional.
Content Section: Specifies the content of the gadget, often using HTML and JavaScript programming logic. Wrapped with <Content> XML element. Mandatory.

The following diagram depicts the overall gadget structure, which consists of the three main sections described above.

Note:

For more information on the anatomy of a gadget, refer to the Google gadget basics documentation here: http://code.google.com/apis/gadgets/docs/basic.html#Anatomy

Basic Gadget Example

Here is a sample gadget that demonstrates the three elements of a gadget.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
   <ModulePrefs title="Hello Example" />
   <UserPref name="Name" display_name="Your Name" default_value="World" />
   <Content type="html">
    <![CDATA[       Hello, <span id="nameSpan"> Name goes here </span>
      <script type="text/javascript">
         var prefs =new gadgets.Prefs();
         document.getElementById('nameSpan').innerHTML = prefs.getString("Name");
     </script>      !     ]]>
   </Content>
</Module>

In this gadget, we set the gadget title in the gadget preference section in line 3. The title is "Hello Example".
In line 4, we set a user preference with the preference name being "Name", display name being "Your Name" and default value being "World".
In the content section, we print a greeting message, based on the value set by the user for Name preference field.
We have a span with the ID "nameSpan", preceded by "Hello," in line 7.
From lines 8 to 11 we have some JavaScript logic to pick the name preference value, and set the "nameSpan" with the preference value.
As the default value for "Name" is "World", the gadget would greet with "Hello, World!" when it loads initially, and if the user sets the name preference, would greet accordingly.

Gadget in Action

The following figure shows the gadget in action. This simple gadget is capable of picking the user settings and greeting the user accordingly.

You can try this gadget in the WSO2 Gadget Server by adding it to the gadget repository.

To explore in more detail how to make use of user preferences, make gadgets configurable and more, refer to the tutorial: A Guided Tour on Writing Google Gadgets.