A bug in Shindig code (for revision 832845)

Recently, I tried to deploy cyberaide filetransfer gadget (http://lily01.rit.edu/cyberaideFiletransfer.xml) and jobman gadget (http://lily01.rit.edu/cyberaideJobman.xml). They did NOT work in shindig server built from revision 832845. Those two gadgets use ‘tab’ feature which is not implemented well in shindig code.

Problem description
See source code of tab feature at http://svn.apache.org/repos/asf/incubator/shindig/trunk/features/src/main/javascript/features/tabs/tabs.js?p=832845.
In this file, function ‘html_sanitize’ is used. It is a function from caja javascript library.
Shindig website does not provide much useful information about integration of caja. http://incubator.apache.org/shindig/developers/java/build.html#Running_with_Caja
I found a useful wiki page in caja project: http://code.google.com/p/google-caja/wiki/GettingStarted.
Basically the user needs to add following text to ModulePrefs element of the gadget xml file
    <Require feature="caja"/>
After I changed the gadget xml file, it still didn’t work. It seems that after caja library sanitizes the rendered html/javascript code, some useful code is removed.

My solution
To make it simple, I disabled caja. I just removed invocations of functions belonging to caja library. Concretely, I removed invocations of function ‘html_sanitize’ in file ‘tab.js’

Also, feature ‘minimessage’ also uses caja functions to sanitize html/javascript. If your gadgets use that feature, corresponding changes must be made as well.

Dynamic-height in Shindig

Gadget specification provides a feature called dynamic-height to dynamically adjust height of a gadget.
If gadget server and gadget container are in the same domain, this can be done using javascript.
However, if gadget server and gadget container are in different domains, this can not be achieved by directly using Javascript and DOM because of same-origin policy imposed by modern browsers.
This email http://markmail.org/message/53r5dwhr56lby733#query:dynamic%20height%20shindig+page:1+mid:53r5dwhr56lby733+state:results includes some information about how to make it work.
I am going to give more details here.

Gadget container

1. Download
       http://svn.apache.org/repos/asf/incubator/shindig/trunk/javascript/container/cookies.js
       http://svn.apache.org/repos/asf/incubator/shindig/trunk/javascript/container/gadgets.js
       http://svn.apache.org/repos/asf/incubator/shindig/trunk/javascript/container/util.js
       http://your_shindig_deploy/gadgets/js/rpc.js?c=1&debug=1 (//this file actually includes rpc framework and all possible communication mechanism, e.g. ifpc, wpm...)
   And put them into your gadget container server.
2. Include following code in your container web page to make them point to those javascript files you downloaded in step 1).

   <script type="text/javascript" src="rpc.js"></script>
   <script type="text/javascript" src="cookies.js"></script>
   <script type="text/javascript" src="util.js"></script>
   <script type="text/javascript" src="gadgets.js"></script>

3. Download
       rpc_relay.html : http://svn.apache.org/repos/asf/incubator/shindig/trunk/javascript/container/rpc_relay.html
   or
       rpc_relay_uncompressed.html: http://svn.apache.org/repos/asf/incubator/shindig/trunk/javascript/container/rpc_relay.uncompressed.html

Gadget server/renderer

