MySpace Developer Team : Example Code

What's New in MySpace OpenSocial 0.8

Chad Russell — Thu, 08 Jan 2009 21:09:00 GMT

The spec for OpenSocial 0.8 has been finalized and MySpace’s implementation has been released. There are some key benefits that 0.8 adds over 0.7 on the MySpace platform. The JavaScript container more closely conforms to the spec and some MySpace specific extensions have been pulled into the OpenSocial namespace. The result of this is that your 0.8 app will port much more easily to other platforms than your 0.7 app did. The app data API has been cleaned up and made more useful.

There are also important new features and capabilities on the MySpace platform that are only available to 0.8 apps:

Open Canvas allows your app to be functional for users even before they have added the app. Learn more about Open Canvas
Custom App Activities allow 0.8 apps to post activities into user Friend Updates. Learn more about Custom App Activities
App Notifications will allow apps to message their users directly, and will only be available on 0.8

In this three part series of articles, I’ll walk you through the process of creating an application from start to finish with emphasis on the six major improvements that distinguish 0.8 from 0.7 on MySpace:

Enhancements to the opensocial.Person object
Our new permission model, dubbed Open Canvas, that makes extensive use of opensocial.hasPermission and opensocial.requestPermission
Updates to app data to accept only valid JSON
The deprecation of PostTo in favor of opensocial.requestShareApp and opensocial.requsetSendMessage
Activities
App Notifications

Read What's New in MySpace OpenSocial 0.8:

Where's my Data API?

Chris — Tue, 19 Feb 2008 10:32:00 GMT

Happy holidays for you who had time off, and happy work for you who didn't. Of course, for those of us who are developers we no doubt had a working holiday :). Such is life in the world of tech...

Where's my Data API? Where's my Activities API?

Just wanted to let you folks know that we're working hard on the Data and Activities portions of OpenSocial. A lot of forum participants have been asking about them, and we're quite eager to get them up for you.

Why aren't they here already? Well, MySpace is kind of huge, and MySpace profiles tend to be very public--especially profiles of popular bands and celebrities. That creates a lovely atmosphere for virality, because popular profiles tend to be loci of friendship clusters, thus minimizing the degrees of separation between users. Hopefully those popular profiles will pick up your app and make it go viral. If your app goes viral, there is much cause to celebrate. That celebration might be cut short if the app goes down due to load. Because of the rather large scale of MySpace, we need to make sure that our middle tier is ready to go--your app will potentially be utilized by millions of simultaneous users, so we want your data to be served smoothy and error free.

Speaking of virality, we're also working on the Activities API. It's quite challenging to make it both flexible and scalable. As soon as we have a good picture of how it will look, we'll give you examples so you can get started coding.

Yes, there's Sample Code!

What blog post would be complete without sample code? The below app, which I recommend that you paste into the Canvas section, issues quite a few requests (different person, friends, photos, and albums requests). It then dumps the response objects into HTML so you can look at the properties that are available to you. Pretty straightforward, but illuminatory if you're new to the OpenSocial development process. I won't do much explaining of the workings of the code--it's more of a cut and paste deal. If you want basic documentation, head over to the "Learn and Play" section.

Working App 1 : Request example and data dump app

<style>

    #output { overflow:scroll;height:100%; }
    .objectGraph {

        font-size:small;
        background-color:whitesmoke;
        margin:10px;

        padding:10px;
        border:solid;
        border-width:1px;

    }
    .arrayGraph {
        font-size:small;
    }
    pre {

        padding:20px;
        background-color:white;
        border:dashed;

        border-width:1px;
        
    }
</style>
<div id="output"></div>

<script type="text/javascript">


function init()
{
    //Set the owner id so we don't have to use it later
    var personId = opensocial.DataRequest.PersonId.OWNER;
    
    //Create our DataRequest object

    var dr = opensocial.newDataRequest();

    //Set up an empty params object so we can use it for functions that require params.        
    var opt_params = {};

    //Request Albums

    var albumReq = 
        dr.newFetchAlbumsRequest(personId,opt_params);

    //Request Person data
    var personReq = 
        dr.newFetchPersonRequest(personId);

    //Request Friends

    var friendReq = 
        dr.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS);

    //Request Online Friends
    var onlineFriends_Params = {};
        onlineFriends_Params[opensocial.DataRequest.PeopleRequestFields.FILTER] = 
            opensocial.DataRequest.FilterType.ONLINE_FRIENDS;
    var onlineFriendsReq = 
        dr.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS,onlineFriends_Params);

    //Request First 5 Friends (using paging)        

    var pagedFriends_Params = {};
    pagedFriends_Params[opensocial.DataRequest.PeopleRequestFields.FIRST] = 1;
    pagedFriends_Params[opensocial.DataRequest.PeopleRequestFields.MAX] = 5;
    var pagedFriendsReq = 
        dr.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS,pagedFriends_Params);
    
    //Request Extended Person data

    var extendedPersonParams = {};
    extendedPersonParams[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = 
        [opensocial.Person.Field.ID,MyOpenSpace.Person.Field.ABOUT,
        MyOpenSpace.Person.Field.BOOKS];
    var bigPersonReq = dr.newFetchPersonRequest(personId,extendedPersonParams);

    //Request Photos        

    var photoReq = dr.newFetchPhotosRequest(personId,opt_params);
    
    //Add all the requests to the DataRequest
    dr.add(albumReq,'Albums');
    dr.add(personReq,'SmallPerson');
    dr.add(bigPersonReq,'ExtendedPerson');
    dr.add(friendReq,'BasicFriends');
    dr.add(onlineFriendsReq,'OnlineFriends');
    dr.add(pagedFriendsReq,'PagedFriends');
    dr.add(photoReq,'Photos');
    
    writeToOutput("Requesting data...");
    dr.send(response);            
}


//Response callback...
function response(data)
{
    writeToOutput("Got response back");
    
    var albums = data.get('Albums').getData();
    var bigPerson = data.get('ExtendedPerson').getData();
    var person = data.get('SmallPerson').getData();
    var friends = data.get('BasicFriends').getData();
    var onlineFriends = data.get('OnlineFriends').getData();
    var pagedFriends = data.get('PagedFriends').getData();
    var photos = data.get('Photos').getData();

    dumpArray("Albums","album",albums);
    dumpObject("Person","person",person);            
    dumpObject("Extended Person","person",bigPerson);            
    dumpArray("Friends","friend",friends);
    dumpArray("Online Friends","friend",onlineFriends);
    dumpArray("Paged Friends","friend",pagedFriends);
    dumpArray("Photos","photo",photos);
}


//Takes an object and dumps it out, with some example code
function spillTheBeans(name, input)
{
    var docOutput = "";
    var cOutput = "";
    var out = "";
    
    if(input.fields_ != null)
    {
        input = input.fields_;
    }
    
    
    for(var prop in input)
    {
        if(typeof(input[prop]) != "function")
        {
            docOutput +=  "<br /><b>" + prop + ":</b> " + input[prop];
            cOutput += "var _" + prop + " = " + name + ".getField(\""+prop+"\")" + ";\n"; 
        }
        
    }
    
    out += "<div class=\"objectGraph\">";
    out += "<b>Properties of "+name+":</b><br />";            
    out += docOutput;
    out += "<br /><br /><b>Code to access:</b>";
    out += "<pre>" + cOutput + "</pre>";
    out += "</div>";
    
    return out;
}



//Writes a response object's data and example code    
function dumpObject(name,smallname,obj)
{
    var out = "";
    out += "<div class=\"arrayGraph\">";
    out += "<h2>Got response back: Object of type "+name + "</h2>";
    out += spillTheBeans(smallname,obj.fields_);
    out += "</div>";
    writeRaw(out);
}


//Writes a response array's data and example code
function dumpArray(name,subname,obj)
{
    var out = "";
    out += "<div class=\"arrayGraph\">";
    out += "<h2>Got response back: Array of "+name+" with " + obj.size() + " items</h2>";
    

    var iterator = 1;            
    
    obj.each(function(myObj)            
    {
        out += "<h4>" + subname +" " + iterator +"</h4>";
        iterator++;
        out += spillTheBeans(subname,myObj);    
    });
    
    out += "</div>";

    writeRaw(out);            
}


function writeToOutput(message)
{
    document.getElementById("output").innerHTML += "<br />" + message;
}

function writeRaw(message)
{
    document.getElementById("output").innerHTML += message;
}

init();

</script>

Example app: RSS Reader

Christopher Bissell — Wed, 06 Feb 2008 01:51:00 GMT

In this post I hope to get you off the ground in terms of how to request data from other sites using the OpenSocial API. Remember that in OpenSocial your application is hosted in the browser and served off the container's domain (in this case, MySpace). XHRs (XML Http Requests) cannot be issued across domains (for example, Javascript hosted off of http://www.myspace.com cannot access data from http://www.google.com). Because of that restriction, you can't make a straight call to another domain. The OpenSocial API provides a simple mechanism called "makeRequest" that allows you to request data from any domain you want.

MakeRequest gets around the XHR cross-domain restriction by utilizing a custom http proxy hosted by MySpace. This proxy relays incoming requests to other sites and pipes the results back to the browser. It also optionally signs the requests using the OAuth methodology (the specifics will be covered in another article). It is important to note that this is not a standard open proxy--it does its best to verify that the request came from a valid OpenSocial application hosted on MySpace.

MakeRequest method signature:

opensocial.makeRequest(url,callback,opt_param)

url

The url you wish to be called.

callback(data)

The function you wish to be called with the results. The signature of the function should have at least one parameter (which will contain a reference to the data returned by the call).

opt_param

A bucket for a set of standard OpenSocial parameters that tell the proxy how to behave. There is quite a bit of functionality accessible through the manipulation of this object. To give you a taste of what you can do, below is some example code that exercises opt_param to its fullest.

code snippet 1 : Drill down into makeRequest parameters

function getRss(){
    var url = "http://www.codeproject.com/webservices/articlerss.aspx?cat=1";
    
    var params = {};
    
    //Lets makeRequest know that the result will be an XML document.

    params[opensocial.ContentRequestParameters.CONTENT_TYPE] = 
        opensocial.ContentRequestParameters.ContentType.XML;

     //Sets the request method to POST (default is GET).
     params[opensocial.ContentRequestParameters.METHOD] = 
        opensocial.ContentRequestParameters.MethodType.POST;

    //Adds two custom headers to the request. These headers will be passed on to the target.
    params[opensocial.ContentRequestParameters.HEADERS] = 
        {"x-myheader":"myheadervalue", "x-myotherheader":"myotherheadervalue"};

    //Tells the proxy to sign the request using OAuth.

    params[opensocial.ContentRequestParameters.AUTHORIZATION] = opensocial.ContentRequestParameters.AuthorizationType.SIGNED;    
 
    opensocial.makeRequest(url, makeRequest_callback, params);
}

So goes the request. opt_param takes a bucket of constants that you can use to tweak the request:

opensocial.ContentRequestParameters.CONTENT_TYPE 
    (takes a value from: opensocial.ContentRequestParameters.ContentType)

opensocial.ContentRequestParameters.METHOD 
    (takes a value from: opensocial.ContentRequestParameters.MethodType)

opensocial.ContentRequestParameters.HEADERS 
    (takes a key-value bucket)

opensocial.ContentRequestParameters.AUTHORIZATION 
    (takes a value from: opensocial.ContentRequestParameters.AuthorizationType)

This is not the official documentation for makeRequest, so I won't go into many details--instead I'll go on to create the app:). The code that parses the response is quite simple:

code snippet 2 : Response handling code

function makeRequest_callback(data,error){
    if (data == null) {
        $("rssDisplay").innerHTML = "no data returned--check your RSS url!";
        return;
    }
    var channelList = data.getElementsByTagName("channel");
    
    var channel = new RSSChannel(channelList[0]);
    
    $("header").innerHTML = getTag("h1", channel.Title);
    $("rssDisplay").innerHTML = channel.render();
}

The example application in this post is an RSS reader that uses a custom bit of code that translates XML into JavaScript objects. Parts of that code will be a lovely exercise in redundancy. Why? Because OpenSocial exposes an RSS implementation that is more robust than the one in this article. This article is more about how to call a third party site and parse the results (be they XML, JSON, or some other format). A lot of sites happen to expose XML in RSS, so I'm using such exposure as an example. In other words, this article continues the long and storied tradition of useless demo-code--sit back and enjoy!

MakeRequest: Simple RSS Reader Application

MakeRequest is for pasing data to and receiving data from your site (or, in the case of a mashup, a third party's site). Its method signature is:

First, let's set up some chrome and an initialization function:

code snippet 3 : Simple chrome for application

<style>

    body {
        background-color: whitesmoke;
    }
    
    h1 {

        font-size: medium;
    }
    
    #rssDisplay {
        border: 1px solid;

        height: 240px;
        overflow: auto;
        padding: 3px;

        background-color: white;
    }
    
    #rssDisplay p {
        font-size: small;

    }
</style>
<div id="container">
    <div id="header">

    </div>
    <div id="rssDisplay">
    </div>
    <script>

        
        function getRss(){
            //this will get the feed
        }
        
        getRss(); //initialize the application
    </script>
</div>

Above we have the trappings of an application--with no functionality. We'll now fill in the getRss() call with Javascript that calls the RSS feed (which happens to be the latest articles from "The Code Project").

code snippet 4 : Completed application

<style>
    body {
        background-color: whitesmoke;

    }
    
    h1 {
        font-size: medium;
    }

    
    #rssDisplay {
        border: 1px solid;
        height: 240px;

        overflow: auto;
        padding: 3px;
        background-color: white;

    }
    
    #rssDisplay p {
        font-size: small;
    }

