First javascript version of a gadget based, single page approach of having an

indexeddb storage locally at browser side.

README.md

+Wendelin project

wendelin_javascript_demo/gadget_erp5_graph.css

+/* ======================= DYGRAPH CSS FORMATTING ==========================  */
+.dygraph-title,
+.dygraph-label,
+.dygraph-axis-label {
+  color: gray;
+  font-family: Helvetica,Arial,sans-serif;
+  font-weight: normal;
+  padding: 0.1em;
+}
+.dygraph-title {
+  font-size: 75%;
+}
\ No newline at end of file

wendelin_javascript_demo/gadget_erp5_graph.js

+/*global window, rJS, console, RSVP, Dygraph, DataView, Float32Array,
+document */
+/*jslint indent: 2, maxerr: 3 */
+
+(function (rJS) {
+  "use strict";
+
+  rJS(window)
+
+    .ready(function (gadget) {
+      gadget.property_dict = {};
+    })
+
+    .declareMethod('draw', function (data) {
+      /* a generic method to call which can draw a diagram */
+      var graph_gadget = this;
+      return graph_gadget.getElement()
+        .push(function (dom_element) {
+
+          var data_points_per_channel, total_channels, byte_len, i,
+            tmp_data, x_value, x_delta, make_shell, start_time, stop_time,
+            make_series, make_graph_struct, test_a;
+
+          // data parameters
+          x_value = "time";               // must be passed from header
+          x_delta = 0.00000025;           // must be passed from header
+          data_points_per_channel = 4000; // must be passed from header
+          total_channels = 3;             // must be passed from header
+
+          start_time = Date.now();
+
+          data = new DataView(data);
+
+          byte_len = data.byteLength;
+
+          tmp_data = new Float32Array(byte_len / Float32Array.BYTES_PER_ELEMENT);
+
+          // Incoming data is raw floating point values with little-endian byte ordering.
+          for (i = 0; i < tmp_data.length; i += 1) {
+            tmp_data[i] = data.getFloat32(i * Float32Array.BYTES_PER_ELEMENT, true);
+          }
+
+          // graph shell
+          make_shell = function (opts) {
+            var x, shell, shell_row;
+
+            shell = [];
+            for (x = 0; x < opts.points; x += 1) {
+              shell_row = [];
+              shell_row.push(opts.delta * x);
+              shell.push(shell_row);
+            }
+            return shell;
+          };
+
+          // graph data series
+          make_series = function (opts) {
+            var k, pos;
+
+            pos = opts.start;
+            for (k = 0; k < opts.points; k += 1) {
+              opts.shell[k].push(opts.float[k + pos]);
+            }
+            return opts.shell;
+          };
+
+          // build a row structure for dygraph with series needed
+          make_graph_struct = function (opts) {
+            var j, k, channel_len, struct, series;
+
+            for (j = 0, channel_len = opts.total_channels; j < channel_len; j += 1) {
+              for (k = 0; k < opts.display.length; k += 1) {
+                series = opts.display[k];
+                if (series[0] === j) {
+                  struct = make_series({
+                    "points": opts.points,
+                    "float": opts.data,
+                    "shell":  make_shell({
+                      "points": opts.points,
+                      "delta": opts.delta
+                    }),
+                    "start": series[1]
+                  });
+                }
+              }
+            }
+            return struct;
+          };
+
+          // dynagraph
+          test_a = new Dygraph(
+            dom_element.querySelector(".graph-a"),
+            make_graph_struct({
+              "display": [[0, 0]],
+              "total_channels": total_channels,
+              "points": data_points_per_channel,
+              "data": tmp_data,
+              "delta": x_delta
+            }),
+            {
+              "legend": 'always',
+              "title": 'Channel X',
+              "showRoller": true,
+              "rollPeriod": 50,
+              "labels": [ x_value, "A" ]
+            }
+          );
+
+          test_a = new Dygraph(
+            dom_element.querySelector(".graph-b"),
+            make_graph_struct({
+              "display": [[1, data_points_per_channel]],
+              "total_channels": total_channels,
+              "points": data_points_per_channel,
+              "data": tmp_data,
+              "delta": x_delta
+            }),
+            {
+              "legend": 'always',
+              "title": 'Channel Y',
+              "showRoller": true,
+              "rollPeriod": 50,
+              "labels": [ x_value, "B" ]
+            }
+          );
+
+          test_a = new Dygraph(
+            dom_element.querySelector(".graph-c"),
+            make_graph_struct({
+              "display": [[2, 2 * data_points_per_channel]],
+              "total_channels": total_channels,
+              "points": data_points_per_channel,
+              "data": tmp_data,
+              "delta": x_delta
+            }),
+            {
+              "legend": 'always',
+              "title": 'Channel Z',
+              "showRoller": true,
+              "rollPeriod": 50,
+              "labels": [ x_value, "C" ]
+            }
+          );
+
+          stop_time = Date.now();
+          console.log(stop_time - start_time);
+        });
+    });
+}(rJS));
\ No newline at end of file

