If you’re not one of the of the cool kids who uses iGoogle, you’ll need to set yourself up to use this code. I just looked at the developer’s guide, and it seems a bit more fleshed out than it was when I first took a whack at the code The really cool thing about these gadgets is that they are essentailly just an XML file with some JavaScript/HTML thrown in.

I thought it might be a nice feature to just provide a search box for people to launch a catalog search. This is just a simple HTML form.

<form target="_parent" name="searchform" action="http://lion.wm.edu/uhtbin/cgisirsi/0/0/057/5" id="searchform">
    <input id="searchInput" style="width: 100%;" name="searchdata1" type="text" accesskey="f" />
    <input id="library" name="library" type="hidden" value="SWEM" />
    <input id="user_id" name="user_id" type="hidden" value="SWEPUB" />
    <input id="sourceid" name="sourceid" type="hidden" value="gadget" />
</form>

This is just HTML code that you would use on any search page. Nothing fancy. Now on to creating the gadget..

There are two parts to the XML code for the spec. The root node (Module) has two elements, ModulePrefs and Content. The ModulePrefs element is relatively straight-forward:

<ModulePrefs
    title="Swem Catalog Search"
    height="40"
    description="Search Swem's online catalog from iGoogle"
    author="Wayne Graham"
    author_email="dontspamme@gmail.com" screenshot=""
    author_location="Williamsburg, Virginia"
    title_url="http://swem.wm.edu">

    <Require feature="analytics" />

</ModulePrefs>

The attributes of the ModulePrefs element (title, height, description, etc.) should be pretty self explanitory. I wanted to be able to track usage of the gadget, so I eneabled Google analytics for the widget by requiring the analytics feature. Now for the meat.

What I did was write a short CSS definition and some JavaScript to actually display a form in the Content element of the Module.

<Content type="html"><![CDATA[
<style>
    #subLibrary {
        font-family:arial, sans-serif;
        font-size:10px;
        color:#676767;
    }
    #link {
        font-family:Garamond, serif;
        font-size:32px;
        color:black;
        text-decoration:none;
    }
    #searchGoButton {
        font-weight:bold;
    }
</style>
<script>
function displaySearchBar (prefs) {
    var lang = prefs.getString("mylang");

    if (lang == "") {
        lang = prefs.getString(".lang");
    }

    var html =
        '<form target="_parent" name="searchform" action="http://lion.wm.edu/uhtbin/cgisirsi/0/0/0/57/5" id="searchform">' +
        '<table style="width:100%">' +
        '<tr>' +
        '<td style="padding-bottom:4px">' +
        '<a target="_parent" id="link" href="http://lion.wm.edu/uhtbin/webcat">Catalog</a>' +
        '<span style="vertical-align: sub;">Swem</span>' +
        '</td>' +
        '<td width=100%>' +
        '<input id="searchInput" style="width:100%" name="searchdata1" type="text" accesskey="f" value="" />' +
        '<input id="library" name="library" type="hidden" value="SWEM" />' +
        '<input id="user_id" name="user_id" type="hidden" value="SWEPUB" />' +
        '<input id="sourceid" name="sourceid" type="hidden" value="gadget" />' +
        '</td>' +
        '<td>' +
        '<input type="submit" name="go" id="searchGoButton" value="Search" />' +
        '</td>' +
        '<td>' +
        ' ' +
        '</td>' +
        '</tr>' +
        '</table>'
        '<form>';
    document.write(html);
}

displaySearchBar(new _IG_Prefs(__MODULE_ID__));
_IG_Analytics("analytics-id", "/google-gadget");
</script>
]]>
</Content>

Once you’re done, you can test everything with the directions on the Developer Tools page. There are even really nice resources to tell you how to host this on Google Code.

As a finished product, this is what the gadget looks like in iGoogle:

For the folks that use iGoogle as their home page, this can be valuable tool for them. Next up, I need to brush off my code for generating Sherlock/Opensearch extensions for Firefox and IE…