Programming Social Applications

The JavaScript

The JavaScript layer will act as our controller for the application, providing the data-fetching methods to access profiles and friendships:

<script type="text/javascript"> var socialController = { //fetch profile photos for friends fetchConnections: function(insertID){ osapi.people.get({userId: "@viewer", groupId: "@friends", count: 36}).execute(function(result){ var friends = result.list; var html = ''; for (var i = 0; i < friends.length; i++){ html += "<img src='" + friends[i].thumbnailUrl + "'onclick= 'socialController.loadProfile(\"" + friends[i].id + "\");' />"; } document.getElementById(insertID).innerHTML = html; }); }, //load profile for a given user loadProfile: function(uid){ osapi.people.get({userId: uid}).execute(function(result){ if (!result.error){ //build basic profile information var name = result.name.givenName + " " + result.name.familyName; var html = "<img src='" + result.thumbnailUrl + "' alt='profile image' />" + "<div><span>Name:</span> " + name + "</div>" + "<div><span>Gender:</span> " + result.gender + "</div>" + "<div><span>Profile URL:</span> <a href='" + result.profileUrl + "'>" + result.profileUrl + "</a></div><br />" + "<div class='header'>Profile URLs</div>"; //load all urls for the user for (var i = 0; i < result.urls.length; i++){ html += "<div><span>" + result.urls[i].type + ": </span>" + "<a href='" + result.urls[i].value + "'>" + result.urls[i].value + "</a></div>"; } //add new markup to the application document.getElementById("profileContent").innerHTML ...