Friday, August 28, 2009

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

1 comment:

Unknown said...

Excelent reference dude...
Congratulazioni!