18
Opensocial Flash/Flex Client Library Project: http://opensocial-actionscript-client.googlecode.com/

Opensocial Flash/Flex Client Library Project:

Embed Size (px)

Citation preview

Page 1: Opensocial Flash/Flex Client Library Project:

Opensocial Flash/Flex Client LibraryProject: http://opensocial-actionscript-client.googlecode.com/

Page 2: Opensocial Flash/Flex Client Library Project:

Get friend list using JS code

1

2

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;};

Page 3: Opensocial Flash/Flex Client Library Project:

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();  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 as AsyncDataRequest;      (req.getOptions() as PeopleRequestOptions) .setStartIndex(c.getNextOffset());      req.send(client);    }}

1

2

Page 4: Opensocial Flash/Flex Client Library Project:

Sample applications on various containers

Page 5: Opensocial Flash/Flex Client Library Project:

Developer‘s Guide

Page 6: Opensocial Flash/Flex Client Library Project:

Developer’s Guide

// Init Clientvar 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 handlerprivate function fetchMeEventHandler(event:ResponseItemEvent):void {  var person:Person = event.response.getData();  // show this user  drawPerson(person);}

1 InitializationInitialization

2Sync calls to get Sync calls to get immediate infoimmediate info

3 Async calls to get dataAsync calls to get data

4 Async call data handlerAsync call data handler

Page 7: Opensocial Flash/Flex Client Library Project:

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 =    new MyspaceJsWrapperClient("opensocial.flash");client.addEventListener(OpenSocialClientEvent.CLIENT_READY, onReady);client.start();

Page 8: Opensocial Flash/Flex Client Library Project:

Developer’s Guide – container specific features

1 RequestRequest

2 ResponseResponse

 // ----------------- 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();  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 as AsyncDataRequest;    (req.getOptions() as MyspacePhotosRequestOptions)        .setStartIndex(c.getNextOffset());     req.send(client);  }}

Page 9: Opensocial Flash/Flex Client Library Project:

Client Overview

Page 10: Opensocial Flash/Flex Client Library Project:

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.

Page 11: Opensocial Flash/Flex Client Library Project:

Overview

Page 12: Opensocial Flash/Flex Client Library Project:

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.

Page 13: Opensocial Flash/Flex Client Library Project:

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.

Page 14: Opensocial Flash/Flex Client Library Project:

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.

Page 15: Opensocial Flash/Flex Client Library Project:

Directory Structure Of Source Code

Page 16: Opensocial Flash/Flex Client Library Project:

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

Page 17: Opensocial Flash/Flex Client Library Project:

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.

Page 18: Opensocial Flash/Flex Client Library Project:

Thanks !