</style>
<div id="container">
    <div id="header">
    </div>

    <div id="rssDisplay">
    </div>
    <script>
        
        /*
         * makeRequest implementation
         */

        function getRss(){
            var url = "http://www.codeproject.com/webservices/articlerss.aspx?cat=1";
            var params = {};
            //This parameter lets makeRequest know that the result will be an XML document.

            params[opensocial.ContentRequestParameters.CONTENT_TYPE] = opensocial.ContentRequestParameters.ContentType.XML;
            
            opensocial.makeRequest(url, makeRequest_callback, params);
            
        }
        
        function makeRequest_callback(data, url, error){
            if (data == null) {
                $("rssDisplay").innerHTML = "no data returned--check your RSS url!";
                return;
            }
            var channelList = data.getElementsByTagName("channel");
            
            var channel = new RSSChannel(channelList[0]);
            
            $("header").innerHTML = getTag("h1", channel.Title);
            $("rssDisplay").innerHTML = channel.render();
        }
        
        
        /*

         * Utility functions
         */
        //Cross browser grabber for text in an xml element
        function getNodeText(node){
            if (node.text != null) 
                return node.text;
            else 
                return node.textContent;
        }
        
        //Simple, non-performant tag renderer

        function getTag(tag, txt){
            return "<" + tag + ">" + txt + "</" + tag + ">";
        }
        
        //Adds a tag to a string

        function appendTag(str, tag, txt){
            str += getTag(tag, txt);
        }
        
        /*
         * RSS Feed Wrapper Objects
         */
        function RSSChannel(node){
            for (var i = 0; i < node.childNodes.length; i++) {
                var childNode = node.childNodes.item(i);
                
                switch (childNode.nodeName) {
                    case "title":
                        this.Title = getNodeText(childNode);
                        break;
                    case "link":
                        this.Link = getNodeText(childNode);
                        break;
                    case "description":
                        this.Description = getNodeText(childNode);
                        break;
                }
                
            }
            
            var items = node.getElementsByTagName("item");
            
            this.RSSItems = [];
            
            for (var i = 0; i < items.length; i++) {
                var item = items.item(i);
                
                var rssItem = new RSSItem(item);
                
                this.RSSItems.push(rssItem);
            }
        }
        
        RSSChannel.prototype.render = function(){
            var output = "";
            
            //    output += "<h1>" + this.Title + "</h1>";

            
            for (var rssItemId in this.RSSItems) {
                var rssItem = this.RSSItems[rssItemId];
                if (rssItem.IsValid != null && rssItem.IsValid()) 
                    output += rssItem.render();
            }
            
            return output;
            
        };
        
        
        function RSSItem(node){
            this.Title = "";
            this.Description = "";
            this.Link = "";
            this.Author = "";
            
            if (node.childNodes == null) 
                return;
            
            for (var i = 0; i < node.childNodes.length; i++) {
                var childNode = node.childNodes.item(i);
                
                
                switch (childNode.nodeName) {
                    case "description":
                        this.Description = getNodeText(childNode);
                        break;
                    case "title":
                        this.Title = getNodeText(childNode);
                        break;
                    case "link":
                        this.Link = getNodeText(childNode);
                        break;
                    case "author":
                        this.Author = getNodeText(childNode);
                        break;
                }
                
            }
        }
        
        RSSItem.prototype.render = function(){
            var output = "<p>";
            output += "<a target=\"_top\" href=\"" + this.Link + "\" title=\"" + this.Description + "\">";
            output += this.Title;
            output += "</a>";
            output += "<br />";
            output += "<i>by " + this.Author + "</i>";
            output += "</p>";
            return output;
        };
        
        RSSItem.prototype.IsValid = function(){
            if (this.Title != null && this.Title != "") 
                return true;
        };
        
        getRss();
    </script>

</div>

And there you have it. A simple RSS reader. Don't expect the code to parse all types of RSS feeds :).

OpenSocial app in the wild: Dream Interpretation

Christopher Bissell — Tue, 05 Feb 2008 22:46:00 GMT

For the purposes of demoing OpenSocial on MySpace to the SixApart Hackathon, I put together a dream interpretation application. This application is intended to demo a piece of third party functionality integrated into MySpace. People asked for the source and a brief explanation, so we'll put that in this blog post. This isn't exactly a working app--it's more of a bunch of source code that you can use to see various clumps of OpenSocial glue working. It highlights how to make requests to a third party site and combine the results with MySpace friend information.

The application profile is here:

A profile with the app installed is here:

To make this application, I took a pre-existing web site (a dream interpretation site I put together a long time ago), called http://www.enhypniomancy.com. This site has existed over the years in several different languages, on several different hosting companies, and using several different databases. Now it�s written in C#, so you�ll have to follow C# code to get the server stuff. If you've encountered c-style syntax before, it should be fairly easy to extrapolate that code into your server-side language of choice.

In order to work, the Dream Application needs to allow users to save dreams, interpret dreams, and request dreams on behalf of themselves and their friends. To enable this on the server-side, enhypniomancy.com exposes a set of JSON-formatted HTTP calls that encompass the following simple functionality:

Get dream (dream id)
Get dreams (user id)
Get friends� dreams (multiple user ids)
Add dream (user id, title, narrative)
Add interpretation (dream id, user id, interpretation)
Delete dream (dream id)

That functionality is available as a simple set of GET URLs. For example, the URL to get a dream is:


        http://www.enhypniomancy.com/Soc.ashx?command=getdream&dreamid=6

Simple enough. For those of you familiar with ASP.NET, the .ashx file is a HttpHandler, which is a simple request/response piping mechanism--functionally similar to a Java servlet. When you look at the source, you�ll see some database glue�I�m not going to release the database glue code because it isn�t relevant.

Server side code (hosted on third party site)

Below is the source for the server-side HttpHandler:

code snippet 1 : Dream App Server-Side C# (hosted on www.enhypniomancy.com

<%@ WebHandler Language="C#" Class="Soc" %>

using System;
using System.Text;
using System.Web;
using System.Web.Script.Serialization;
using Enhypniomancy.DreamDomain.CollectionClasses;
using Enhypniomancy.DreamDomain.EntityClasses;


public class JSonDreamResponse
{
    public string ErrorMessage;
    public bool HadError;
    public string ResponseMessage;
}


public class JSonDream
{
    
    public int DreamId;
    public string Title;
    public string Narrative;
    public string Date;
    public int Interpretations;
    public int UserId;

    public System.Collections.Generic.IList<JSonInterp> Interps = 
        new System.Collections.Generic.List<JSonInterp>();
}


public class JSonInterp
{
    public string Interpretation;
    public int UserId;
    public string InterpretationDate;
}


public class JSonFriend
{
    public int UserId;
    public System.Collections.Generic.IList<JSonDream> Dreams = 
        new System.Collections.Generic.List<JSonDream>();
}


public class JSonDreamList : JSonDreamResponse
{
    public JSonDream[] Dreams;
}

