Sample Code Resources

Gifts Tutorial

Basic OpenSocial XML 

<?xml version="1.0" encoding="UTF-8" ?> 
<Module> 
    <ModulePrefs title="Gifts Tutorial” author_email=” 
lrm718@yahoo.com”> 
        <Require feature="opensocial-0.7" /> 
    </ModulePrefs> 
    <Content type="html"> 
        <![CDATA[ 
            Hello, world! 
        ]]> 
   </Content> 
</Module>

Important Meta-Data 

<ModulePrefs title="Gifts Tutorial” 
                       author_email=”lrmYYY@yahoo.com” 
                       summary="short description for list views" 
                       description="long description for preview" 
                       thumbnail="http://yourhost/path_to_120x60_img" 
                       icon="http://yourhost/path_to_15x15_favicon" >

Initialization 

gadgets.util.registerOnLoadHandler(init); 
function init() { 
     loadFriends(); 
}

Fetching Friends 

function loadFriends() { 
     var req = opensocial.newDataRequest(); 
     req.add(req.newFetchPersonRequest('VIEWER'), 'viewer'); 
     req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 
'viewerFriends'); 
    req.send(onLoadFriends); 
}

Handle the Response 

function onLoadFriends(data) { 
    var viewer = data.get('viewer').getData(); 
    var viewerFriends = data.get('viewerFriends').getData(); 
    html = new Array(); 
    html.push('<ul>'); 
    viewerFriends.each(function(person) { 
        html.push('<li>' + person.getDisplayName() + "</li>"); 
    }); 
    html.push('</ul>'); 
    document.getElementById('friends').innerHTML = html.join('');
}

Adding App Data 

var givenGifts = {}; 
function giveGift() { 
    var nut = document.getElementById('nut').value; 
    var friend = document.getElementById('person').value; 
    givenGifts[friend] = nut; 
    var json = gadgets.json.stringify(givenGifts); 
    var req = opensocial.newDataRequest(); 
    req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest
            .PersonId.VIEWER, 'gifts', json)); 
    req.send(); 
}

Displaying App Data 

function updateGiftList(viewer, data, friends) { 
    var json = data[viewer.getId()]['gifts']; 
    if (!json) { 
        givenGifts = {}; 
    } 
    try { 
        givenGifts = gadgets.json.parse(json); 
    } catch (e) { 
        givenGifts = {}; 
    } 
    var options = ['a cashew nut', 'a peanut', 'a hazelnut', 
                   'a red pistachio nut']; 
    var html = new Array(); 
    html.push('You have given:'); 
    html.push('<ul>'); 
    for (i in givenGifts) { 
        if (+(i) > 0) { 
            html.push('<li>' + friends[i] + ' received ' + 
                            options[givenGifts[i]] + '</li>'); 
        } 
    } 
    html.push('</ul>'); 
    document.getElementById('given').innerHTML = html.join(''); 
}

Resizing the Window 

In Module element: 
<Require feature="dynamic-height"/> 
After rendering content: 
gadgets.window.adjustHeight()

Creating Activity 

