= Sample Code Resources =
 * '''[http://lou.sandbox.hi5.com/friend/apps/entry/webvan.hi5.com/gadgets/gifts.xml Basic Gifts Tutorial]'''
 * '''[http://lou.sandbox.hi5.com/friend/apps/entry/www.webvan.hi5.com/friend/apps/developer/app/get/xml/5197 Gifts with i18n]'''
 * '''[http://lou.sandbox.hi5.com/friend/apps/entry/www.sandbox.hi5.com/friend/apps/developer/app/get/xml/5206 Template Demo]'''
 * [wiki:SignedRequests Validating Signed Requests]

'''Gifts Tutorial[[BR]][[BR]]Basic '''OpenSocial XML

{{{
#!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'''

{{{
#!xml
<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'''

{{{
#!xml
gadgets.util.registerOnLoadHandler(init); 
function init() { 
     loadFriends(); 
}
}}}
'''Fetching Friends'''

{{{
#!xml
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'''

{{{
#!xml
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'''

{{{
#!xml
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'''

{{{
#!xml
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'''

{{{
#!xml
In Module element: 
<Require feature="dynamic-height"/> 
After rendering content: 
gadgets.window.adjustHeight()
}}}
'''Creating Activity'''

{{{
#!xml
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'''

{{{
#!xml
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'''

{{{
#!xml
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'''

{{{
#!xml
<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'''

{{{
#!xml
function navToCanvas() { 
    var views = gadgets.views.getSupportedViews(); 
    gadgets.views.requestNavigateTo(views['canvas']); 
}
}}}
'''Using Skins'''

{{{
#!xml
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:

([wiki:SamplePhotoDownloadJSCode More detailed code] has also been submitted by [http://www.pixverse.com PixVerse].)

{{{
#!xml
  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:

{{{
#!xml
  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: [wiki:JsAPI]

----
= Sample Code Resources =
 * '''[http://lou.sandbox.hi5.com/friend/apps/entry/webvan.hi5.com/gadgets/gifts.xml Basic Gifts Tutorial]'''
 * '''[http://lou.sandbox.hi5.com/friend/apps/entry/www.webvan.hi5.com/friend/apps/developer/app/get/xml/5197 Gifts with i18n]'''
 * '''[http://lou.sandbox.hi5.com/friend/apps/entry/www.sandbox.hi5.com/friend/apps/developer/app/get/xml/5206 Template Demo]'''

----