public class JSonFriendDreamList : JSonDreamResponse
{
    public JSonFriend[] Friends;
}


public class Soc : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string command = context.Request["command"];
        
        switch(command)
        {
            case "getdream" :
                {
                    GetDream(context);
                    break;
                }
            case "getdreams" :
                {
                    GetDreams(context);
                    break;
                }
            case "getfrienddreams" :
                {
                    GetFriendDreams(context);
                    break;
                }
            case "adddream" :
                {
                    EnterDream(context);
                    break;
                }
            case "addinterpretation" :
                {
                    EnterInterpretation(context);
                    break;
                }
            case "deletedream" :
                {
                    DeleteDream(context);
                    break;
                }
            default :
                {
                    throw new ApplicationException("Command: " + command + " is not supported");
                }
        }
        
        context.Response.ContentType = "text/json";
       context.Response.Cache.SetExpires(DateTime.Now.AddYears(1));
        
    }
    
    private int GetUserId(HttpContext context)
    {
        return int.Parse(context.Request["userid"]);
    }
    
    public void GetFriendDreams(HttpContext context)
    {
        try

        {
            string friendArray = context.Request["friendidlist"];
            string[] friendIdStringArray = 
                friendArray.Split(new char[]{','},StringSplitOptions.RemoveEmptyEntries);            
            int[] friendIdIntArray = new int[friendIdStringArray.Length];
            
            for(int i = 0; i < friendIdStringArray.Length; i++)
            {
                friendIdIntArray[i] = int.Parse(friendIdStringArray[i]);
            }
            SocialDreamCollection sdc = new SocialDreamCollection();

            SD.LLBLGen.Pro.ORMSupportClasses.IPredicate predicate =

                new SD.LLBLGen.Pro.ORMSupportClasses.FieldCompareRangePredicate(
                    Enhypniomancy.DreamDomain.HelperClasses.SocialDreamFields.UserId, friendIdIntArray);

            sdc.GetMulti(predicate);
            JSonFriendDreamList friendList = new JSonFriendDreamList();
            friendList.Friends = new JSonFriend[friendIdIntArray.Length];
            for (int i = 0; i < friendIdIntArray.Length; i++ )
            {
                friendList.Friends[i] = new JSonFriend();
                friendList.Friends[i].UserId = friendIdIntArray[i];                
            }
                for (int i = 0; i < sdc.Count; i++)
                {
                    SocialDreamEntity sde = sdc[i];
                    JSonDream dream = new JSonDream();
                    MapJSonToSocialDream(dream, sde);

                    for(int j = 0; j < friendIdIntArray.Length; j++)
                    {
                        if(friendList.Friends[j].UserId == sde.UserId)
                        {
                            friendList.Friends[j].Dreams.Add(dream);
                        }
                    }
                }
            WriteToOutput(context,friendList);
        }
        catch(Exception exc)
        {
            WriteError(context,exc.ToString());
        }
    }
    
    public void DeleteDream(HttpContext context)
    {
        try

        {
            SocialDreamEntity sde = 
                new SocialDreamEntity(int.Parse(context.Request["dreamid"]));


            sde.SocialDreamInterpretation.DeleteMulti();
            
            sde.Delete();     
            
            WriteResponse(context,"Successfully deleted dream " + 
                int.Parse(context.Request["dreamid"]));      
        }
        catch(Exception exc)
        {
            WriteError(context,exc.ToString());
        }
    }
    
    public void EnterInterpretation(HttpContext context)
    {
        try

        {
            Enhypniomancy.DreamDomain.EntityClasses.SocialDreamInterpretationEntity sde =
                new SocialDreamInterpretationEntity();

            sde.DreamId = int.Parse(context.Request["dreamid"]);
            sde.InterpreterUserId = int.Parse(context.Request["userid"]);
            sde.InterpretationDate = DateTime.Now;
            sde.Interpretation = context.Request["interpretation"];
            sde.Save();
            
            WriteResponse(context,"Saved interpreation for dream " + 
                sde.DreamId + " by interpreter " + sde.InterpreterUserId);
        }
        catch (Exception exc)
        {
            WriteError(context, exc.ToString());
        }
    }
    
    public void EnterDream(HttpContext context)
    {
        try

        {
            Enhypniomancy.DreamDomain.EntityClasses.SocialDreamEntity sde = 
                new SocialDreamEntity();

            int userId = GetUserId(context);
            string title = context.Request["title"];
            string narrative = context.Request["narrative"];

            sde.DateCreated = DateTime.Now;
            sde.UserId = userId;
            sde.Narrative = narrative;
            sde.Title = title;
            sde.Save();

            WriteResponse(context,"Successfully saved dream " 
                + sde.DreamId + " with title " + sde.Title + " to user " + userId);
           
        }
        catch(Exception exc)
        {

            WriteError(context,exc.ToString());
        }
    }
    
    private void WriteToOutput(HttpContext context, object obj)
    {
        System.Text.StringBuilder output = new StringBuilder();
        System.Web.Script.Serialization.JavaScriptSerializer jss = 
            new JavaScriptSerializer();
        jss.Serialize(obj, output);
        context.Response.Write(output);
        
    }
    
    
    private void WriteError(HttpContext context, string message)
    {
        JSonDreamResponse e = new JSonDreamResponse();
        e.ErrorMessage = message;

        e.HadError = true;
        WriteToOutput(context,e);
    }
    
    private void WriteResponse(HttpContext context,string message)
    {
        JSonDreamResponse jdr = new JSonDreamResponse();
        jdr.ResponseMessage = message;
        jdr.HadError = false;
        WriteToOutput(context,jdr);
    }
    
    public void GetDream(HttpContext context)
    {
        try

        {
            SocialDreamEntity sde = 
                new SocialDreamEntity(int.Parse(context.Request["dreamid"]));

            JSonDreamList jdl = new JSonDreamList();
            jdl.Dreams = new JSonDream[1];
            JSonDream jdr = new JSonDream();
            MapJSonToSocialDream(jdr,sde);

            SocialDreamInterpretationCollection sdic = 
                new SocialDreamInterpretationCollection();
            sdic.GetMulti((Enhypniomancy.DreamDomain.HelperClasses.SocialDreamInterpretationFields.DreamId ==

                           jdr.DreamId));
            
            foreach(SocialDreamInterpretationEntity sdie in sdic)
            {
                JSonInterp jsi = new JSonInterp();
                jsi.Interpretation = sdie.Interpretation;
                jsi.InterpretationDate = sdie.InterpretationDate.ToShortDateString();
                jsi.UserId = sdie.InterpreterUserId;
                jdr.Interps.Add(jsi);
            }
            
            jdl.Dreams[0] = jdr;
            
            WriteToOutput(context,jdl);
                        
        }
        catch(Exception exc)
        {
            WriteError(context,exc.ToString());
        }
    }
    private void MapJSonToSocialDream(JSonDream dream, SocialDreamEntity sde)
    {
        dream.Date = sde.DateCreated.ToShortDateString();
        dream.Narrative = sde.Narrative;
        dream.DreamId = sde.DreamId;
        dream.Title = sde.Title;
        dream.UserId = sde.UserId;
        dream.Interpretations = sde.SocialDreamInterpretation.Count;
    }
    
    public void GetDreams(HttpContext context)
    {
        try

        {
            int userId = int.Parse(context.Request["userid"]);

            Enhypniomancy.DreamDomain.CollectionClasses.SocialDreamCollection sdc = 
                new SocialDreamCollection();

            SD.LLBLGen.Pro.ORMSupportClasses.ISortExpression ise = 
                new SD.LLBLGen.Pro.ORMSupportClasses.SortExpression(
                (Enhypniomancy.DreamDomain.HelperClasses.SocialDreamFields.DateCreated |

                 SD.LLBLGen.Pro.ORMSupportClasses.SortOperator.Descending));
            
            sdc.GetMulti(
                (Enhypniomancy.DreamDomain.HelperClasses.SocialDreamFields.UserId == userId),15, ise);
            JSonDreamList jdl = new JSonDreamList();
            jdl.Dreams = new JSonDream[sdc.Count];

            for(int i = 0; i < sdc.Count; i++)
            {
                JSonDream dream = new JSonDream();
                SocialDreamEntity sde = sdc[i];
                MapJSonToSocialDream(dream, sde);

                jdl.Dreams[i] = dream;
            }

            WriteToOutput(context, jdl);
            
        }
        catch(Exception exc)
        {
            WriteError(context,exc.ToString());
        }
    }
  
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

