Wednesday, March 18, 2009

Aimless Surfing Google Gadget Part 2

Twitestract: Getting my Google Gadget prepared to put into the Google Directory and more on how it's constructed.

This is part 2 of a 3 part series on my Aimless Surfing gadget. Part 1 can be found here.

A Google Gadget is simply an XML file that contains the code needed to run the Gadget. The simplest files have some header information and then one Module node. Within the Module node is the metadata for the gadget (user prefs, the title, url for screen shots, the author's contact information, etc.) and the code itself in the Content subnode. More complex gadgets will add UserPrefs section to store end user preferences and other state data. The most basic "Hello World" gadget looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
Hello, world!
]]></Content>
</Module>

Pulling this apart, we have the first line which just proclaims that this is a piece of XML. In XML files, you tend to see every object encapsulated between an open and close tag. The main object in the Google gadget model is enclosed between a <Module> at the beginning and a </Module> at the end. The Content node is where you place your javascript and html code that will render your gadget. If you've ever created an RSS feed or disected an iTunes feed you will have seen the CDATA tag before. CDATA is used when you have a big chunk of unstructured stuff that you want to put inside your XML document. Unlike everything else in XML is gets wrapped in square brackets. Once you are working in the CDATA part of the gadget, it's the same as building any other web page. You can add <script> tags for your javascript and HTML forms and image tags and whatever else you want.

Google provides a wonky little gadget to help you write basic gadgets and preview them. The Google Gadgets Editor(GGE) always loads itself with the little "Hello World!" code above. It is part of Google's extensive documentation pages on gadget writing. One thing to note, Google is in the midst of migrating from this simple gadget interface to a more complex (and more full featured) instruction set. So, you will see reference in the Google documentation to "Legacy" gadgets. The Aimless Surfing gadget and any gadget you create via the Google Gadgets Editor are Legacy gadgets.

I call the gadgets editor wonky because more than once, it overwrote my changes or my changes wouldn't save. I don't know if it's a byproduct of using Firefox/Mac but if you start writing serious gadgets, you may want to go a different route. By the end of the Aimless Surfing project, I was writing everything in Text Wrangler and then just uploading the files to the GGE for testing. I continued to use the GGE for previewing and because you can publish your code to the Google world and the Internet from the GGE directly. I can see from the documentation, that as you write more complex things, Google expects you to set up a Subversion system (code control). However, they are happy to host the code. When I write my "real" gadgets, I will likely either go this route or host the code at my work domain.

Publishing the code was surprisingly easy. Google asks that you add in some extra meta fields into the beginning of your XML document and they even have a nice set of tricks to keep the act of inserting your email to a published file from increasing your flood of inbound spam. After adding the requested fields to the <Module Prefs> section of my file, I was able to publish via the menu in the GGE. Publishing was simply reading an agreement and supplying the url where my XML file lives.

Once I get confirmation that the gadget is accepted to the directory, I'll post the last in this series and discect the code.

No comments:

Post a Comment