wendelin_javascript_demo/gadget_global.js

+/*global window, RSVP, FileReader */
+/*jslint indent: 2, maxerr: 3, unparam: true */
+(function (window, RSVP, FileReader) {
+  "use strict";
+
+  window.loopEventListener = function (target, type, useCapture, callback,
+                                       allowDefault) {
+    //////////////////////////
+    // Infinite event listener (promise is never resolved)
+    // eventListener is removed when promise is cancelled/rejected
+    //////////////////////////
+    var handle_event_callback,
+      callback_promise;
+
+    function cancelResolver() {
+      if ((callback_promise !== undefined) &&
+          (typeof callback_promise.cancel === "function")) {
+        callback_promise.cancel();
+      }
+    }
+
+    function canceller() {
+      if (handle_event_callback !== undefined) {
+        target.removeEventListener(type, handle_event_callback, useCapture);
+      }
+      cancelResolver();
+    }
+    function itsANonResolvableTrap(resolve, reject) {
+
+      handle_event_callback = function (evt) {
+        evt.stopPropagation();
+        if (allowDefault !== true) {
+          evt.preventDefault();
+        }
+        cancelResolver();
+        callback_promise = new RSVP.Queue()
+          .push(function () {
+            return callback(evt);
+          })
+          .push(undefined, function (error) {
+            if (!(error instanceof RSVP.CancellationError)) {
+              canceller();
+              reject(error);
+            }
+          });
+      };
+
+      target.addEventListener(type, handle_event_callback, useCapture);
+    }
+    return new RSVP.Promise(itsANonResolvableTrap, canceller);
+  };
+
+  window.promiseEventListener = function (target, type, useCapture) {
+    //////////////////////////
+    // Resolve the promise as soon as the event is triggered
+    // eventListener is removed when promise is cancelled/resolved/rejected
+    //////////////////////////
+    var handle_event_callback;
+
+    function canceller() {
+      target.removeEventListener(type, handle_event_callback, useCapture);
+    }
+
+    function resolver(resolve) {
+      handle_event_callback = function (evt) {
+        canceller();
+        evt.stopPropagation();
+        evt.preventDefault();
+        resolve(evt);
+        return false;
+      };
+
+      target.addEventListener(type, handle_event_callback, useCapture);
+    }
+    return new RSVP.Promise(resolver, canceller);
+  };
+
+  window.promiseReadAsText = function (file) {
+    return new RSVP.Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.onload = function (evt) {
+        resolve(evt.target.result);
+      };
+      reader.onerror = function (evt) {
+        reject(evt);
+      };
+      reader.readAsText(file);
+    });
+  };
+
+}(window, RSVP, FileReader));
\ No newline at end of file

wendelin_javascript_demo/gadget_jio.html

+<!DOCTYPE html>
+<html>
+  <head>
+<!--<base href="http://windelin:12001/erp5/web_site_module/wendelin/gadget_jio.html/" />-->
+
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Jio Gadget</title>
+
+    <!-- renderjs -->
+    <script src="rsvp.js" type="text/javascript"></script>
+    <script src="renderjs.js" type="text/javascript"></script>
+
+    <script src="jiodev.js" type="text/javascript"></script>
+
+    <!-- custom script -->
+    <script src="gadget_jio.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

