Friday, February 26, 2010

Developing Google Gadgets Tutorial: Part 1

This is the first part in a series of posts that will teach you how to develop your own Google Gadget. Google definition: “Google Gadgets are simple HTML and JavaScript application that can be embedded in web pages and other applications”. From now on I will simply use the term Gadget. The Followers and My Favorite Links sections of my blog are implemented as Gadgets. Gadgets are supported by sites like iGoogle and Blogger.

Let’s see a simple example for a Gadget. Our sample Gadget let’s the user enter his name. When the name is entered the user clicks a button and a greeting is displayed.

Code Snippet
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <Module>
  3.   <ModulePrefs title="hello world example"/>
  4.   <Content type="html" preferred_width="300">
  5.     <![CDATA[
  6.     <div id="content">
  7.         <table>
  8.             <tr>
  9.                 <td>
  10.                     <label id="nameLabel">Enter your name:</label>
  11.                 </td>
  12.                 <td>
  13.                     <input type="text" id="nameTextBox" />
  14.                 </td>
  15.                 <td>
  16.                     <input type="submit" name="ShowGreetingButton" value="Show Greeting" onclick="onShowGreeting_Click()" />
  17.                 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td colspan="3">
  21.                     <label id="greetingLabel" />
  22.                 </td>
  23.             </tr>
  24.         </table>
  25.     </div>
  26.     <script type="text/javascript">
  27.         function onShowGreeting_Click() {
  28.             var greetingLabel = document.getElementById("greetingLabel");
  29.             var nameTextBox = document.getElementById("nameTextBox");
  30.             if (nameTextBox.value === "") {
  31.                 greetingLabel.innerHTML = "Please enter your name";
  32.             }
  33.             else {
  34.                 greetingLabel.innerHTML = "Hello " + nameTextBox.value + "!";
  35.             }
  36.         }        
  37.     </script>
  38.     ]]></Content>
  39. </Module>

So as you can see a Gadget is just an XML document that starts with a Module tag. The ModulePrefs tag contains information about the Gadget such as its name, description, author and more. Afterwards you simply add a Content tag that specifies the HTML and JavaScript that implements the Gadget. The content type can also be a URL that specifies the Gadget content. Please note: the <html> and <body> tags are not needed. There are more tags I will present in later posts.

So now that we have a Gadget you will ask what can I do with it? You can host it in your own iGoogle page. You can add the Gadget to your blogger page. The easiest step to do it is to go to a (very surprising) Gadget called Google Gadget Editor. You can find this Gadget Here. Simply edit the Gadget there, Save it and the select publish from the File combo box. See the following picture for an illustration

GGE sample

After publishing your Gadget you can load it to your iGoogle page.

That’s it for our starter. Let’s finish with some tips:

  1. Develop your Gadget as a simple HTML page and then transform it to a Gadget by removing redundant HTML tags.
  2. Test your Gadget on more than one browser to verify that it works correctly on them. I tested my Gadget on Firefox, Chrome and Internet Explorer.
  3. Google Gadget Editor behaves strangely on Chrome so use it in IE or Firefox.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)