The handler uses the Microsoft ASP.NET AJAX Framework to serialize objects into JSON. You'll notice the complete lack of security. People could do anything on behalf of anyone else by munging requests. For this to be a secure application, I would enable OAuth support on the server side. As soon as I have that done I'll update this blog post, but this article is really focused more on the client--JavaScript using the OpenSocial API.

OpenSocial JavaScript code on MySpace

Now on to the JavaScript! I�m not trying to wow anyone here with my JavaScript abilities. I do like my little �renderView� system, which takes a set of divs and switches them on or off depending on what view you want to render, but it�s been done better, I�m sure. Unfortunately (or fortunately, depending on your leanings), the app only works on FireFox. If I get it working on IE I�ll send along an update. Below is the entirety of the application (you could cut and paste this into an app of your own and it would work):

working app 1 : Dream App JavaScript Source

<style type="text/css">

    body {
        margin: 0px;
        background-color: black;

    }
    
    #ui {
        background-position: bottom;
        background-color: #000000;

        width: 430px;
        height: 430px;
        color: #FFFFFF;

        background-image: 
        url(http://www.enhypniomancy.com/images/DreamsTitle.jpg);
        background-repeat: no-repeat;
    }

    
    #nav {
        background-color: #000066;
        border-bottom-color: #FF0000;

        border-bottom-width: thin;
        border-bottom-style: dashed;
    }

    
    a {
        color: #FF00FF;
        cursor: pointer;

    }
    
    a:active {
        color: #FF0000;
    }

    
    a:hover {
        background-color: #00FFFF;
    }
    
    .view_Visible {

        width: 100%;
        height: 100%;
        display: inline;

        word-wrap: normal;
    }
    
    .view_Invisible {
        display: none;

    }
    
    #canvas {
        overflow: auto;
        border: thin solid #800000;

        height: 85%;
        margin: 15px;
        padding: 5px;

    }
    
    #Text2 {
        height: 177px;
        width: 373px;

    }
    
    textarea {
        height: 68px;
        width: 375px;

    }
    
    span {
        font-size: small;
    }

    
    pre {
        font-family: Arial;
        font-size: small;

        font-style: italic;
    }
</style>
<div id="ui">

    <div id="nav">
        <a title="Dreams" onclick="renderView('dreams')">Dreams</a>

        | <a title="Enter Dream" onclick="renderView('newdream');">Enter Dream</a>
        | <a onclick="renderView('friends')">Friends' Dreams</a>

        | <a onclick="renderView('search');">Search</a>
        | <a onclick="renderView('help');">Help!</a>

    </div>
    <div id="canvas">
        <div id="dreams" class="view_Invisible">

            <div id="lastDreams">
            </div>
        </div>
        <div id="friends" class="view_Invisible">

            Friends
        </div>
        <div id="view" class="view_Invisible">
            View dream
        </div>

        <div id="interpret" class="view_Invisible">
            Interpret dream
            <br/>
            <p>

                Title: <span id="interpTitle"></span>
                <br/>
                Narrative:
                <br/>

                <span id="interpNarrative"></span>
            </p>
            <p>
                Your interpretation:
                <br/>

                <textarea id="interpInput">
                </textarea>
                <br/>
                <input type="button" value="Submit your interpretation" 
                onclick="addInterp()" id="interpButton"/>

            </p>
        </div>
        <div id="search" class="view_Invisible">

            Search
        </div>
        <div id="help" class="view_Visible">
            Welcome to the land of dream interpretations!
            <br/>

            <br/>
            You can use this application to journal your dreams, 
            view your friends' dreams, 
            and interpret your friends' dreams. 
            <br/>
            <br/>
            You can also search through your and your friends' dreams. 
            Ever wonder if themes 
            are floating between you and your friends' dreams? Hmm?
            <br/>

            <br/>
            Thought so.
        </div>
        <div id="newdream" class="view_Invisible">

            Enter a new dream into your journal:
            <br/>
            Title: 
            <br/>
            <input id="dreamTitle" type="text"/>

            <br/>
            Narrative:
            <br/>
            <textarea id="dreamNarrative">
            </textarea>

            <br/>
            <br/>
            <input id="button_EnterDream" type="button" 
            value="Enter dream..." onclick="enterDream()"/>

        </div>
        <div id="waiting" class="view_Invisible">
            <blink>

                Working...
            </blink>
        </div>
    </div>
    <div id="error" class="view_Invisible">

        Errors:
        <br/>
    </div>
