Will Your Next Web Application Be a Google Gadget?

ince AJAX first appeared, developer interest in JavaScript has increased exponentially—and toolsets for building functionality in JavaScript have burgeoned as well. One of the latest tools for JavaScript-related development is Google Gadgets. Many web sites already provide gadgets built with the Google tools, and you can, too. This article shows you how to develop a Google Gadget that fetches DevX RSS feeds and displays them to the user.

Anatomy of a Google Gadget
Developing a Google Gadget (simply gadget from now on) is really an easy task. After all, a gadget is made of XML, HTML, JavaScript, and optionally, CSS, used as follows:

• XML describes the gadget's structure.
• HTML and CSS provide the presentation layer.
• JavaScript supplies the gadget's logic.

The XML below shows the basic gadget structure:

   <?xml version="1.0" encoding="UTF-8" ?> 
   <Module>
     <ModulePrefs title="A title" /> 
     <Content type="html">
        <![CDATA[ 
          <!-- Here the CSS, JavaScript and HTML code -->
        ]]>
     </Content> 
   </Module>

Here's a breakdown of the XML elements. The root element is Module. The ModulePrefs element holds information about the gadget (title, height, and so on) and its author—more on this later. The Content element is apt to contain the "real" content—the CSS, HTML, and JavaScript code. As you'll see later on, there are other elements to consider, but these are the basic elements you'll use in each and every gadget you develop.

A Simple "Hello, World" Gadget
The easiest way to start learning a new programming language or technology is to dive right in with a simple example. Here's the code for a gadget that just prints out the traditional "Hello, World" message in a box:

   <?xml version="1.0" encoding="UTF-8"?> 
   <Module>
     <ModulePrefs title="Hello world example" /> 
     <Content type="html">
        <![CDATA[ 
          <div id="content" style="color: red;">
            hello, world!
          </div>
        ]]>
     </Content> 
   </Module>

Save the preceding XML file using the name hello-world.xml. You won't use this right away—I'll show you how to deploy it in the next section—but for now, look at Figure 1, which shows what the HelloWorld gadget looks like when run.

Figure 1. HelloWorld Gadget In Action: This is how the hello-world.xml renders in the Google Homepage.

By looking at the previous example you can note the following:

• You define a gadget completely within an XML file.
• The <Module> tag indicates that this XML file contains a gadget.
• You specify the gadget's title using the ModulePrefs attribute.
• The line <Content type="html"> indicates that the gadget's content type is HTML (it may also contain CSS and/or JavaScript code). There are other content types but this one is the most flexible and versatile. You can find more info on content types here.
• The CDATA section contains the HTML (and optionally CSS and JavaScript) code used to render and activate the gadget. You don't have to use CSS, you can use simply inline style attributes in your HTML, as the previous example does to specify the red color.

To include a CSS block use a standard <style> tag, for example:

   <style type="text/css">
     .your-class
     {
       color: red;
     }
   </style>

You include JavaScript code within <script> tags just as you would in a standard HTML page:

   
   <script type="text/css">
     function init()
    {
      alert("hello, world");
    }
   </script>

You'll see more on both CSS and JavaScript later on when developing the DevX RSS reader gadget.

Next Page