Second Step into the Open Social World

Being a fan of prototype.js and scriptaculous my self, i was soon taken aback by the arcane javascript API's the Open Social environment offers. Its very much like programming in the old document.getElementById() days, and that can quickly get in the way of quickly writing good and maintainable software.

Hence my second step in the Open Social world was to make a generic Open Social class which could wrap the social functionality (owner, viewer and friends of-) and all its arcane magic into a prototype.js style programming environment, and allow easy loading of all the required social data and wrap it in an uniform data structure.

The result was this class:

osPeople - open social information wrapper

This class can be used in 2 ways, either Extend this class to impliment functionality,
and define the any following functions to hook up to the specific events your interested in:

onInitialize(); called when the class initializes
onLoading(); called when the request.send call has been made and the data is being loaded
onComplete(); called when the person data has been loaded and parse
onError(msg); called when an error occured in the opensocial communication

or call the class with onInitialize, onError, onLoading and/or onComplete functions in the options, for example:

CODE:
  1. new osClass({ viewer:true, owner:true, onLoading: my_loading_function, onComplete: my_complete_function, onError: my_error_func});

to access the social people data you can use the following json arrays:

CODE:
  1. .owner
  2. .viewer
  3. .ownerFriends
  4. .viewerFriends

owner and viewer are single items, where *Friends are array's

each person entry is defined as:

CODE:
  1. person.id       (string, unique consistent person id)
  2. person.name     (display name on the social site)
  3. person.isOwner  (bool, is this the owner of the page?)
  4. person.isViewer (bool, is this the viewer of the page?)
  5. person.profile  (string, url to the profile page of this person)
  6. person.thumb    (string, url to the thumbnail image)

Usage: to retrieve only the viewer:

CODE:
  1. new osClass({viewer:true});

To retrieve everything (viewer, owner, & friends):

CODE:
  1. new osClass({viewer:true,owner:true,viewerFriends:true,ownerFriends:true});

other functions:

CODE:
  1. hasError();        returns true when an error has occured
  2. getError();

Example of using this as an application class:

JAVASCRIPT:
  1. var myOSClass = Class.create();
  2. Object.extend(Object.extend(myOSClass.prototype, osClass.prototype), {
  3. onInitialize: function() {
  4. // show unloading msg here?
  5. },
  6.  
  7. onLoaded: function() {
  8. // do things with: this.owner, this.viewer, this.ownerFriends and/or this.viewerFriends
  9. }
  10. }

To make this application load automaticly on load we have to create an open social container (xml file) which people can add to their profile page, and in it create the class in the container load event, like this:

demo container xml

Javascript, OpenSocial 8 comments,

8 Responses to “Second Step into the Open Social World”

  1. [...] second article includes the first library you can tell to load (owner, viewer, ownerFriends and/or viewerFriends) information, and presents this information in an [...]

  2. hassan says:

    Thanks for creating this wrapper. I find the OS api to be a bit arcane as well :)

  3. Thierry says:

    Have been reading up on this, looks interesting :)

  4. Akash Xavier says:

    Hi
    I am a container developer and was just wondering why the OpenSocial API is too arcane… this class would make app developers’ life a bit easier.

  5. Timo says:

    How do I become a container for Open Social? I read the API Specification on “http://code.google.com/apis/opensocial/docs/0.7/spec.html” but I didn’t find out how do integrate Open Social into my social network. Can you tell me how do do this?

    There are lots of .js files mentioned in the specification. Do I have do put these files into the root directory of my website? Then I could paste the data by using PHP and MySQL so that the output is in the javascript file, couldn’t I?

  6. chabotc says:

    Hi timo,

    Your in luck, there is an open source project called ‘Shindig’ that provides you with the functionality you need to become an open social container, see:

    http://www.chabotc.com/shindig/

    where i write a little about what it is.

    If you want an example on how to use this, for this i made the Partuza project which you can find here:
    http://www.chabotc.com/partuza/

    Shindig is the open social reference container, that implements the open social spec and provides you with the platform to be a container; Partuza is an example social network site that demonstrates how to use this in your own site.

    Hope that helps!

  7. Anupama says:

    Hi All,

    I get this error very frequently
    syntax error
    () in frequently calling a servlets and html files also
    In the response of the makeRequest is this way
    “body”:”",”rc”:”504″
    When clicked on the error displayed in firebug,it redirects to a js
    file
    line 186 >>

    }}return{stringify:stringify,parse:function(text){if(/^[\],:{}\s]*

    $/.test
    (text.replace(/\\["\\\/b-u]/g,”@”).replace(/”[^"\\\n\r]*”|true|false|
    null|-
    ?\d (?:\.\d*)?(?:[eE][ \-]?\d )?/g,”]”).replace(/(?:^|:|,)(?:\s*\[)
    /g,”"))){return eval(“(” text “)”)

    What eactly does this mean?

    I don’t know what might go wrong. I have the same application in
    Orkut,FaceBook and don’t have these problems. We need some help,
    please…..its Emergency………..

Leave a Reply