</div>
<script type="text/javascript">

    
    //####Helper functions####
    
    
    
    function showError(errorMessage){
        renderView("error");
        var errorDiv = document.getElementById("error");
        errorDiv.innerHTML += errorMessage + "<br />";
    }
    
    
    //####Globals and class definitions####

    
    
    
    User.prototype.getDisplayHtml = function(){
        var response = "<img width=\"45px\" src=\"" + 
        this.UserThumbnail + "\" /><br /><a href=\"" + 
        this.UserProfileURL + "\">" + 
        this.UserName + "</a><br />";
        return response;
    }
    
    
    
    var currentUserId = 0;
    var friendIdList = new Array();
    var friendDictionary = {};
    var currentUser;
    var friendList = {};
    var viewerId;
    
    function User(userId, userName, userThumnail, userProfileURL){
        this.UserId = userId;
        this.UserName = userName;
        this.UserThumbnail = userThumnail;
        this.UserProfileURL = userProfileURL;
        
        
    }
    
    function init(){
        renderView("working");
        populateUserData();
    }
    
    function populateUserData(){
        //1: Create the DataRequest.

        var dataRequest = opensocial.newDataRequest();
        
        //2: Prepare RequestItems to be added to the DataRequest             
        var friendRequest = 
            dataRequest.newFetchPeopleRequest(
                opensocial.DataRequest.Group.OWNER_FRIENDS);
        var personRequest = 
            dataRequest.newFetchPersonRequest(
                opensocial.DataRequest.PersonId.OWNER);
        var viewerRequest = 
            dataRequest.newFetchPersonRequest(
                opensocial.DataRequest.PersonId.VIEWER);
        //3: Add the RequestItems to the DataRequest.

        dataRequest.add(friendRequest);
        dataRequest.add(personRequest);
        
        //4: Send it along, and expect a function called responseCallback(dataResponse) to be executed when it's done.
        dataRequest.send(populateUserData_Callback);
    }
    
    function populateUserData_Callback(dataResponse){
    
        var errorHappened = dataResponse.hadError();
        if (!errorHappened) {
            var friendsData = 
                dataResponse.get(
                    opensocial.DataRequest.Group.OWNER_FRIENDS).getData();
            var ownerData = 
                dataResponse.get(
                    opensocial.DataRequest.PersonId.OWNER).getData();
            
            var viewer = 
                dataResponse.get(
                    opensocial.DataRequest.PersonId.VIEWER);
            
            if (viewer != null) {
                var viewerData = 
                    dataResponse.get(
                        opensocial.DataRequest.PersonId.VIEWER).getData();
                viewerId = 
                    viewerData.getField(opensocial.Person.Field.ID);
            }
            else {
                viewerId = ownerData.getField(opensocial.Person.Field.ID);
            }
            var ownerName = 
                ownerData.getField(opensocial.Person.Field.NAME);
            var ownerId = 
                ownerData.getField(opensocial.Person.Field.ID);
            var ownerURL = 
                ownerData.getField(opensocial.Person.Field.PROFILE_URL);
            var ownerImage = 
                ownerData.getField(opensocial.Person.Field.THUMBNAIL_URL);
            
            var ownerObj = new User(ownerId, ownerName, ownerImage, ownerURL);
            currentUser = ownerObj;
            currentUserId = ownerId;
            
            friendsData.each(function(friendData){
                var friendName = 
                    friendData.getField(opensocial.Person.Field.NAME);
                var friendThumbnailUrl = 
                    friendData.getField(opensocial.Person.Field.THUMBNAIL_URL);
                var friendId = 
                    friendData.getField(opensocial.Person.Field.ID);
                var friendURL = 
                    friendData.getField(opensocial.Person.Field.PROFILE_URL);
                
                var friendObj = 
                    new User(friendId, friendName, friendThumbnailUrl, friendURL);
                friendDictionary[friendId] = friendObj;
                friendIdList.push(friendId);
            });
            
            //Let's shove the current user into the "friendDictionary" so we can look him/her up without silly if login

            friendDictionary[currentUserId] = currentUser;
            
            
            renderView("help");
        }
        else {
            showError("Error on dataresponse");
        }
        
    }
    
    
    //End OpenSocial integration point
    
    //View management code

    //Views assume that there is a <div> whose ID corresponds to the name of the view
    var currentView = "dreams";
    var views = new Array("dreams", "friends", "search", "help", "newdream", "view", "interpret", "waiting");
    
    function switchOnWaitingView(message){
    
        for (var i = 0; i < views.length; i++) {
            var view = views[i];
            document.getElementById(view).setAttribute("class", "view_Invisible");
        }
        
        var waitingDiv = document.getElementById("waiting")
        waitingDiv.innerHTML = "<blink>" + message + "</blink>";
        waitingDiv.setAttribute("class", "view_Visible");
    }
    
    function switchOffWaitingView(){
        var waitingDiv = document.getElementById("waiting")
        
        waitingDiv.setAttribute("class", "view_Invisible");
        
        for (var i = 0; i < views.length; i++) {
            var view = views[i];
            if (view == currentView) 
                document.getElementById(view).setAttribute("class", "view_Visible");
        }
        
    }
    
    
    function renderView(name){
        currentView = name;
        
        for (var i = 0; i < views.length; i++) {
            var view = views[i];
            if (view == name) {
                document.getElementById(view)
                    .setAttribute("class", "view_Visible");
            }
            else {
                document.getElementById(view)
                    .setAttribute("class", "view_Invisible");
            }
        }
        
        
        //For a specific initialize function for a view, add it to the below. Some views do not

        //require initialization because they do not grab data.
        switch (name) {
            case "dreams":
                initializeView_dreams();
                break;
            case "friends":
                initializeView_frienddreams();
                break;
            case "newdream":
                initializeView_newdream();
                break;
        }
        
        
    }
    
    
    
    function initializeView_frienddreams(){
        var intArray = '';
        for (var i = 0; i < friendIdList.length; i++) {
            intArray += friendIdList[i] + ",";
        }
        var finalIntArray = intArray.substr(0, intArray.length - 1);
        var params = {};
        params.friendidlist = intArray;
        
        getResponse("getfrienddreams", 
            initializeView_frienddreams_Callback, params);
    }
    
    function initializeView_frienddreams_Callback(response){
        var friendDreamDiv = document.getElementById("friends");
        friendDreamDiv.innerHTML = "The following friends have posted dreams.";
        
        var numPosted = 0;
        
        for (var i = 0; i < response.Friends.size(); i++) {
            friendDreamDiv.innerHTML += "<p>";
            var dreamer = friendDictionary[response.Friends[i].UserId];
            
            if (dreamer != null && response.Friends[i].Dreams.size() > 0)
            {
                friendDreamDiv.innerHTML += 
                    dreamer.getDisplayHtml() + "<br />";
                
                for (var j = 0; j < response.Friends[i].Dreams.size(); j++) {
                    friendDreamDiv.innerHTML += 
                        renderDream(response.Friends[i].Dreams[j]);
                }
                numPosted++;
            }
            
        }
        
        
        if (numPosted == 0) {
            friendDreamDiv.innerHTML = "<br />None of your friends have posted dreams--encourage them to do so! Here's a list of them--go to their profiles and remind them :)<br/>";
            
            for (var i = 0; i < friendIdList.length; i++) {
                friendDreamDiv.innerHTML += 
                    friendDictionary[friendIdList[i]].getDisplayHtml();
            }
        }
        
        
        
    }
    
    function initializeView_dreams(){
        var params = {};
        params.userid = currentUserId;
        
        getResponse("getdreams", initializeView_dreams_Callback, params);
    }
    
    function initializeView_dreams_Callback(response){
        var numDreams = response.Dreams.size();
        var dreamDiv = document.getElementById("lastDreams");
        
        dreamDiv.innerHTML = "";
        
        if (numDreams == 0) {
            dreamDiv.innerHTML += "<br />" 
            + currentUser.UserName + " has no dreams in the system.<br />";
        }
        else 
            if (numDreams == 1) {
                dreamDiv.innerHTML += 
                    "<br />Displaying 1 dream of " 
                    + currentUser.UserName + "<br />";
            }
            else {
                dreamDiv.innerHTML += 
                    "<br />Displaying " + numDreams + " dream of " 
                    + currentUser.UserName + "<br />";
            }
        
        for (var i = 0; i < numDreams; i++) {
            var dream = response.Dreams[i];
            dreamDiv.innerHTML += renderDream(dream);
        }
    }
    
    function renderDream(dream){
    
        var response = "<span id=\"" + dream.DreamId + "\">" +

        dream.Date +
        " : " +
        dream.Title +
        " : " +

        dream.Interpretations +
        " Interps " +
        "(<a onclick=\"deleteDream(" +

        dream.DreamId +
        ")\">del</a>/<a onclick=\"newInterp(" +
        dream.DreamId +

        ")\">interp</a>/<a onclick=\"viewDream(" +
        dream.DreamId +
        ")\">view</a>)</span><br />";
        
        return response;
    }
    
    
    function viewDream(dreamId){
    
        renderView("view");
        var params = {};
        params.dreamid = dreamId;
        getResponse("getdream", viewDream_Callback, params);
    }
    
    function viewDream_Callback(response){
        var viewDiv = document.getElementById("view");
        viewDiv.innerHTML = "";
        viewDiv.innerHTML += 
            "<img width=\"200\" src=\"http://www.enhypniomancy.com/images/tiny_logo.jpg\" /><br />";
        
        var dreamerHtml = 
            friendDictionary[response.Dreams[0].UserId].getDisplayHtml();
        
        viewDiv.innerHTML += dreamerHtml;
        viewDiv.innerHTML += "Date: " + response.Dreams[0].Date + "<br />";
        viewDiv.innerHTML += "Title: " + response.Dreams[0].Title + "<br />";
        viewDiv.innerHTML += "Narrative: <br/>";
        viewDiv.innerHTML += "<p><i> " + response.Dreams[0].Narrative + "</i></p>";
        
        if (response.Dreams[0].Interps.size() == 0) {
            viewDiv.innerHTML += "<p><a onclick=\"newInterp(" + response.Dreams[0].DreamId + ")\">No interpretations yet! Click here to interpret this dream.</a></p>";
        }
        else {
            viewDiv.innerHTML 
                += "<img width=\"200\" src=\"http://www.enhypniomancy.com/images/post_interpretation.jpg\" />";
            
            for (var i = 0; i < response.Dreams[0].Interps.size(); i++) {
                var dreamInterpreter = 
                    friendDictionary[response.Dreams[0].Interps[i].UserId];
                
                if (dreamInterpreter != null) //If we have an interpretation without an interpreter, they are probably not friends any more.

                {
                    viewDiv.innerHTML += "<p>";
                    viewDiv.innerHTML += dreamInterpreter.getDisplayHtml() + "<br />";
                    viewDiv.innerHTML += "Date: " + response.Dreams[0].Interps[i].InterpretationDate + "<br />";
                    viewDiv.innerHTML += "Interpretation: <br />";
                    viewDiv.innerHTML += "<i>" + response.Dreams[0].Interps[i].Interpretation + "</i>";
                    viewDiv.innerHTML += "</p>";
                    
                }
            }
            
        }
        
    }
    
    function newInterp(dreamId){
        var params = {};
        params.dreamid = dreamId;
        
        getResponse("getdream", newInterp_Callback, params);
    }
    
    function newInterp_Callback(response){
        renderView("interpret");
        
        document.getElementById("interpInput").value = "";
        document.getElementById("interpTitle")
            .innerHTML = response.Dreams[0].Title;
        document.getElementById("interpNarrative")
            .innerHTML = "<i>" + response.Dreams[0].Narrative + "</i>";
        
        document.getElementById("interpButton")
            .setAttribute("onclick", "addInterp(" + response.Dreams[0].DreamId + ")");
        document.getElementById("interpButton").value = 
            "Click to add interpretation";
        
        
    }
    
    function addInterp(dreamId){
        document.getElementById("interpButton").value = "Submitting...";
        
        var interpText = document.getElementById("interpInput").value;
        
        var params = {};
        params.dreamid = dreamId;
        params.userid = viewerId;
        params.interpretation = interpText;
        tempdreamid = dreamId;
        getResponse("addinterpretation", addInterp_Callback, params);
        
    }
    
    var tempdreamid = 0;
    
    function addInterp_Callback(response){
        document.getElementById("interpButton")
            .value = "Interpretation added. Click to see the dream.";
        document.getElementById("interpButton")
            .setAttribute("onclick", "viewDream(" + tempdreamid + ")");
    }
    
    function deleteDream(dreamId){
        if (confirm("Are you sure you wish to delete this dream?")) {
            var params = {};
            params.dreamid = dreamId;
            getResponse("deletedream", deleteDream_Callback, params);
        }
    }
    
    function deleteDream_Callback(response){
        renderView("dreams");
    }
    
    
    
    function trace(message){
    
    
        document.getElementById("messageDiv").innerHTML += message + "<br />";
    }
    
    function startThisUp(){
        //var dataRequest = opensocial.newDataRequest();

        renderView("dreams");
        
        alert("hi!");
        
        trace("Starting...");
        
        var id = document.getElementById("dreamIdText").value;
        trace("Getting dream with id " + id);
        
        
        trace("Hello world called");
    }
    
    function helloWorldSuccess(response){
        trace("Success callback");
    }
    
    function helloWorldFailure(response){
        trace("fail callback");
        
    }
    
    
    
    function initializeView_newdream(){
        document.getElementById("dreamTitle").value = "";
        document.getElementById("dreamNarrative").value = "";
        document.getElementById("button_EnterDream")
            .value = "Click to enter dream";
        document.getElementById("button_EnterDream")
            .disabled = false;
    }
    
    function enterDream(){
        var titleText = document.getElementById("dreamTitle").value;
        var narrativeText = document.getElementById("dreamNarrative").value;
        
        var button = document.getElementById("button_EnterDream");
        button.disabled = true;
        button.value = "Submitting...";
        
        var params = {};
        params.userid = viewerId;
        params.title = titleText;
        params.narrative = narrativeText;
        
        getResponse("adddream", enterDream_Callback, params);
        
        
    }
    
    function enterDream_Callback(response){
        renderView("dreams");
    }
    
    
    function getResponse(command, callback, params){
        params.random = Math.random();
        var url = "http://www.enhypniomancy.com/Soc.ashx?command=" + command;
        
        for (var param in params) {
            url += "&" + param + "=" + encodeURIComponent(params[param]);
        }
        
        var url2 = url;
        os_params = {};
        
        
        
        
        switchOnWaitingView("Executing makeRequest for external url and waiting for resopnse...");
        opensocial.makeRequest(url2, makeRequest_Callback, os_params);
        
        function makeRequest_Callback(data){
            var jsonedResponseObject = data.responseText.evalJSON();
            
            if (jsonedResponseObject.HadError == true) {
                showError("Error talking to server: " 
                    + jsonedResponseObject.ErrorMessage);
            }
            
            switchOffWaitingView();
            callback(jsonedResponseObject);
        }
    }
    
    
    
    
    init();

