Teru's blog

Shindig Samples

Found Shindig samples while reading http://trac.hyves-api.nl/hyves-api/wiki/ShindigStarted. Following README at ~/Src/Shindig/javascript, ran the samples.

Sample 1 at http://localhost:8080/gadgets/files/container/sample1.html shows [[image: shindig_example1.png]] . Looks Ok, and worked fine.

Its source is sample1.html as below:

Line No.
-------　　　　　　　　
      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>Sample: Simple Container</title>
      5 <!-- default container look and feel -->
      6 <link rel="stylesheet" href="gadgets.css">
      7 <script type="text/javascript" src="../../js/rpc.js?c=1&debug=1"></script>
      8 <script type="text/javascript" src="cookies.js"></script>
      9 <script type="text/javascript" src="util.js"></script>
     10 <script type="text/javascript" src="gadgets.js"></script>
     11 <script type="text/javascript" src="cookiebaseduserprefstore.js"></script>
     12 <script type="text/javascript">
     13 var specUrl0 = 'http://www.google.com/ig/modules/horoscope.xml';
     14 var specUrl1 = 'http://www.labpixies.com/campaigns/todo/todo.xml';
     15 
     16 // This container lays out and renders gadgets itself.
     17 
     18 function renderGadgets() {
     19   var gadget0 = gadgets.container.createGadget({specUrl: specUrl0});
     20   var gadget1 = gadgets.container.createGadget({specUrl: specUrl1});
     21 
     22   gadgets.container.addGadget(gadget0);
     23   gadgets.container.addGadget(gadget1);
     24   gadgets.container.layoutManager.setGadgetChromeIds(
     25       ['gadget-chrome-x', 'gadget-chrome-y']);
     26 
     27   gadgets.container.renderGadget(gadget0);
     28   gadgets.container.renderGadget(gadget1);
     29 };
     30 </script>
     31 </head>
     32 <body onLoad="renderGadgets()">
     33   <h2>Sample: Simple Container</h2>
     34   <div id="gadget-chrome-x" class="gadgets-gadget-chrome"></div>
     35   <div id="gadget-chrome-y" class="gadgets-gadget-chrome"></div>
     36 </body>
     37 </html>

Reading the code:

Body specifies divisions with ID and CLASS, and the function to be performed on loading.
Header specifies title, CSS file, relevant JavaScript files, URLs of gadgets, and then define the onLoad function.
Onload function:
1. creates gadgets,
2. adds gadgets to container,
3. sets layout, and
4. renders gadgets.

Pretty straightforward in meaning Still found it difficult to analyse the gadget, e.g., at http://www.google.com/ig/modules/horoscope.xml.

Ran other samples. Sample 4 and 5 didn't perform well. Other samples upto 7 ran nicely.

• Wrote Teru at 17:46 (edited 5×, last on 10 Apr 2008) | read 55× | Add comment

Your name	Remember personal data
E-mail	(only visible for blog owner)
Homepage
How much is 3+2?	(protection against spam-bots)

Article with comments

Wednesday, 09 Apr 2008

Shindig Samples

Comments (0)

Write a comment