So, in the last example I showed you how to get a property from the context info object and display it.  This next example is going to go a small step forward and add using user preferences. User Preferences can be used to add custom variables to your code and also pull in values from the frame work.  One of the most important ones you can do this with is the Secured Auth Token.  The Secured Auth Token is one of the required parameters needed to make Content Api Calls.  I’ve also added a call to adjustHeight().  This function will adjust the height of your gadget to fit it’s content.   In order for this to work you need to inlcude the feature “dynamic-height” in the Module Prefs.

On a side note:  One thing that might help new people to using some of the jquery functionality (code with $( ) ), is some JQuery Cheat sheets. Check it out here.  The JQuery Documentation can also be found at JQuery’s Site.

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

<Module>
<ModulePrefs
        title="SciVerse Examples - Content API Call 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="dynamic-height"/>
    <Require feature="org.jquery.core-1.4.2" />
</ModulePrefs>

<UserPref name="secureAuthtoken" datatype="hidden" />
<UserPref name="myPref" datatype="hidden" default_value="This is my custom Pref" />
<Content type="html" view="profile,canvas"><![CDATA[

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

	 .red{
	 	color:red;
		text-decoration:underline;

	 }

</style>

<script type="text/javascript" >  

	// global variables
	var myapikey = "your api-key here";
	var context;
	var authTok;
	var searchTerms;

	/**
	 * '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;
		authTok = context.secureAuthtoken;
		makeContentApiCall();
	}

	/**
	* Prepare to make the content api call.
	*/

	function makeContentApiCall()
	{  

		$("#content_div").append("<div>This is an auth Token from Context: <span class='red'> " + authTok + "</span></div><br/>");
		$("#content_div").append("<div>This is an auth Token from User Preferences: <span class='red'> __UP_secureAuthtoken__ </span></div><br/>");
		$("#content_div").append("<div>This is a custom user Preference:<span class='red'> __UP_myPref__ </span></div><br/>");
		$("#content_div").append("<div>The User's search terms:<span class='red'> " + searchTerms + "</span></div>");

		//automatically resize the height of the gadget to fit the content vertically
		//adjustHeight can also take a value like "399px"
		gadgets.window.adjustHeight();

	};

	// @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>