wendelin_javascript_demo/gadget_jio.js

+/*global window, rJS, jIO, FormData */
+/*jslint indent: 2, maxerr: 3 */
+(function (window, rJS, jIO) {
+  "use strict";
+
+  rJS(window)
+
+    .ready(function (gadget) {
+      // Initialize the gadget local parameters
+      gadget.state_parameter_dict = {};
+    })
+
+    .declareMethod('createJio', function (jio_options) {
+      this.state_parameter_dict.jio_storage = jIO.createJIO(jio_options);
+    })
+    .declareMethod('allDocs', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.allDocs.apply(storage, arguments);
+    })
+    .declareMethod('get', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.get.apply(storage, arguments);
+    })
+    .declareMethod('put', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.put.apply(storage, arguments);
+    })
+    .declareMethod('post', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.post.apply(storage, arguments);
+    })
+    .declareMethod('remove', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.remove.apply(storage, arguments);
+    })
+    .declareMethod('getAttachment', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.getAttachment.apply(storage, arguments);
+    })
+    .declareMethod('putAttachment', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.putAttachment.apply(storage, arguments);
+    })
+    .declareMethod('removeAttachment', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      return storage.removeAttachment.apply(storage, arguments);
+    });
+
+}(window, rJS, jIO));
\ No newline at end of file

wendelin_javascript_demo/gadget_wendelin.js

