EDIT (5.24.2011): there has been a minor update to the API, so the code has changed.


Ever wanted to easily add an OpenSocial gadget to one of your templates in Nuxeo Document Management or on your Nuxeo WebEngine site? It's now possible thanks to the integration of the light JavaScript container from Apache Shindig and our new jQuery plugin!


This feature will be part of the next release, Nuxeo DM 5.4.2.


Quick usage of the jQuery plugin?


$(document).ready(function() {
$('.gadgets').openSocialGadget({
baseURL: '${baseURL}',
language: '#{localeSelector.language}',
gadgetDefs: [
{ specUrl: 'http://www.labpixies.com/campaigns/todo/todo.xml' },
{ specUrl: 'http://localhost:8080/nuxeo/site/gadgets/lastdocuments/lastdocuments.xml' }
]
});
})

Load all the gadgets referenced by their gadget specifications in the elements matching the css class gadgets.
The first gadget http://www.labpixies.com/campaigns/todo/todo.xml will be loaded into the first matching element, the gadget http://localhost:8080/nuxeo/site/gadgets/lastdocuments/lastdocuments.xml in the second one.


Quite easy to use :)


WebEngine integration


Light-opensocial-container-webengine


Here is a sample WebEngine page where three OpenSocial gadgets from Nuxeo have been integrated at different places in the page.


How to integrate it?


Javascript and CSS includes needed to make it work:


<link rel="stylesheet" href="${contextPath}/css/opensocial/light-container-gadgets.css">
<script type="text/javascript" src="${skinPath}/script/jquery/jquery.js"></script>
<script type="text/javascript" src="${contextPath}/opensocial/gadgets/js/rpc.js?c=1"></script>
<script type="text/javascript" src="${contextPath}/js/?scripts=opensocial/cookies.js|opensocial/util.js|opensocial/gadgets.js|opensocial/cookiebaseduserprefstore.js|opensocial/jquery.opensocial.gadget.js"></script>

HTML:


...
<div class="gadgets-gadget-chrome gadgets" style="float:right"></div>
...
<div class="gadgets-gadget-chrome gadgets" style="float:left"></div>
...
<div class="gadgets-gadget-chrome gadgets" style="float:right"></div>
...

Loading the gadgets:


<script type="text/javascript">
$(document).ready(function() {
$('.gadgets').openSocialGadget({
baseURL: '${contextPath}' + '/',
language: '${Context.locale.language}',
gadgetDefs: [
{ specUrl: 'http://localhost:8080/nuxeo/site/gadgets/userworkspaces/userworkspaces.xml',
title: 'User Workspaces' },
{ specUrl: 'http://localhost:8080/nuxeo/site/gadgets/lastdocuments/lastdocuments.xml',
title: 'Last Modified Documents' },
{ specUrl: 'http://localhost:8080/nuxeo/site/gadgets/waitingfor/waitingfor.xml',
title: 'My Pending requests' }
]
});
})
</script>

JSF integration


Light-opensocial-container-jsf.png


The left fragment was updated to add the "My Tasks" gadget. This gadget, included by default, lists all the tasks that the current user needs to do: something quite useful to always have while navigating in Nuxeo DM :)


How to integrate it?


JavaScript and CSS includes needed to make it work:


<link rel="stylesheet" href="#{baseURL}css/opensocial/light-container-gadgets.css"></link>
<script type="text/javascript" language="javascript" src="#{baseURL}opensocial/gadgets/js/rpc.js?c=1"></script>
<script type="text/javascript" src="#{baseURL}js/?scripts=opensocial/cookies.js|opensocial/util.js|opensocial/gadgets.js|opensocial/cookiebaseduserprefstore.js|opensocial/jquery.opensocial.gadget.js"></script>

No more jQuery as it's already provided, switch to use #{baseURL}, the variable exposed in the JSF UI, instead of ${skinPath} and ${contextPath}, variables exposed by WebEngine.


HTML:


...
<div class="gadgets-gadget-chrome gadgets"></div>
...

Loading the gadget:


<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.gadgets-gadget-chrome').openSocialGadget({
baseURL: '#{baseURL}',
language: '#{localeSelector.language}',
gadgetDefs: [
{ specUrl: 'http://localhost:8080/nuxeo/site/gadgets/tasks/tasks.xml',
title: 'My Tasks' }
]
});
})
</script>

Same here, we use #{baseURL} instead of the variables exposed by WebEngine.


Limitations


As it's not a full-featured container like the one we have in the User Home, there are some limitations:



  • There is no way for the user to add / remove gadgets and change the layout,

  • The user preferences are not managed for now,

  • Gadgets are read only.


Feel free to contribute to improve it!