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
In our
The
Our
Lastly we have the
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
$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