function createActivity(title) { 
var opts = new Array(); 
opts[opensocial.Activity.Field.TITLE] = title; 
var mediaItems = new Array(); 
var mediaItem = opensocial.newActivityMediaItem
(opensocial.Activity.MediaItem.Type.IMAGE, viewer. 
getField(opensocial.Person.Field.THUMBNAIL_URL)); 

// Add a media item link if supported 

if(gadgets.util.hasFeature('hi5') && 
   opensocial.getEnvironment().supportsField(opensocial.Environment. 
      ObjectType.ACTIVITY_MEDIA_ITEM, hi5.ActivityMediaItemField.LINK))
   { 
     mediaItem.setField(hi5.ActivityMediaItemField.LINK,
                        viewer.getField(opensocial.Person.Field. 
                                        PROFILE_URL)); 
   } 

mediaItems.push(mediaItem);
opts[opensocial.Activity.Field.MEDIA_ITEMS] = mediaItems;
var activity = opensocial.newActivity(opts);
        
opensocial.requestCreateActivity(activity,
                                 opensocial.CreateActivityPriority.HIGH);

Sending Notifications 

function sendNotifications(notification, toIds) { 
    var params = new Object(); 
    params[opensocial.Message.Field.TYPE] = opensocial. 
Message.Type.NOTIFICATION; 
    var message = opensocial.newMessage(notification, params); 
    opensocial.requestSendMessage(toIds, message); 
}

var viewerLink = viewer.getField(opensocial.Person.Field.PROFILE_URL); 
var notification = '<a href="' + viewerLink + '">' + viewer.getDisplayName() + 
'</a>   gave you a ' + options[nut]; 
var toIds = {}; 
toIds.push(friend); 
sendNotifications(notification, toIds);

Making Content Requests 

function getJournal() { 
    gadgets.io.makeRequest('http://api.hi5.com/rest/feed/journal/userId', 
        function(response) { 
            var data = response.data; 
            // do something with data 
        }, 
        {'METHOD' : 'GET', 'CONTENT_TYPE' : 'DOM'} 
    ); 
}

Working with Views 

<Content type=“html” view=“profile”> 
<![CDATA[ 
<script src="http://images.hi5.com/images/opensocial/gifts.js" 
></script> 
<script> 
gadgets.util.registerOnLoadHandler(initProfile); 
</script> 
<div id='main'> 
<div id='received’></div> 
</div> 
]]> 
</Content>

Navigating to a View 

function navToCanvas() { 
    var views = gadgets.views.getSupportedViews(); 
    gadgets.views.requestNavigateTo(views['canvas']); 
}

Using Skins 

In ModulePrefs: 
<Require feature="skins"/> 
In Your Application: 
function setSkin() {
        document.write('<style type="text/css">');
        document.write('.main {');
        bgColor = gadgets.skins.getProperty(gadgets.skins.Property.BG_COLOR);
        if(bgColor) {
          document.write('background-color:'+bgColor+';');
        }
        bgImage = gadgets.skins.getProperty(gadgets.skins.Property.BG_IMAGE);
        if(bgImage) {
          document.write('background-image: url('+bgImage+');');
        }
        bgPosition = gadgets.skins.getProperty(gadgets.skins.Property.BG_POSITION);
        if(bgPosition) {
          document.write('background-position:'+bgPosition+';');
        }
        bgRepeat = gadgets.skins.getProperty(gadgets.skins.Property.BG_REPEAT);
        if(bgRepeat) {
          document.write('background-repeat:'+bgRepeat+';');
        }
        fontColor = gadgets.skins.getProperty(gadgets.skins.Property.FONT_COLOR);
        if(fontColor) {
          document.write('color:'+fontColor+';');
        }
        document.write('}');
        anchorColor = gadgets.skins.getProperty(gadgets.skins.Property.ANCHOR_COLOR);
        if(anchorColor) {
          document.write('.main a, .main a:hover, .main a:visited { color:'+anchorColor+';}');
        }
       document.write('</style>');
}

Using hi5.*

Add to any data request:

(More detailed code has also been submitted by PixVerse.) 

  if(gadgets.util.hasFeature('hi5')) {
    req.add(hi5.newFetchStatusRequest('OWNER'),'ownerStatus');
    req.add(hi5.newFetchPresenceRequest('VIEWER_FRIENDS'),'viewerFriendsPresence');
    req.add(hi5.newFetchAlbumsRequest('OWNER'),'ownerAlbums');
  }

Note that currently, for security purposes, we only expose the viewer's albums through this call, regardless of the value of the parameter set in the hi5.newFetchAlbumsRequest() call.

Retrieving the data in your handler: 

  if(gadgets.util.hasFeature('hi5')) {
    var ownerStatus = data.get('ownerStatus').getData();
    var viewerFriendsPresence = data.get('viewerFriendsPresence').getData();
    var ownerAlbums = data.get('ownerAlbums').getData();
  }

See hi5 Open Social API for return values: JsAPI

Sample Code Resources

Attachments

Close