With the newest version of OpenSocial out, I felt compelled to revisit it, despite the fact that my new job couldn't have me farther from it. A labor of love, some would say, to stay up-to-date on a constantly evolving platform, like trying to hold onto pudding with your bare hands. Anyways, where was I?
I'm going to develop an OpenSocial 0.8 app from scratch. Let's get started. First, I need to set up the initial scaffold.
<?xml version="1.0" encoding="UTF-8" ?><Module><ModulePrefs title="Pandaface"><Require feature="opensocial-0.8"/></ModulePrefs><Content type="html"><![CDATA[<div id="gadgetdiv">Panda!</div>]]></Content></Module>
Step 2 is setting up the first data request. In my first request, I like to get the OWNER and VIEWER objects. These will allow me to know if the viewer is looking at their own version of the App or someone else's. To do this, gogoGadget is changed to look like this.
function gogoGadget()This creates a request object, adds two FetchPersonRequests, and sends the request out, saying that the function 'response' will deal with the data response. It is important to note that the callback will not execute until it has all the data. Let's lake a took at the response function.
{
var request = opensocial.newDataRequest();
request.add(request.newFetchPersonRequest("OWNER"), "get_owner");
request.add(request.newFetchPersonRequest("VIEWER"), "get_viewer");
request.send(response);
};
function response(responseData) { owner = responseData.get('get_owner').getData(); viewer = responseData.get('get_viewer').getData(); };
Not terribly interesting at the moment, but it is important to note a few things. In gogoGadget, the last paramter that is given is a name for the specific response. MAKE SURE THESE MATCH UP. In my other OpenSocial adventures, I got that mixed up at one point, and couldn't for the life of me figure out what was going wrong.
Now, let's pull down some persistent data. I'm just going to have a single variable, face_data, and pull it from the orkut sandbox server. To do this, I have to declare another datarequest, and add a newFetchPersonAppDataRequest. Back in .7, you could just pass the user's id, and the name of the app data you wanted to pull. Now, however, you have to create an IdSpec object for it. This is new, and fairly unintuitive (especially to people who've been working with it as long as I have). Here's the full data request.
var ownerspec = opensocial.newIdSpec({ "userId" : "OWNER" , "groupId" : "SELF"});var datarequest = opensocial.newDataRequest();datarequest.add(datarequest.newFetchPersonAppDataRequest(ownerspec,"face_data"),"face_data");datarequest.add(datarequest.newFetchPersonAppDataRequest(ownerspec,"face_url"),"face_url");datarequest.send(loadUI);
Make sure to pay attention to what you name the variable, like with the personrequest. You also have to make sure your idspec is constructed correctly. At this point, you can only have "OWNER" and "VIEWER" for "userId", and "SELF" or "FRIENDS" for "groupId." There's also an important thing to note at the 3rd line. The first "face_data" is actually the name of the variable the request is supposed to retrieve. Along with named variables (which return as "null" if they haven't been set yet), you can also just put a *, for all variables associated with your app. On the response side, there is another main difference from the person requests.
function loadUI(responseData){var facedata = responseData.get('face_data').getData()[owner.getId()];var faceurl = responseData.get('face_url').getData()[owner.getId()];var to_output = owner.getDisplayName() + " is a ";if(facedata == null){to_output += "lazy";}else{to_output += facedata.face_data;}to_output += " panda.";if(faceurl == null){faceurl = "http://www.cs.drexel.edu/~asc38/Google/meh.png";}else{faceurl = faceurl.face_url;}
It is important to note how to retrieve the data from the response object. Not only do you have to call get() with the field name, and getData(), but you must also grab the data from the index of the owner's id, and then call the name of the variable off THAT.
What this does is set default values for facedata and faceurl, and then combines them to make the entire gadget rendering. Now, if you look at my profile, either as me, or as someone else, you see the following:
Not terribly exciting, but you can see what it's trying to do. Now, to add a bit of user functionality. For this app, the only real interactivity is going to be when the owner changes their emotion or the panda's face. To do that, we first have to see if the person viewing the app is the owner. That's pretty intuitive:
if(owner.isViewer()){
See? Now, what I do is build an admin panel/form that has a text box for the user to input their emotion, and then radio buttons.
owner_output = '
';document.getElementById("gadgetdiv").innerHTML += owner_output;}
For the sake of brevity, I'm not going to detail both changing functions, but just the important bits of changeFace. You get the value of the new emotion, and then create an updateAppDataRequest and submit it. You still need to specify a callback though. This lets you do error checking to make sure that the request made it through alright.
var updaterequest = opensocial.newDataRequest();updaterequest.add(updaterequest.newUpdatePersonAppDataRequest("VIEWER", "face_data", newemotion), "update1");updaterequest.send(finishUpdate);
For finishUpdate, I just have it mirror the initial data pull, and loop back to loadUI, thus completing a beautiful life cycle.
function finishUpdate(responseData){var ownerspec = opensocial.newIdSpec({ "userId" : "OWNER" , "groupId" : "SELF"});var datarequest = opensocial.newDataRequest();datarequest.add(datarequest.newFetchPersonAppDataRequest(ownerspec,"face_data"),"face_data");datarequest.add(datarequest.newFetchPersonAppDataRequest(ownerspec,"face_url"),"face_url");datarequest.send(loadUI);}
Obviously this example could be fleshed out a LOT more. By adding posting to the activity stream (which I may still do) and a much prettier, this app could be a lot more solid. All in all, it's not bad for a few hours of work. The full gadget xml is at:
