OpenSocial 2.0 Sandbox

jazzydoeSoftware and s/w Development

Oct 30, 2013 (3 years and 9 months ago)

87 views

OpenSocial 2.0 Sandbox

Embedded Experiences, and how
your gadget can go beyond the box

12
-
May
-
2011

#openapprevolution

1

Team

12
-
May
-
2011

#openapprevolution

2


Andrew Davis


Andrew has worked at IBM for eight years in IBM Collaboration Software on Lotus Notes and Expeditor
Teams. He is responsible for bringing the web technologies including OpenSocial to desktop and web
apps. He first integrated Gadgets into Lotus Notes in 2008, with like Notes Widgets, LiveText, Catalog
and Feeds. General trouble maker in introducing new web technologies at IBM ICS.




Ryan Baxter


Ryan has worked for IBM for three years. His primary focus during this time has been working on public
APIs for Lotus Notes. Recently he has become involved with the OpenSocial foundation, and over the
past year has been working on several enhancements to the OpenSocial specification while at the same
time providing implementations of these enhancements throughout IBM's products. @ryanjbaxter
http://ryanjasonbaxter.com




Special thanks to community members John Helmstead, Michael Hermanto, Ziv
Horesh, Mark Weitzel and Chris Cole

Agenda

12
-
May
-
2011

#openapprevolution

3


Enabling OpenApp Revolution for Gadget
Developers on 2.0
-

Sandbox


Draft OpenSocial 2.0 Features


How gadgets can make collaboration richer with
Embedded Experiences


How gadgets can jump out of the box


How gadgets contribute to the container page


OpenSearch


Declarative Actions and Selection

Sandbox OpenSocial2


Deployed daily build of shindig 3.0, containing latest proposals
and patches so you can try out the OpenSocial2.0 spec


Hosted on Amazon EC2 mini
-
instance


Sample collaboration page using common container


Activity Stream


Inbox


Gadget Sidebar


Gadget Developrs can


Ability to add gadgets, try new APIs


Test embedded experiences gadget in activity stream


Plan is to clean up, fully automate daily deployment and
contribute to the community if OpenSocial/Shindig interested


Embedded Experiences


Delegate rendering of content to trusted gadgets in
activity streams, email, etc


Spec:


http://opensocial
-
resources.googlecode.com/svn/spec/2.0/Core
-
Gadget.xml#Embedded
-
Experiences


Data Model
-

JSON and XML

"embed" : {


"url" : "http://www.example.com/embedded/123",


"gadget" : "http://www.example.com/embedded/gadget.xml",


"context" : {


"title" : "Hello World",


"id" : 123


}


"previewImage" : "http://www.exmaple.com/embedded/123.png"

}


Payload in MIME Email

From: notifications@socialnetwork.com

To: johndoe@example.com

Subject: Social Network: Mary Has Commented On Your Status

MIME
-
Version: 1.0

Content
-
Type: multipart/alternative;


boundary="XXXXboundary text"


Mary has commented on your status.


--
XXXXboundary text

Content
-
Type: text/plain


Mary has commeneted on your status.


--
XXXXboundary text

Content
-
Type: application/embed+json

{


"gadget" : "http://www.socialnetwork.com/embedded/commentgadget.xml",


"context" : 123

}

--
XXXXboundary text

Content
-
Type: text/html


<html>

<!
--

HTML representation here
--
>

</html>

Example EE Gadget

<Module>


<ModulePrefs title="Embedded Experiences Test" description="Tests the embedded experiences
APIs.">


<Require feature="embedded
-
experiences"></Require>


</ModulePrefs>


<Content type="html"
view="embedded"
>


<![CDATA[


<script type="text/javascript">


function myCallback(key){


var value = opensocial.data.getDataContext().getDataSet(key);


document.getElementById("contextData").innerHTML = "Context Information For This Gadget:
" + value;


}


function initData() {


opensocial.data.getDataContext().registeListener('org.opensocial.ee.context', myCallback);


}


gadgets.util.registerOnLoadHandler(initData);


</script>


<div id="contextData"></div>


]]>


</Content>

</Module>

Jumping out of the Box


Modal Dialogs/ Lightboxes, Non
-
Modal Dialogs, Tabs
implemented using Views and Urls in gadgets.views


