Presentation is loading. Please wait.

Presentation is loading. Please wait.

Opensocial Flash/Flex Client Library Project:

Similar presentations

Presentation on theme: "Opensocial Flash/Flex Client Library Project:"— Presentation transcript:

1 Opensocial Flash/Flex Client Library Project:

2 Get friend list using JS code 1 Request 2 Response 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 = ' '; friends.each(function(person) { html += ' ' + person.getDisplayName() + ' '; }); html += ' '; document.getElementById('message').innerHTML = html; };

3 Get friend list using AS3 code private function fetchFriends():void { var req:AsyncDataRequest = new AsyncDataRequest( Feature.PEOPLE_GET, new PeopleRequestOptions().setUserId("@me").setGroupId("@friends").setCount(5).setStartIndex(0)); req.addEventListener(ResponseItemEvent.COMPLETE, fetchFriendsEventHandler); req.send(client); people.removeAll(); } private function fetchFriendsEventHandler(event:ResponseItemEvent):void { var c:Collection = event.response.getData();; var arr:Array = c.getArray(); for (var i:int = 0; i 0) { var req:AsyncDataRequest = as AsyncDataRequest; (req.getOptions() as PeopleRequestOptions).setStartIndex(c.getNextOffset()); req.send(client); } } 1 Request Response 2

4 Sample applications on various containers

5 Developers Guide

6 // Init Client var client:JsWrapperClient = new JsWrapperClient(); client.addEventListener(OpenSocialClientEvent.CLIENT_READY, onReady); client.start(); // Init done, ready to do data fetching function onReady(event:OpenSocialEvent):void { // API type 1: get environment info synchronously var helper:SyncHelper = new SyncHelper(client); var domain:String = helper.getDomain(); var view:String = helper.getCurrentView(); // API type 2: get remote OpenSocial data asynchronously // construct request with options var req:AsyncDataRequest = new AsyncDataRequest( // request type Feature.PEOPLE_GET, // options new PeopleRequestOptions().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 handler private function fetchMeEventHandler(event:ResponseItemEvent):void { var person:Person = event.response.getData(); // show this user drawPerson(person); } 1 Initialization 2 Sync calls to get immediate info 3 Async calls to get data 4 Async call data handler

7 Developers 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 wed like to see more coming. var client:MyspaceJsWrapperClient = new MyspaceJsWrapperClient("opensocial.flash"); client.addEventListener(OpenSocialClientEvent.CLIENT_READY, onReady); client.start();

8 Developers Guide – container specific features 1 Request Request 2 Response // ----------------- Fetch Photos -------------------------- private function fetchPhotos():void { var req:AsyncDataRequest = new AsyncDataRequest( MyspaceFeature.PHOTOS_GET, new MyspacePhotosRequestOptions().setUserId("@me")); req.addEventListener( ResponseItemEvent.COMPLETE, fetchPhotosEventHandler); req.send(client); photos.removeAll(); } private function fetchPhotosEventHandler( event:ResponseItemEvent):void { var c:Collection = event.response.getData();; var arr:Array = c.getArray(); for (var i:int = 0; i 0) { var req:AsyncDataRequest = as AsyncDataRequest; (req.getOptions() as MyspacePhotosRequestOptions).setStartIndex(c.getNextOffset()); req.send(client); } }

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 were 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 Source Code The overall of this librarys 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

Download ppt "Opensocial Flash/Flex Client Library Project:"

Similar presentations

Ads by Google