+/*globals window, document, RSVP, rJS, Handlebars, promiseEventListener,
+          loopEventListener, jQuery*/
+/*jslint indent: 2, maxerr: 3 */
+(function (window, rJS, $) {
+  "use strict";
+
+  $.mobile.ajaxEnabled = false;
+  $.mobile.linkBindingEnabled = false;
+  $.mobile.hashListeningEnabled = false;
+  $.mobile.pushStateEnabled = false;
+
+  var DEFAULT_PAGE = "upload",
+    GADGET_SCOPE = "connection";
+
+  function redirectToDefaultPage(gadget) {
+    // Redirect to expected page by default
+    return gadget.aq_pleasePublishMyState({page: DEFAULT_PAGE})
+      .push(gadget.pleaseRedirectMyHash.bind(gadget));
+  }
+
+  function renderShowPage(gadget) {
+    // we create a new show gadget here 
+    return gadget.declareGadget('gadget_wendelin_show.html', {
+      scope: GADGET_SCOPE, // is ok a gadget share same scope as another one ?
+      element: gadget.props.connection_element
+    })
+        // Ivan: when promises of creating a sub gadget is done we call callback in .push
+        // we use .push rather than .then due to cancel of RSVP written by romain
+        .push(function (sub_gadget) {
+          // we call render method which we defined on the gadget in a promise way
+          // options already saved in gadgets' Ram representation
+        var options = gadget.props.options;
+        return sub_gadget.render(options);
+      });
+  }
+
+  function renderUploadPage(gadget) {
+    // we create a new Upload gadget here 
+    return gadget.declareGadget('gadget_wendelin_upload.html', {
+      scope: GADGET_SCOPE,
+      element: gadget.props.connection_element
+    })
+      .push(function (sub_gadget) {
+        // we call render method which we defined on the gadget in a promise way
+        return sub_gadget.render();
+      });
+  }
+
+  function renderListboxPage(gadget) {
+    // we create a new listbox gadget here 
+    return gadget.declareGadget('gadget_wendelin_listbox.html', {
+      scope: GADGET_SCOPE,
+      element: gadget.props.connection_element
+    })
+      .push(function (sub_gadget) {
+        // we call render method which we defined on the gadget in a promise way
+        return sub_gadget.render();
+      });
+  }
+
+  rJS(window)
+    .ready(function (g) {
+      g.props = {};
+      // g.getElement() is a promise but we need result of it
+      return g.getElement()
+        .push(function (result) {
+          g.props.connection_element = result.querySelector(".gadget-content");
+          g.props.link_element = result.querySelector(".alldoclink");
+          g.props.upload_link_element = result.querySelector(".uploadlink");
+        });
+    })
+    // Configure jIO to use localstorage
+    .ready(function (g) {
+      return g.getDeclaredGadget("JIO")
+        .push(function (gadget) {
+          return gadget.createJio({
+            type:  "query",
+            sub_storage: {
+              type: "indexeddb",
+              document_id: "/",
+              database: "test_ivan"
+            }
+          });
+        });
+    })
+    .ready(function (g) {
+      return g.aq_pleasePublishMyState({page: 'listbox'})
+        .push(function (url) {
+           g.props.link_element.href = url;
+         })
+         .push (function() {
+           return g.aq_pleasePublishMyState({page: 'upload'})
+         })
+         .push(function (url) {
+           g.props.upload_link_element.href = url;
+         });
+    })
+
+    //////////////////////////////////////////
+    // Acquired method
+    //////////////////////////////////////////
+    .declareAcquiredMethod('pleaseRedirectMyHash', 'pleaseRedirectMyHash')
+    .allowPublicAcquisition("goAndSaveToHistory", function (param_list) {
+      window.location = param_list[0];
+    })
+    .allowPublicAcquisition("jio_allDocs", function (param_list) {
+      return this.getDeclaredGadget("JIO")
+        .push(function (jio_gadget) {
+          return jio_gadget.allDocs.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_post", function (param_list) {
+      return this.getDeclaredGadget("JIO")
+        .push(function (jio_gadget) {
+          return jio_gadget.post.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_put", function (param_list) {
+      return this.getDeclaredGadget("JIO")
+        .push(function (jio_gadget) {
+          return jio_gadget.put.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("aq_putAttachment", function (param_list) {
+      return this.getDeclaredGadget("JIO")
+        .push(function (jio_gadget) {
+          return jio_gadget.putAttachment.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_get", function (param_list) {
+      return this.getDeclaredGadget("JIO")
+        .push(function (jio_gadget) {
+          return jio_gadget.get.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("aq_getAttachment", function (param_list) {
+      return this.getDeclaredGadget("JIO")
+        .push(function (jio_gadget) {
+          return jio_gadget.getAttachment.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("whoWantsToDisplayThisDocument",
+      function (param_list) {
+        // Hey, I want to display some jIO document
+        var kw = {
+            page: param_list[1] || "upload"
+          };
+        if (param_list[0] !== undefined) {
+          kw.id = param_list[0];
+        }
+        return this.aq_pleasePublishMyState(kw);
+      })
+
+    //////////////////////////////////////////
+    // Declare method (methods of the gadget!)
+    //////////////////////////////////////////
+    .declareMethod('render', function (options) {
+      var result,
+        gadget = this,
+        element = gadget.props.connection_element;
+
+      gadget.props.options = options;
+
+      // do clean up old DOM element's contents
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+
+      // based on page parameter show respective sub gadget inside same page
+      if (options.page === undefined) {
+        result = redirectToDefaultPage(this);
+      } else if (options.page === 'upload') {
+        // show an upload page
+        result = renderUploadPage(gadget);
+      } else if (options.page === 'listbox') {
+        // show an upload page
+        result = renderListboxPage(this);
+      } else if (options.page === 'show') {
+        // show an upload page (ivan)
+        result = renderShowPage(this);
+      } else {
+        throw new Error(options.page);
+      }
+
+      return result
+        // Let JQM know it has to render this
+        .push(function () {
+          $(gadget.props.element).trigger("create");
+        })
+        .push(undefined, function (error) {
+          // XXX Improve renderJS error class
+          if ((error instanceof Error) &&
+              (error.message === "Gadget scope '" +
+                                 GADGET_SCOPE +
+                                 "' is not known.")) {
+            // redirec to default page
+            return gadget.aq_pleasePublishMyState({page: DEFAULT_PAGE})
+              .push(gadget.pleaseRedirectMyHash.bind(gadget));
+          }
+          throw error;
+        });
+    });
+
+}(window, rJS, jQuery));
\ No newline at end of file

wendelin_javascript_demo/gadget_wendelin_graph.html

+<!DOCTYPE html>
+<html>
+  <head>
+<base href="http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_graph.html/" />
+
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>ERP5 Graph</title>
+    
+    <!-- custom css -->
+    <link href="gadget_erp5_graph.css" type="text/css" rel="stylesheet" />
+
+    <!-- renderjs -->
+    <script src="rsvp.js" type="text/javascript"></script>
+    <script src="renderjs.js" type="text/javascript"></script>
+
+    <!-- custom script -->
+    <script src="dygraph.js" type="text/javascript"></script>
+    <script src="gadget_erp5_graph.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <div class="custom-grid-wrap">
+      <div class="custom-grid ui-corner-all ui-body-inherit ui-shadow ui-corner-all"></div>
+        <div class="gadget-graph-content">Loading diagram ...</div>
+        
+          <div class="graph-a"></div>
+          <div class="graph-b"></div>
+          <div class="graph-c"></div>
+    
+    </div>
+  </body>
+</html>

wendelin_javascript_demo/gadget_wendelin_listbox.html

+<!doctype html>
+<html>
+  <head>
+<!--<base href="http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_listbox.html/" />-->
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Listbox Gadget</title>
+
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="handlebars.js"></script>
+    <script src="gadget_wendelin_listbox.js"></script>
+    
+    <script id="contact-list-template" class="contact-list-template" type="text/x-handlebars-template">
+      <div class="ui-grid-b ui-responsive">
+        <div class="ui-block-a"></div>
+        <div class="ui-block-b">
+          <ul data-role="listview" data-inset="true">
+            {{#each url_list}}
+              <li>
+                <a href="{{url}}">
+                  {{id}}
+                </a>
+              </li>
+            {{/each}}
+          </ul>
+        </div>
+        <div class="ui-block-c"></div>
+      </div>
+    </script>
+    
+  </head>
+
+  <body>
+  
+    <h1>Listbox gadget</h1>
+    
+     <div role="main" class="ui-content gadget-content"></div>
+
+  </body>
+</html>

wendelin_javascript_demo/gadget_wendelin_listbox.js

+/*globals window, document, RSVP, rJS, Handlebars, promiseEventListener,
+          loopEventListener, jQuery, console, jIO*/
+/*jslint indent: 2, maxerr: 30, nomen:true */
+(function () {
+  "use strict";
+
+  /////////////////////////////////////////////////////////////////
+  // Handlebars
+  /////////////////////////////////////////////////////////////////
+  // Precompile the templates while loading the first gadget instance
+  var gadget_klass = rJS(window),
+    source = gadget_klass.__template_element
+                         .getElementById("contact-list-template")
+                         .innerHTML,
+    table_template = Handlebars.compile(source);
+
+  // Ivan: we extend gadget API like so:
+  rJS(window).declareMethod('render', function () {
+    var gadget = this,
+      html;
+    return gadget.aq_allDocs()
+      .push(function (result) {
+        var promise_list = [],
+          len = result.data.rows.length,
+          i;
+        for (i = 0; i < len; i += 1) {
+          promise_list.push(result.data.rows[i].id);
+        }
+        return RSVP.all(promise_list);
+      })
+      .push(function (rows) {
+        // posts contains an array of results for the given promises
+        var new_url_list = [],
+          len = rows.length,
+          i;
+        for (i = 0; i < len; i += 1) {
+          // XXX: renderjs generate URL ?
+          new_url_list.push({'url': '#page=show&id=' + rows[i],
+                             'id': rows[i]});
+        }
+        html = table_template({'url_list': new_url_list});
+        return gadget.getElement();
+      })
+      .push(function (element) {
+        // append produced HTML
+        element.innerHTML = html;
+      });
+
+  })
+
+    // ivan: decalre we want to use JIO functionality as an alias (aq_post)
+    .declareAcquiredMethod("aq_allDocs", "jio_allDocs");
+
+}());
\ No newline at end of file

wendelin_javascript_demo/gadget_wendelin_show.html

+<!doctype html>
+<html>
+  <head>
+<!--<base href="http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_show.html/" />-->
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Visualisation Gadget</title>
+
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="gadget_wendelin_show.js"></script>
+    
+  </head>
+
+  <body>
+  
+    <h1>Diagram gadget</h1>
+    
+    <div data-gadget-url="gadget_wendelin_graph.html" data-gadget-scope="Visualise"></div>
+
+  </body>
+</html>

wendelin_javascript_demo/gadget_wendelin_show.js

+/*globals window, document, RSVP, rJS, Handlebars, promiseEventListener,
+          loopEventListener, jQuery, console, jIO*/
+/*jslint indent: 2, maxerr: 3 */
+(function () {
+  "use strict";
+
+  // Ivan: we extend gadget API like so:
+  rJS(window).declareMethod('render', function (options) {
+    var gadget = this;
+
+    return gadget.aq_getAttachment({
+      "_id": options.id,
+      "_attachment": "body.json"
+    })
+      .push(function (result) {
+        // XXX: not nice use directly jio!
+        //return jIO.util.readBlobAsText(result.data); -> old way
+        return jIO.util.readBlobAsArrayBuffer(result.data);
+      })
+      .push(function (event) {
+        gadget.data = event.target.result;
+        // getDeclaredGadget uses scope to get a sub gadget, which is a promise
+        return gadget.getDeclaredGadget('Visualise');
+      })
+      .push(function (sub_gadget) {
+        sub_gadget.draw(gadget.data);
+      });
+  })
+
+    // ivan: decalre we want to use JIO functionality as an alias (aq_post)
+    .declareAcquiredMethod("aq_get", "jio_get")
+    .declareAcquiredMethod("aq_getAttachment", "aq_getAttachment");
+
+}());
\ No newline at end of file

wendelin_javascript_demo/gadget_wendelin_upload.html

+<!doctype html>
+<html>
+  <head>
+<!--<base href="http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_upload.html/" />-->
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Upload page</title>
+
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="gadget_wendelin_upload.js"></script>
+    
+  </head>
+
+  <body>
+  
+    <h1>Upload dialog (saves upload to IndexedDB)</h1>
+    
+    <form class="import_form">
+      <input id="dream_import"  class="ui-btn ui-btn-b ui-btn-inline" type="file" required name="dream_import"></input>
+      <button type="submit" class="ui-btn ui-btn-b ui-btn-inline ui-icon-plus ui-btn-icon-right">Import</button>
+    </form>
+    
+  </body>
+</html>

wendelin_javascript_demo/gadget_wendelin_upload.js

+/*globals window, document, RSVP, rJS, Handlebars, promiseEventListener,
+          loopEventListener, jQuery, promiseReadAsText*/
+/*jslint indent: 2, maxerr: 3 */
+
+(function () {
+  "use strict";
+
+  function randomString(length) {
+    var i,
+      str = '',
+      chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
+
+    if (!length) {
+      length = Math.floor(Math.random() * chars.length);
+    }
+
+    for (i = 0; i < length; i = i + 1) {
+      str += chars[Math.floor(Math.random() * chars.length)];
+    }
+    return str;
+  }
+
+  function waitForImport(gadget) {
+    var name,
+      upload_file;
+
+    return new RSVP.Queue()
+      .push(function () {
+        return gadget.getElement();
+      })
+      .push(function (element) {
+        return promiseEventListener(
+          element.getElementsByClassName("import_form")[0],
+          'submit',
+          false
+        );
+      })
+      .push(function (evt) {
+        // Prevent double click
+        var now = new Date();
+        evt.target
+           .getElementsByClassName("ui-btn")[0].disabled = true;
+
+        upload_file = evt.target.dream_import.files[0];
+        name = upload_file.name;
+
+        // Create jIO document
+        return gadget.aq_put({
+          _id: randomString(12),
+          title: name,
+          type: "Dream",
+          format: "application/json",
+          modified: now.toUTCString(),
+          date: now.getFullYear() + "-" + (now.getMonth() + 1) + "-" +  now.getDate()
+        });
+      })
+      .push(function (id) {
+        gadget.foo_id = id;
+        // Add JSON as attachment
+        return gadget.aq_putAttachment({
+          "_id": id,
+          "_attachment": "body.json",
+          "_data": upload_file,
+          "_mimetype": "application/json"
+        });
+      });
+  }
+    // Ivan: we extend gadget API like so:
+  rJS(window).declareMethod('render', function () {
+    return 'this is render method in a subgadget';
+  })
+
+    // ivan: decalre we want to use JIO functionality as an alias (aq_post)
+    .declareAcquiredMethod("aq_post", "jio_post")
+    .declareAcquiredMethod("aq_put", "jio_put")
+    .declareAcquiredMethod("aq_putAttachment", "aq_putAttachment")
+    .declareAcquiredMethod("whoWantsToDisplayThisDocument", "whoWantsToDisplayThisDocument")
+    .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
+    .declareAcquiredMethod("goAndSaveToHistory", "goAndSaveToHistory")
+
+    // catch form submission
+    .declareService(function () {
+      var gadget = this;
+
+      return new RSVP.Queue()
+        .push(function () {
+          // wait for user input of upload file.
+          return waitForImport(gadget);
+        })
+        .push(function () {
+          // ask RenderJs create an URL for us which represents the current "state" of the application
+          return gadget.whoWantsToDisplayThisDocument(gadget.foo_id, 'show');
+        })
+        .push(function (url) {
+          // redirect to url produced from previous call
+          return gadget.goAndSaveToHistory(url);
+        });
+    });
+}());
\ No newline at end of file

wendelin_javascript_demo/get_all

+#!/bin/bash
+wget http://windelin:12001/erp5/web_site_module/wendelin/dygraph.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_erp5_graph.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_graph.html
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_listbox.html
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_listbox.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin.html
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_show.html
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_show.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_upload.html
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin_upload.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_erp5_graph.css
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_jio.html
+wget http://windelin:12001/erp5/web_site_module/wendelin/jiodev.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_jio.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/rsvp.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/renderjs.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/handlebars.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/gadget_global.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/jquerymobile.css
+wget http://windelin:12001/erp5/web_site_module/wendelin/jquerymobile.js
+wget http://windelin:12001/erp5/web_site_module/wendelin/jquery.js
+

wendelin_javascript_demo/index.html

+<!doctype html>
+<html>
+  <head>
+<!--<base href="http://windelin:12001/erp5/web_site_module/wendelin/gadget_wendelin.html/" />-->
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title> Windelin Visualisation Demo Vibration Data Client </title>
+    <link id="favicon" rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAADf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAERAAAAAAAAEQEAAAAAAAEQARAAAAAAARAAEQAAAAARAAARAAAAABAAAAEQAAAAAAAAABEAAAAAAAAAEQAAAAAAAAABEAAAAAAAAAARAAAAAAAAABEAAAAAAAAAAQAAAAAAAAAAD//wAA//8AAP7/AAD8fwAA+X8AAPM/AADznwAA558AAO/PAAD/5wAA/+cAAP/zAAD/+QAA//kAAP/9AAD//wAA">
+
+    <link rel="stylesheet" href="jquerymobile.css">
+
+    <script src="jquery.js"></script>
+    <script src="jquerymobile.js"></script>
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="handlebars.js"></script>
+    <script src="gadget_global.js" ></script>
+    <script src="gadget_wendelin.js"></script>
+    
+  </head>
+
+  <body>
+    <div class="ui-hidden-accessible connection-gadget-container"></div>
+
+    <div data-role="page">
+
+      <div data-role="header" data-position="fixeppppppd" class="gadget-header" data-theme="b">
+        <h1>Wendelin Graph Visualisation</h1>
+        <a class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all uploadlink">Upload</a>
+        <a class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all alldoclink">List Document</a>
+      </div>
+
+      <div role="main" class="ui-content gadget-content"></div>
+      
+    </div>
+    
+    <!-- Example of inline a global gadget, scope is mandatory -->
+    <div data-gadget-url="gadget_jio.html" data-gadget-scope="JIO"></div>
+    
+  </body>
+</html>