Ok, so I know everyone is excited to get started on their gadgets.  For those who want to  get something up and running quickly, follow me over the next few blog posts. I’ll slowly build from a basic gadget (printing search terms), to running a content api call to get results from ScienceDirect.  So lets get started.  Well, first you should sign up for a developer account at the developers site.  Then start a new project when you’re done there by clicking on Developers->My Projects-> Start New Application.  Ok, now we can get started.

For this example,  you’ll need to select the ScienceDirect Results page as your integration point when you create the gadget. It should look something like this:

Search Results Integration Point

All this gadget will do is print out the user’s search terms.  So to test the gadget, go to ScienceDirect, log in, and run a search. You should see something like this on the left hand side of your screen.  The text in the gadget will match whatever you searched for.

Step 1 Gadget

So how do we do this?  Well, here is the xml for our first basic gadget:

<?xml version="1.0" encoding="UTF-8"?>

<Module>
<ModulePrefs
        title="Step 1"
        title_url="http://developer.sciverse.com"
        author_email="you@you.com"
        description="Intro to Gadgets">
    <Require feature="opensocial-0.9" />
    <Require feature="sciverse" />
    <Require feature="hub" />
    <Require feature="org.jquery.core-1.4.2" />
</ModulePrefs>

<Content type="html" view="profile,canvas"><![CDATA[

<style>
	 #content_div{
		padding-top:15px;
	 	text-align:center;
		font-weight:bold;
	 }

</style>

<script type="text/javascript" >  

	// global variables
	var context;
	var searchTerms;
	var docTitle;
	/**
	 * 'run' is called when the 'onload' event is triggered after the page finished loading
	 */
	function run()
	{
		// the getContextInfo is a framework API call that returns the ContextInfo object.
		// @see http://developer.sciverse.com/framework#context
		gadgets.sciverse.getContextInfo(init);
	}

	/**
	 * 'init' initializes the gadget. it sets the user's search term as the default search term.
	 * this is called when the contextInfo call above succeeds.
	 */
	function init(data){
		context = data;
		searchTerms = context.searchTerms;

		$("#content_div").html(searchTerms);

	}

	// @see http://wiki.opensocial.org/index.php?title=Gadgets.util_%28v0.9%29#gadgets.util.registerOnLoadHandler
	//regester the onload function. When the page is fully loaded it will call this function
	gadgets.util.registerOnLoadHandler(run);

</script>

	<div id="content_div" style="font-size: 10;"></div>

]]></Content>

</Module>