Go Go Google Gadget!

Some of you may be old Google gadget pros. With a dozen or so of them on your fancy schmancy iGoogle page. You might have even wondered how one is made and if you are dedicated enough, you might have even made the “Hello World” example. But what if you wanted to make something simple enough to get the basics, but more than a simple hello? Like so many other things that seem complicated, it doesn’t have to be. We show you how in today’s article on the Programming Underground!

Google gadgets… they provide us all with nifty tidbits of information, games for when we get bored at work, provide us with knowledge and yes, some that even makes fun of George Bush. But what is behind them? How do they work? Well before the overly simplistic Google gadget maker online, back when they made things in a more flexible and programmer friendly way, I had a chance to build a simple script notifier for my mIRC scripting team Team-ClanX. The gadget simply tells people when a new script/addon/dll/theme has been added to our vast archive. So I read the documentation and developed it. Now I have it on my iGoogle and you can build one too.

The guts behind most of the gadgets is a simple XML file. If you are not too familiar with XML, you might want to read up on what it is, how it is built and why it is one of the more important inventions to hit the net in awhile. XML in short describes the structure of data and how each piece is related to one another. Google gadgets use a simple XML file to read in a gadget and display it on their site. Below is a very simple example of mine.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Team-ClanX on Dalnet IRC" height="250" author="Team-ClanX Scripterz" description="Get the latest mIRC chat scripts/addons/tutorials and more available from our archive" author_email="admin@team-clanx.org"> 
  <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref name="items" display_name="Items" default_value="5" datatype="enum">
	<EnumValue value="1"/>
	<EnumValue value="2"/>
	<EnumValue value="3"/>
	<EnumValue value="4"/>
	<EnumValue value="5"/>
	<EnumValue value="6"/>
	<EnumValue value="7"/>
	<EnumValue value="8"/>
	<EnumValue value="9"/>
	<EnumValue value="10"/>
  </UserPref>
  <Content type="url" href="http://www.team-clanx.org/latestscripts.php"/>
</Module>

As you can see the code is not at all that lengthy, but it provides all the essentials of creating a fancy “HTML” based gadget. I say HTML gadget because you can either create a gadget based on page from another site or inline some content code. I find the HTML style the easiest for beginners. Especially if you have created a website already and just want to rip something off your own site and make it a gadget.

As with every XML file it begins with an XML declaration that tells the browser or program that it is going to show XML information. It is followed by a root node (each set of tags is a node, so you can have nodes within nodes to create a hierarchy) named . The structure of a gadget is available on the Google website (I will provide the link at the end of this entry) and it will show you how to structure the XML.

In our node we have several other nodes called , ,, and . The node describes basic attributes of a gadget like its name, height, description, author etc. You want to define this node and give it some of the basic attributes like a name and description which will be shown on the gadget.

The node is an optional node used to set various optional features that can control things automatically like how the gadget resizes itself. Here I turned on “dynamic-height” which causes the gadget to resize itself to fit the content it is displaying. If I didn’t do this, if the user chose 10 items, the control would create a scrollbar which is a bit awkward.

Our node describes the basic options for configuring the gadget which the user can see and control. Here I have defined a set of nodes for creating a drop down box. With it the user can specify how many latest projects they want to see in the gadget. They can choose 1 to 10 items. This drop down can be strings or numbers etc.

Lastly we have the tag which allows us to specify which type of content the gadget will have. You can inline code here using a CDATA field in XML or, as in our example, specify an HTML page. Here I am specifying a PHP page which interacts with a database, loads any Google specific scripts, and fetches the latest mIRC scripts added to the archive recently. It places this all in a standard HTML table which has its width specified with a percentage so that it fits the gadget sizing.

Below is the code I use to load the host of Google javascripts that must be in the page. These scripts help with the gadget behavior and supports many of the gadgets extra features like dynamic resizing and such.

latestscripts.php – Loading javascripts for Google

<?php
	$libraries = split(",", $_GET["libs"]);
	foreach ($libraries as $script) {
		if (preg_match('@^[a-z0-9/._-]+$@i', $script) && !preg_match('@([.][.])|([.]/)|(//)@', $script)) {
			print "<script src='http://www.google.com/ig/f/$script'></script>";
		}
	}
?>

When our script is called it is passed a variable “libs” which is an string containing all the javascript library filenames. We split them and run through them, loading each javascript file using the print statement. Once this loop is done executing, we will have a list of javascript includes loaded.

Now when a script has defined, like our enum nodes there, they are sumbitted to the page we specified in the node using the name we specified. In our example the preference had the name “items”. During the submission process, Google takes this name and appends “up_” to it. Our script can then read this variable (passed in as a URL) and know how many items the user has set the gadget to display. We then simply loop through the current additions based on this variable. If this is the first time loading the gadget, we will have to set a default. I chose 5.

$items = (isset($_GET['up_items'])) ? $_GET['up_items'] : 5;

For the rest of the page we can proceed as normal and display the table… which will essentially be iframed inside our gadget.

Now that we have our table all made and essentially the gadget completed, it is time to add it to an iGoogle page or pass it on for others to use. Within iGoogle you can add the developer’s gadget which will then allow you to add gadgets through a simple URL box. Give it the URL of your gadgets XML file (not the script/HTML file) and voila you have your gadget appearing on your page. The link below will show you how to go about adding this developer’s gadget…

Google Gadgets Developer Module

After you have successfully added the gadget, you should see it appear on your iGoogle homepage. Experiment around with it and see how they work. Remember that you must be signed in with your Google account to get the full benefits of gadgets and their development. Below is a picture of my finished Google Scripting Gadget….

If you want to know more about building gadgets, please refer to the Google Gadget Developers Guide. It will include everything you want to know from developing standard gadgets to more complex gadgets with javascript functions and behaviors.

Google gadgets developers guide