. 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
- XML describes the gadget's structure.
- HTML and CSS provide the presentation layer.
The XML below shows the basic gadget structure:
<?xml version="1.0" encoding="UTF-8" ?>
<ModulePrefs title="A title" />
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 authormore on this later. The Content
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"?>
<ModulePrefs title="Hello world example" />
<div id="content" style="color: red;">
Save the preceding XML file using the name hello-world.xml
. You won't use this right awayI'll show you how to deploy it in the next sectionbut 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.
To include a CSS block use a standard <style>
tag, for example:
tags just as you would in a standard HTML page: