Open social 2.0 sandbox ee and breaking out of the gadget box


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Open social 2.0 sandbox ee and breaking out of the gadget box

  1. 1. OpenSocial 2.0 Sandbox<br />Embedded Experiences, and how your gadget can go beyond the box<br />12-May-2011<br />#openapprevolution<br />1<br />
  2. 2. Team<br />12-May-2011<br />#openapprevolution<br />2<br />Andrew Davis<br />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.<br />Ryan Baxter<br />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<br />Special thanks to community members John Helmstead, Michael Hermanto, Ziv Horesh, Mark Weitzel and Chris Cole<br />
  3. 3. Agenda<br />12-May-2011<br />#openapprevolution<br />3<br />Enabling OpenApp Revolution for Gadget Developers on 2.0 - Sandbox<br />Draft OpenSocial 2.0 Features<br />How gadgets can make collaboration richer with Embedded Experiences<br />How gadgets can jump out of the box<br />How gadgets contribute to the container page<br />OpenSearch<br />Declarative Actions and Selection<br />
  4. 4. Sandbox OpenSocial2<br />Deployed daily build of shindig 3.0, containing latest proposals and patches so you can try out the OpenSocial2.0 spec<br />Hosted on Amazon EC2 mini-instance<br />Sample collaboration page using common container<br />Activity Stream<br />Inbox<br />Gadget Sidebar<br />Gadget Developrs can<br />Ability to add gadgets, try new APIs<br />Test embedded experiences gadget in activity stream<br />Plan is to clean up, fully automate daily deployment and contribute to the community if OpenSocial/Shindig interested<br />
  5. 5. Embedded Experiences<br />Delegate rendering of content to trusted gadgets in activity streams, email, etc<br />Spec:<br /><br />Data Model - JSON and XML<br />"embed" : {<br /> "url" : "",<br /> "gadget" : "",<br /> "context" : { <br /> "title" : "Hello World",<br /> "id" : 123<br /> }<br /> "previewImage" : ""<br />}<br />
  6. 6. Payload in MIME Email<br />From:<br />To:<br />Subject: Social Network: Mary Has Commented On Your Status<br />MIME-Version: 1.0<br />Content-Type: multipart/alternative;<br /> boundary="XXXXboundary text"<br />Mary has commented on your status.<br />--XXXXboundary text <br />Content-Type: text/plain<br />Mary has commeneted on your status.<br />--XXXXboundary text<br />Content-Type: application/embed+json<br />{<br /> "gadget" : "",<br /> "context" : 123<br />}<br />--XXXXboundary text<br />Content-Type: text/html<br /><html><br /><!-- HTML representation here --><br /></html><br />
  7. 7. Example EE Gadget<br /><Module><br /> <ModulePrefs title="Embedded Experiences Test" description="Tests the embedded experiences APIs."><br /> <Require feature="embedded-experiences"></Require><br /> </ModulePrefs><br /> <Content type="html" view="embedded"><br /> <![CDATA[<br /> <script type="text/javascript"><br /> function myCallback(key){<br /> var value =;<br /> document.getElementById("contextData").innerHTML = "Context Information For This Gadget: " + value;<br /> }<br /> function initData() {<br />'', myCallback);<br /> }<br /> gadgets.util.registerOnLoadHandler(initData);<br /> </script><br /> <div id="contextData"></div><br /> ]]><br /> </Content><br /></Module><br />
  8. 8. Jumping out of the Box<br />Modal Dialogs/ Lightboxes, Non-Modal Dialogs, Tabs implemented using Views and Urls in gadgets.views<br />Spec:<br /><br />openGadget()<br />openUrl()<br />close()<br />setReturnValue()<br />
  9. 9. How a gadget can open a lightbox <br /><Module><br /> <ModulePrefs title="Albums and MediaItems"><br /> <Require feature="views" /> <br /> </ModulePrefs><br /> <Content type="html" view="default"><![CDATA[<br /><script><br /> function renderMediaItemInDialog(album, mediaItem) {<br />gadgets.views.openUrl(mediaItem.url, idCallback,'dialog');<br /> }<br /> function openAlbumNewTab(album) { <br /> …<br />var viewParams = {"viewerId","data":album};<br /> var opt_params = {"view":"albumFullView", "viewTarget":'tab', "viewParams":viewParams};<br /> gadgets.views.openGadget(callback,idCallback,opt_params);<br /> }<br /> function editAlbumPopup(album) {<br /> …..<br />var viewParams = {"data":album};<br /> var opt_params = {"view":"editAlbum","viewTarget":"modalDialog","viewParams":viewParams};<br /> gadgets.views.openGadget(callback,idCallback,opt_params);<br /> };<br /></script><br /> ]]></Content><br /><Content type="html" view="editAlbum"><br />….<br /></Content><br /><Content type="html" view="albumFullView"><br />….<br /></Content><br />
  10. 10. How gadgets contribute to container<br />In Shindig 3.0<br />Common Container gadget Pre-loading mechanism allows container to process the gadget meta-data before the gadget even renders<br />Optional Shindig features, like opensearch can leverage <feature param> to receive information from gadgets<br />Individual Gadgets can require these features and pass in configuration and meta data to the container’s features.<br />
  11. 11. OpenSearch<br />Gadgets can extend the container pages search capabilities<br />Spec:<br /><br />
  12. 12. <?xml version="1.0" encoding="UTF-8" ?> <br /><Module> <br /> <ModulePrefs title="OpenSearch Example"> <br /> <Optional feature="opensearch"> <br /> <Param name="description"><br /> <![CDATA[<br /> <OpenSearchDescription xmlns=""> <br /> <ShortName>Example Search</ShortName> <br /> <Description>Realtime Example Search</Description> <br /> <Url type="application/atom+xml" method="get" template="{searchTerms}"/><br /> <Image width="16" height="16"></Image> <br /> <InputEncoding>UTF-8</InputEncoding><br /> <SearchForm></SearchForm><br /> </OpenSearchDescription><br /> ]]><br /> </Param> <br /> </Optional> <br /> </ModulePrefs><br /> <Content type="url" href="" /> <br /></Module><br />OpenSearch Example Gadget<br />
  13. 13. Declarative Actions, Selection<br />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.<br />Selection provides a singleton selection when executing the action, even if gadgets aren’t rendered to receive even<br />Spec:<br /><br /><br />
  14. 14. Declarative Actions Example<br /><Module><br /> <ModulePrefs title="Sample VOIP"><br /> <Optional feature="actions"><br /> <Param name="action-contributions"><br /> <![CDATA[<br /> <action id="org.samplevoip.callbyperson" dataObject="opensocial.Person" label="Call using VOIP Phone"<br /> view="DialByPerson" icon="" /><br /> <action id="org.samplervoip.navLink" path="container/navigationLinks" label="Phone" /><br /> ]]><br /> </Param><br /> </Optional><br /> </ModulePrefs><br /> <Content type="html"><br /> <![CDATA[<br /> <script><br /> // Bind javascript function to action ID<br /> function mycallback{... }<br /> var myaction = {<br /> id: "org.samplevoip.callbyperson",<br /> callback: mycallback<br /> }<br /> container.actions.addAction(myaction);<br /> </script><br /> ]]><br /> </Content><br /></Module><br />
  15. 15. Thanks to OpenSocial and Shindig Community<br />Come see us at the Poster Session!<br />Check out demos and test your gadgets with OpenSocial 2.0!<br /><br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.