</script>

Let's call out some important pieces. When you start up the app, it calls the init() function, which in turn grabs the OpenSocial-centric data necessary for the application to work. It needs the data of the Owner (the user who installed the app) and the Owner's friends (the friends of the user who installed the app). Below is a call-out of the code that does all the OpenSocial data munging. You'll notice that I map the OpenSocial Person objects to my own User object--I actually built this entire application without OpenSocial, and took about an hour to integrate. I think that's a good practice and also shows the strength of the platform, which is that it is very much just another JavaScript library you import, while you focus on writing your app in the exact way you want.

code snippet 2 : Initialization Calls for Owner and Owner's Friends

var currentUserId = 0;
var friendIdList = new Array();

var friendDictionary = {};
var currentUser;
var friendList = {};
var viewerId;


function User(userId, userName, userThumnail, userProfileURL)
{
    this.UserId = userId;
    this.UserName = userName;
    this.UserThumbnail = userThumnail;
    this.UserProfileURL = userProfileURL;
    
    
}


function init()
{
    renderView("working");
    populateUserData();
}

function populateUserData()
{    
        //1: Create the DataRequest.
        var dataRequest = opensocial.newDataRequest();

        //2: Prepare RequestItems to be added to the DataRequest             

        var friendRequest = dataRequest.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS);
        var personRequest = dataRequest.newFetchPersonRequest(opensocial.DataRequest.PersonId.OWNER);
        var viewerRequest = dataRequest.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER);
        //3: Add the RequestItems to the DataRequest.

        dataRequest.add(friendRequest);
        dataRequest.add(personRequest);

        //4: Send it along, and expect a function called responseCallback(dataResponse) to be executed when it's done.
        dataRequest.send(populateUserData_Callback);
}

