Title of the Widget

====== Using the OpenSocial API in a UWA widget ====== Initially developped by Google, OpenSocial is "a common API for social applications across multiple websites. With standard JavaScript and HTML, developers can create apps that access a social network's friends and update feeds." Netvibes [[http://dev.netvibes.com/doc/uwa|UWA]] implements the OpenSocial API natively, so that UWA developers can make their widget social easily. This short documentation is dedicated to the specifis of making OpenSocial work within UWA. [[http://code.google.com/apis/opensocial/docs/0.8/devguide.html|A complete guide to OpenSocial API]] is available from [[http://code.google.com/apis/opensocial/|the official OpenSocial website]]. Developers can test their OpenSocial-enabled UWA widget [[http://opensocial.netvibes.com|using the sandbox site]] - where they will also be able to test support for their iGoogle gadgets. ===== Basic "Hello World" UWA widget =====





  
    
    
 
    Title of the Widget
 
  
  
    Hello world!

This very basic widget lets us see the main characteristics of an UWA widget: * It's an XHTML file - no XML ; * '''' is used for metainformation (about the widget, the author, etc.) ; * this is also where your declare the OpenSocial version you wish to us. * '''' also contains the scripting and styling tags, respectively in the usual ''

=== Result === Depending on wether you have friends or not on the sandbox, the result might look like this: {{ :uwa:uwa-opensocial-sample.png |}} From there on, you can certainly imagine the numerous uses for social widgets! :) === What was adapted to UWA in the sample code === While the OpenSocial code itself works as-is, some slight adaptation have to be made to work seamlessly within the UWA environment. These are mostly harmless, and some are already documented in the code's comments. == Global function to local methods == Functions were put into a global object: declaring functions in the form ''function request() { ... }'' means that they are really part of the ''document'' object, which in UWA is not recommended for portability issues (same for ''window''). In order to call these functions cleanly, we therefore have to make them methods of a local object, which will also contain de variables. So, instead of having...


function request() { ... }

function response(dataResponse) {

...we need to declare a JS object (here named MyWidget)...


MyWidget = {};

MyWidget.request = function() { ... }

MyWidget.response = function(dataResponse) {

...and the function calls have to be harmonized in the code. == onLoad handler == The original sample code uses Google Gadget as its container. That container uses the following ''onLoad'' handler:


gadgets.util.registerOnLoadHandler(callback);

Whereas UWA uses the following ''onLoad'' handler:


widget.onLoad = callback.

Therefore, we change the code from...


gadgets.util.registerOnLoadHandler(request);

...to...


widget.onLoad = MyWidget.request;

(note that ''request()'' is now a method of our local object) == Element targeting == As said earlier, ''document'' is not of recommended use within UWA. Therefore, this...


document.getElementById('message').innerHTML = html;

...has to be replaced by a UWA extension, ''[[:uwa:howto:replace_getelementbyid|getElementsByClassName()]]''...


widget.body.getElementsByClassName('message')[0].innerHTML = html;

...along with the target element receiving a unique classname:


  
    Loading...