1. Check out Shindig source code. See http://incubator.apache.org/shindig/source-repository.html
2. Change source code of file ifpc.transport.js
   

   Original:
   // The RPC mechanism supports two formats for IFPC (legacy and current).
   var src = null;
   if (rpc.l) {

   New

   // The RPC mechanism supports two formats for IFPC (legacy and current).
   var src = null;
   if (false) {

   This disables use of legacy data format which is buggy.
3. Change configuration in file config/container.js
       Original: "parentRelayUrl" : "/gadgets/files/container/rpc_relay.html"
       New:       "parentRelayUrl" : "rpc_relay file address on your gadget container" //it is download in this step
   Also you may want to use ifpc instead of browser-specific communication mechanisms.
       Original: "useLegacyProtocol" : false    //gadget tries browser-specific communication mechanisms first. If they fail, fall back to ifpc.
       New:      "useLegacyProtocol" : true           //use ifpc directly.
   Note: the current wire format will be used instead of legacy format because we have disabled legacy format.
   This option is not used in the way described by comment in the source code. The shindig developers want users to use this option to control whether legacy format is used. I use it to configure whether ifpc is used. If ifpc is used, only current wire format is utilized.
   This can also be set after you deploy shindig. The configuration file is located at WEB-INF/classes/containers/default/.
4. Rebuild shindig.
5. Copy generated .war file in directory server/target to your servlet container.

Resources

Detailed discussion: http://docs.google.com/View?id=dmxthpg_125ckh55fff
Cross-Domain Communication with IFrames: http://softwareas.com/cross-domain-communication-with-iframes

Deploy standalone shindig on Quarry and an OAuth gadget demo

I got a virtual machine which I can log in as root. The virtual machine is pretty clean without any more packages besides CentOS.
I installed vim using yum install vim-enhanced. I also installed jdk1.5 and maven2.

Then I checked out the source code from shindig svn trunk. See instructions here http://incubator.apache.org/shindig/#tab-building.
Unfortunately, the test failed when I compiled and installed shindig. This kind of things always happens because of instability of trunk code. So I copied my previous checkout of shindig code which worked well from another machine. Then the compilation and installation succeeded.

OAuth gadget demo to retrieve google contact list

Now the sample demo is here:
http://gw11.quarry.iu.teragrid.org:9999/gadgets/files/samplecontainer/samplecontainer.html

Set field "Displaying gadget" to http://156.56.104.196:8888/oauth/gadgets/os_gadget.xml, Uncheck "use cache".
Click button "reset all". If everything works fine, you would see following in main panel:

Clieck "Personalize this gadget", a popup window would appear which prompts you to login to your google account. Then you can choose grant or deny the access request. If you grant the request, the popup window would be closed automatically, and the main panel would be populated with your google contact list.

Shindig server on Tomcat

Shindig can be run with built-in jetty server without problems. But after I deployed the war to Tomcat, there are some problems. I got a blank page when I tried to render a gadget. I searched for the problem, some other guys got this problem as well.

Other posts related to this problem:
http://mail-archives.apache.org/mod_mbox/incubator-shindig-dev/200805.mbox/%3C483C780B.6080802@oracle.com%3E

Finally I figured out how to make shindig work on Tomcat.
Why does not it work?
It ignores the context path. In other words, the implementation only considers the situation that the application is deployed as root application.

Two possible Solutions
(1) make shindig war the root application
Two alternative ways:
    (*) rename it to ROOT.war and deploy it to tomcat. (The original ROOT application cannot be used)
    (*) change conf/context.xml to set shindig application as root application
(2) Modify shindig configuration files <shindig>/java/common/conf/shindig.properties and <shindig>/config/container.js to add context path in all related urls.
It seems to work well. I am not sure whether there is any potential problem.

Demo Apps

I have written several demo apps.
(1) A regular gadget with gadgets.* API
This is based on official youtube gadget presented here. Official youtube gadget uses traditional gadget API, which means it can not be run in open social containers.
I modified the source of official youtube gadget to make it compatible with open social API. Source is hosted here.
I run it on Ringside, and it works well. Screenshot is shown below:

Besides, I run it on iGoogle sandbox and Orkut sandbox successfully.

(2) An open social gadget
This gadget is written with Open Social API so that it can be run in all standard compatible containers. This gadget lists all friends you have in a container. If you add it to your Orkut account, it will list your friends in your Orkut account. If you add it to your hi5 account, it will list your friends in your hi5 account.
Source is hosted here.
I run it on Ringside, and screenshot is shown below:

Besides, I run it on iGoogle sandbox and Orkut sandbox successfully.

(3) A Facebook application.
This application gets your friend list on Facebook and displays related information including profile picture, last name, first name and birth date. You can see its information here. Meanwhile you can add it to your Facebook account.
Screenshot is shown below:
 

(4) A port of application (3)(The facebook application). 
Because Ringside implements Facebook API and FBML, application (3) should be able to be run on Ringside with minor modifications. New API key and secret should be used. Besides Ringside RESTful server (instead of Facebook server) address should be used.
Finally, I got it to run successfully on Ringside.

(5) Make Facebook to use Ringside application
I used the method described in this post and this post. It should work. But unfortunately it did not work. Currently I don't know why.

To try it in Ringside
First go to http://gf1.ucs.indiana.edu:8080/ to log in.
Then click tab "Applications":

Following page should be displayed:

Main panel displays a list of all applications you have added to your account. You can click any one to use it.
Or you can click button "Find More Apps" at top right corner to browse more available apps.
Application "youtube gadget" is the application (1) described above.
Application "Friend gadget(Open social)" is the application (2) described above.
Application "Your Friends Native" is the application(4) described above.
To run application (3), you need a Facebook account and add it to your account by accessing here.

Google Gadget and OpenSocial

Opensocial API is an open set of APIs which can be used to access various social network applications. Currently, social network apps which support OpenSocial API are listed here.

Google Gadget:
Official specification of Gadget server/container is here(http://code.google.com/apis/gadgets/docs/spec.html). It includes abundant information about how gadget container handles gadget requests from clients. The basic idea is gadget container processes gadget .xml definition file and generates corresponding HTML+CSS+Javascript and then transferres the result to end users. Variety of functionalities gadget deveoper can utilize depends on gadget container. Different gadget containers may provide different set of features. However, some APIs are mandatory and must be supported by all compliant implementations. Javascript gadget specification is here(http://code.google.com/apis/gadgets/docs/reference/). Gadget XML reference is here(http://code.google.com/apis/gadgets/docs/reference.html). This site contains many useful hints about how to develop and test Google Gadgets.

There are two set of Gadget APIs:Legacy API and gadgets.* api(used by Open Social spec).

Gadget Host:
If you don't have a web server to host the gadget XML file, Google Gadgets Editor is a tool provided by Google which can be used to edit and host gadgets. You can test your gadgets in GGE withoug logging in Google. But you cannot save your gadgets without logging in. You can add Google Gadget Editor gadget to your iGoogle homepage by accessing this site. It seems that only legacy gadget APIs are supported in preview mode by GGE. GGE just provides very simple functionalities. You can use it just as a hosting service which stores your gadget spec files. If you want more functionalities like version control, you can use Google Code Hosting(http://code.google.com/hosting/) or other full-fledged hosting services.  This site contains detailed information about how to use Google hosting services.

Legacy Gadget Container:
Besides spec files, gadget container is necessary to run your gadgets. To test legacy Google Gadgets, you can GGE or iGoogle content directory. Here contains instructions about how to publish your gadgets to iGoogle content directory. You can update your submitted gadgets using this site. NOTE: iGoogle content directory only applies to legacy gadgets.

Open Social Gadget container:
To test new google gadgets(using gadgets.* API), you should use a certain container listed here. Note: two services from Google are in the list. However, to use them, you must sign up for sandbox access besides regular logging in. To sign up sandbox access of iGoogle, visit this site(http://www.google.com/ig/sandbox). To sign up sandbox access of Orkut, visit this site. These two services are still in beta phase and thus provide limited functionalities.

Resources:
iGoogle Dev: http://code.google.com/apis/igoogle/docs/igoogledevguide.html
Orkut Dev: http://code.google.com/apis/orkut/docs/orkutdevguide.html