function populateUserData_Callback(dataResponse)
{
    
    var errorHappened = dataResponse.hadError();
    if(!errorHappened)
    {
        var friendsData = dataResponse.get(opensocial.DataRequest.Group.OWNER_FRIENDS).getData();
        var ownerData = dataResponse.get(opensocial.DataRequest.PersonId.OWNER).getData();
        
        var viewer = dataResponse.get(opensocial.DataRequest.PersonId.VIEWER);
        
        if (viewer != null) {
            var viewerData = dataResponse.get(opensocial.DataRequest.PersonId.VIEWER).getData();
            viewerId = viewerData.getField(opensocial.Person.Field.ID);
        }
        else{
            viewerId = ownerData.getField(opensocial.Person.Field.ID);
        }
        var ownerName = ownerData.getField(opensocial.Person.Field.NAME);
        var ownerId = ownerData.getField(opensocial.Person.Field.ID);
        var ownerURL = ownerData.getField(opensocial.Person.Field.PROFILE_URL);
        var ownerImage = ownerData.getField(opensocial.Person.Field.THUMBNAIL_URL);
        
        var ownerObj = new User(ownerId,ownerName,ownerImage,ownerURL);
        currentUser = ownerObj;
        currentUserId = ownerId;
        
        friendsData.each(
         function(friendData) {
            var friendName = friendData.getField(opensocial.Person.Field.NAME);
            var friendThumbnailUrl = friendData.getField(opensocial.Person.Field.THUMBNAIL_URL);
            var friendId = friendData.getField(opensocial.Person.Field.ID);
            var friendURL = friendData.getField(opensocial.Person.Field.PROFILE_URL);
            
            var friendObj = new User(friendId,friendName,friendThumbnailUrl,friendURL);
            friendDictionary[friendId] = friendObj;
            friendIdList.push(friendId);
         }
        );

        //Let's shove the current user into the "friendDictionary" so we can look him/her up without silly if login

        friendDictionary[currentUserId] = currentUser;
        
        
        renderView("help");
    }
    else
    {
        showError("Error on dataresponse");
    }
    
}

The above code initializes the app. It loads information about the Owner, the Viewer, and the Owner's friends. It then maps them to a custom User object and stores the users as a collection that can be accessed by the rest of the application in a manner that is decoupled from OpenSocial-specific calls.

The above code is one half of the OpenSocial interaction in this app. The other half uses the OpenSocial client-to-third-party-server API call: opensocial.makeRequest(). In the below code I'm using a wrapper around makeRequest, so as far as my code is concerned I'm making a simple AJAX call. (In fact, before I integrated OpenSocial into this app I was using Prototype's AJAX method.)

code snippet 3 : makeRequest() wrapper

function getResponse(command,callback,params)
{
            params.random = Math.random();
            var url = "http://www.enhypniomancy.com/Soc.ashx?command=" + command;
            
            for(var param in params)
            {
                url += "&" + param + "=" + encodeURIComponent(params[param]);
            }
            
            var url2 = url;
            os_params = {};            




            switchOnWaitingView("Executing makeRequest for external url and waiting for resopnse...");
            opensocial.makeRequest(url2,makeRequest_Callback,os_params);

            function makeRequest_Callback(data)
            {
                var jsonedResponseObject = data.responseText.evalJSON();
                
                if(jsonedResponseObject.HadError == true)
                {
                    showError("Error talking to server: " + jsonedResponseObject.ErrorMessage);
                }

                switchOffWaitingView();
                callback(jsonedResponseObject);
            }
}

The above code allows you to pass a bucket of parameters that will be translated into a single opensocial.makeRequest() call. Following is an example of code that calls it:

code snippet 4 : Javascript that calls makeRequest wrapper

function initializeView_newdream()
{
            document.getElementById("dreamTitle").value = "";
            document.getElementById("dreamNarrative").value = "";
            document.getElementById("button_EnterDream").value = "Click to enter dream";
            document.getElementById("button_EnterDream").disabled = false;
        }
        
        function enterDream()
        {
            var titleText = document.getElementById("dreamTitle").value;
            var narrativeText = document.getElementById("dreamNarrative").value;
            
            var button = document.getElementById("button_EnterDream");
            button.disabled = true;
            button.value = "Submitting...";
            
            var params = {};
            params.userid = viewerId;
            params.title = titleText;
            params.narrative = narrativeText;
            
            getResponse("adddream",enterDream_Callback,params);

                        
        }
        
        function enterDream_Callback(response)
        {
            renderView("dreams");
}

What you will see under the covers when you invoke this code is a request that goes to http://api.msappsapce.com/relay.proxy. This will then return the response from your own site. The rest of the app is custom UI. Put it all together, and you have yourself a dream interpretation app!