Since 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.
Continue reading article on DevX.com...