Spec:


http://opensocial
-
resources.googlecode.com/svn/spec/2.0/Core
-
Gadget.xml#gadgets.views


openGadget()


openUrl()


close()


setReturnValue()

How a gadget can open a lightbox

<Module>


<ModulePrefs title="Albums and MediaItems">


<Require feature="views" />


</ModulePrefs>


<Content type="html" view="default"><![CDATA[

<script>


function renderMediaItemInDialog(album, mediaItem) {



gadgets.views.openUrl(mediaItem.url, idCallback,'dialog');





}


function openAlbumNewTab(album) {





var viewParams = {"viewerId":viewer.id,"data":album};


var opt_params = {"view":"albumFullView", "viewTarget":'tab', "viewParams":viewParams};


gadgets.views.openGadget(callback,idCallback,opt_params);


}


function editAlbumPopup(album) {


…..


var viewParams = {"data":album};


var opt_params = {"view":"editAlbum","viewTarget":"modalDialog","viewParams":viewParams};


gadgets.views.openGadget(callback,idCallback,opt_params);


};

</script>


]]></Content>

<Content type="html" view="editAlbum">

….

</Content>

<Content type="html" view="albumFullView">

….

</Content>

How gadgets contribute to container


In Shindig 3.0


Common Container gadget Pre
-
loading
mechanism allows container to process the gadget
meta
-
data before the gadget even renders


Optional Shindig features, like opensearch can
leverage <feature param> to receive information
from gadgets


Individual Gadgets can require these features and
pass in configuration and meta data to the
container’s features.

OpenSearch


Gadgets can extend the container pages
search capabilities


Spec:


http://opensocial
-
resources.googlecode.com/svn/spec/2.0/Core
-
Gadget.xml#OpenSearch



<?xml version="1.0" encoding="UTF
-
8" ?>

<Module>


<ModulePrefs title="OpenSearch Example">


<Optional feature="opensearch">


<Param name="description">


<![CDATA[


<OpenSearchDescription xmlns="http://a9.com/
-
/spec/opensearch/1.1/">


<ShortName>Example Search</ShortName>


<Description>Realtime Example Search</Description>


<Url type="application/atom+xml" method="get"
template="http://search.example.com/search.atom?q={searchTerms}"/>


<Image width="16" height="16">http://search.example.com/favicon.png</Image>


<InputEncoding>UTF
-
8</InputEncoding>


<SearchForm>http://search.example.com/</SearchForm>


</OpenSearchDescription>


]]>


</Param>


</Optional>


</ModulePrefs>


<Content type="url" href="http://example.com/searchGadget.xml" />

</Module>


OpenSearch Example Gadget

Declarative Actions, Selection


Gadget can bind actions to OpenSocial Data types
and by Paths in the container, without even being
visible on the page, and then lazily load when action
is invoked.


Selection provides a singleton selection when
executing the action, even if gadgets aren’t rendered
to receive even


Spec:


http://opensocial
-
resources.googlecode.com/svn/spec/2.0/Core
-
Gadget.xml#gadgets.selection


http://opensocial
-
resources.googlecode.com/svn/spec/2.0/Core
-
Gadget.xml#gadgets.actions


Declarative Actions Example

<Module>


<ModulePrefs title="Sample VOIP">


<Optional feature="actions">


<Param name="action
-
contributions">


<![CDATA[


<action id="org.samplevoip.callbyperson" dataObject="opensocial.Person" label="Call using VOIP Phone"


view="DialByPerson" icon="http://ww.samplervoip.org/phone.gif" />


<action id="org.samplervoip.navLink" path="container/navigationLinks" label="Phone" />


]]>


</Param>


</Optional>


</ModulePrefs>


<Content type="html">


<![CDATA[


<script>


// Bind javascript function to action ID


function mycallback{... }


var myaction = {



id: "org.samplevoip.callbyperson",



callback: mycallback


}


container.actions.addAction(myaction);


</script>


]]>


</Content>

</Module>

Thanks to OpenSocial and Shindig Community


Come see us at the Poster Session!



Check out demos and test your gadgets with
OpenSocial 2.0!


Sandbox.opensocial2.org:8080