javascript/README

   1 Using Shindig Gadget Container JavaScript
   2 =========================================
   3
   4 1) Try out the samples.
   5    A) Set up your own Shindig Gadget Server. See java/README for details.
   6
   7    B) Assuming your server is running on http://yourserver:yourport/gadgets/...
   8       you can hit these html files in your favorite browser to see your local
   9       Shindig in action:
  10
  11       (Note: yourserver:yourport defaults to localhost:8080 for the java server,
  12       and just localhost for the php server)
  13
  14       * http://yourserver:yourport/gadgets/files/container/sample1.html - basic container
  15       * http://yourserver:yourport/gadgets/files/container/sample2.html - custom rendering
  16       * http://yourserver:yourport/gadgets/files/container/sample3.html - custom layouts
  17       * http://yourserver:yourport/gadgets/files/container/sample4.html - set pref
  18       * http://yourserver:yourport/gadgets/files/container/sample5.html - set pref
  19       * http://yourserver:yourport/gadgets/files/container/sample6.html - dynamic height
  20       * http://yourserver:yourport/gadgets/files/container/sample7.html - set title
  21
  22       These samples are very basic and aren't production-ready. Shindig will
  23       include a more advanced container at a later date but it hasn't been
  24       completed yet.
  25
  26 2) Play around with the code.
  27
  28    A) Create an HTML file including the following <head> boilerplate:
  29       <script type="text/javascript" src="../../js/rpc.js?c=1"></script>
  30       <script type="text/javascript" src="cookies.js"></script>
  31       <script type="text/javascript" src="util.js"></script>
  32       <script type="text/javascript" src="gadgets.js"></script>
  33       <script type="text/javascript" src="cookiebaseduserprefstore.js"></script>
  34
  35    B) For each Gadget you wish to add to the page:
  36       i) Create it. Example, for Gadget whose spec is at http://foo.com/spec.xml
  37
  38         var gadget = gadgets.container.createGadget(
  39             {specUrl: "http://foo.com/spec.xml"});
  40
  41   Check "gadgets.js" for other options to be set in createGadget. If you are
  42   debugging your own gadgets you can consider to use specVersion to get a more
  43   optimal use of the cache. Alternatively, gadgets.container.setNoCache(1)
  44
  45       ii) Add it to the container. Example:
  46
  47         gadgets.container.addGadget(gadget);
  48
  49     If your setup is too complicated, you can need to tell each Gadget
  50   where its server is. Example
  51
  52   gadget.setServerBase("http://yourserver:yourport/gadgets/");
  53
  54       iii) Ensure the Gadget's chrome ID is defined. This is the ID of the
  55         elements in which the Gadget is rendered. The way these are specified
  56         differs depending on the LayoutManager being used. Example with default
  57         LayoutManager:
  58
  59         gadgets.container.layoutManager.setGadgetChromeIds([ 'gadget-id-1' ]);
  60
  61       iv) Render it. The chrome element must exist when this call is performed
  62         (ie. this must occur onLoad of the document.body or in inline script).
  63
  64         gadgets.container.renderGadget(gadget);
  65
  66         You may also render several added Gadgets at once:
  67
  68         gadgets.container.renderGadgets();
  69
  70    C) Explore samples 2, 3, and 4 for examples using different LayoutManagers
  71       and supporting UserPrefs storage.
  72
  73 4) Run the opensocial sample container
  74    A) Set up your own Shindig Gadget Server. See java/README for details. (If you
  75      are using the java based server make sure you run with mvn jetty:run-war)
  76
  77    B) Hit the sample container at
  78      http://yourserver:yourport/gadgets/files/samplecontainer/samplecontainer.html
  79
  80    C) See the sample container help document for more details on how it works:
  81      http://yourserver:yourport/gadgets/files/samplecontainer/getting-started.html
  82
  83    D) Get, and try to run, coderunner.xml and compliancetests.xml from the project
  84      http://opensocial-resources.googlecode.com/
  85
  86
  87 For more information, see http://incubator.apache.org/projects/shindig.html