Opensocial Flash/Flex Client Library

1. Opensocial Flash/FlexClient Library Project:http://opensocial-actionscript-client.googlecode.com/

2. Get friend list using JS code function request(){var idspec = opensocial.newIdSpec({"userId":"OWNER","groupId":"FRIENDS"});var req = opensocial.newDataRequest();  req.add(req.newFetchPeopleRequest(idspec),"get_friends");  req.send(response);};function response(dataResponse){var friends = dataResponse.get('get_friends').getData();var html ='<ul>';  friends.each(function(person){    html +='<li>'+ person.getDisplayName()+'</li>';});  html +='</ul>';  document.getElementById('message').innerHTML = html;}; 1 Request 2 Response

3. Get friend list using AS3 code 1 privatefunction fetchFriends():void{var req:AsyncDataRequest=newAsyncDataRequest(Feature.PEOPLE_GET,newPeopleRequestOptions().setUserId("@me").setGroupId("@friends").setCount(5).setStartIndex(0));  req.addEventListener(ResponseItemEvent.COMPLETE, fetchFriendsEventHandler);  req.send(client);  people.removeAll();}privatefunction fetchFriendsEventHandler(event:ResponseItemEvent):void{var c:Collection=event.response.getData();  logger.info(c.toDebugString());var arr:Array= c.getArray();for(var i:int=0; i < arr.length; i++){var p:Person= arr[i];      logger.info(p.getDisplayName());      people.addItem(p);}if(c.getRemainingSize()>0){var req:AsyncDataRequest=event.target asAsyncDataRequest;(req.getOptions()asPeopleRequestOptions) .setStartIndex(c.getNextOffset());      req.send(client);}} Request 2 Response

4. Sample applications on various containers

5. Developer‘s Guide

6. Developer’s Guide Async call data handler // Init Clientvar client:JsWrapperClient=newJsWrapperClient();client.addEventListener(OpenSocialClientEvent.CLIENT_READY,                        onReady);client.start(); // Init done, ready to do data fetchingfunction onReady(event:OpenSocialEvent):void{ // API type 1: get environment info synchronouslyvar helper:SyncHelper=newSyncHelper(client);var domain:String= helper.getDomain();var view:String= helper.getCurrentView(); // API type 2: get remote OpenSocial data asynchronously// construct request with optionsvar req:AsyncDataRequest=newAsyncDataRequest(// request typeFeature.PEOPLE_GET,// optionsnewPeopleRequestOptions().setUserId("@me").setGroupId("@self"));// register event handler for this request  req.addEventListener(ResponseItemEvent.COMPLETE,                        fetchMeEventHandler);// send the request through the client  req.send(client);} // data handlerprivatefunction fetchMeEventHandler(event:ResponseItemEvent):void{var person:Person=event.response.getData();// show this user  drawPerson(person);} 4 Initialization 1 Sync calls to get immediate info 2 Async calls to get data 3

7. Developer’s Guide – container specific features • Since containers may have their specific features, the developers may like to extend the existing client with more APIs. Currently we have MySpace on board, and we’d like to see more coming. var client:MyspaceJsWrapperClient=newMyspaceJsWrapperClient("opensocial.flash");client.addEventListener(OpenSocialClientEvent.CLIENT_READY,onReady);client.start();

8. Developer’s Guide – container specific features // ----------------- Fetch Photos --------------------------privatefunction fetchPhotos():void{var req:AsyncDataRequest=newAsyncDataRequest(MyspaceFeature.PHOTOS_GET,newMyspacePhotosRequestOptions().setUserId("@me"));  req.addEventListener(ResponseItemEvent.COMPLETE,      fetchPhotosEventHandler);  req.send(client);  photos.removeAll();}privatefunction fetchPhotosEventHandler(event:ResponseItemEvent):void{var c:Collection=event.response.getData();  logger.info(c.toDebugString());var arr:Array= c.getArray();for(var i:int=0; i < arr.length; i++){var p:MyspacePhoto= arr[i];    photos.addItem(p);}if(c.getRemainingSize()>0){var req:AsyncDataRequest=event.target asAsyncDataRequest;(req.getOptions()asMyspacePhotosRequestOptions).setStartIndex(c.getNextOffset());     req.send(client);}} Request 1 Response 2

9. Client Overview

10. Overview • Most of the OpenSocial 0.81 client functionalities are covered except batching social data requests. Please refer to the API reference manual generated by ASDoc. • Event-driven development model supported. Compared with the popular callback-triggering model in the JavaScript community, event-driven model has been widely adopted as the common method in the ActionScript community. Besides of that, the library provides a convenient currying pattern to simplify the situation that only one callback need to be triggered for an asynchronous request. • FlexUnit based testing framework and test suites for core data structures. • Two samples are included for both Flash and Flex development environments. • There's a important abstract class "OpenSocialClient" defined in the library, from which all asynchronous requests are sent. A reference implementation "JsWrapperClient" is also provided that it resides in the OpenSocial container and calls outer native JavaScript APIs to implement OpenSocialClient's functions.

11. Overview

12. Overview –Extend 1 • Asynchronous request pattern As we known, OpenSocial spec offers multiple data fetching patterns, including JavaScript API call on the browser side, and RESTful/RPC ones for server-to-server talk. Moreover, there could be more patterns emerge in the future for gadgets to get social data. By inheriting the abstract class OpenSocialClient, you could extend any patterns by yourself. JsWrapperClient, which has been included as a reference implementation for the JavaScript bridging one, could be treated as a perfect example for such extending, and we‘re looking forward to see RestfulClient (name to be determined) could implement the server-to-server pattern. The benefits gain from this abstraction is very low cost for developer to migrate the application from one client to the other -- most of the business logic code remains the same while only a bit client initialization code needs to be changed. This feature also helps the code reuse between Flash on browser side and AIR applications.

13. Overview –Extend 2 • Feature between different containers Different SNS may offer different features. E.g. user on some of the SNS could manage their videos through OpenSocial API while others may not. By inheriting the concrete class such like JsWrapperClient, you could customize client's "feature book" to support more features.

14. Overview –Extend 3 • Data structure between different containers For the same feature and data structure, different SNS may have their special attributes to support more functions. E.g. users may change their "familyVideo" field in the Person objects representing themselves. JsWrapperClient has already supports automatic discovery for extend fields in the outer JavaScript object, and we are expecting the similar technology could also be applied on the up-coming clients.

15. Directory Structure Of Source Code

16. Directory Structure Of Source Code • Source Code： • http://opensocial-actionscript-client.googlecode.com/svn/trunk/ • The overall of this library‘s structure is: • /doc: doc generated from source files by AS-Doc • /external: 3rd party libraries, has been compiled into swc format, including as3corelib, flexunit, jsunit, etc. • /sample: the sample code using this OpenSocial AS3 lib • /src: source code of this lib, will be covered in the later section. • /test: unit tests using FlexUnit

17. Directory Structure Of Source Code • The source code of this lib (/src) includes: • /base: the base structures defined for the OpenSocial lib, including People/Activity/Address, etc. • /core: the declaration and implementation of core class OpenSocialClient, which holds the same concept as it in OpenSocial Java client. • /feature: implementation of event model. As we all known, one of the major enhancement from AS2 to AS3 is its development model transferring from callback-driven to event-driven. • /jswrapper and restful: These 2 dirs contains the implementation of OpenSocialClient API using JavaScript wrapper and pure RESTful connection, respectively. Please note that the restful part hasn't been finished yet. • /util: It contains some handy tools for both gadget developers and us. =) Including logger and printers.

18. Thanks！