WIP gadget for erp5 UI.

This is just a non working prototype currently.

src/erp5/erp5.less

+// @import "jquerymobile.nativedroid.less";
+// @import "jquerymobile.nativedroid.dark.less";
+// @import "jquerymobile.nativedroid.color.green.less";
+
+
+//      .odd {
+// 
+//       background-color : black;
+// 
+//       color : white;
+// 
+//       text-align : center;
+// 
+//       height : 30px;
+// 
+//       padding-top : 5px;
+// 
+//     }
+// 
+//     .even {
+// 
+//       background-color : gray;
+// 
+//       color : white;
+// 
+//       text-align : center;
+// 
+//       height : 30px;
+// 
+//       padding-top : 5px;
+// 
+//     }
+
+table {
+  border-top: 0.1em solid #3D6474;
+  border-bottom: 0.1em solid #3D6474;
+  border-left: 0.1em solid #3D6474;
+//   background: #C1DAEB;
+
+//   tbody {
+//     tr:nth-child(2n) {
+//       background: black;
+//       color : white;
+//       text-align : center;
+//     }
+//     tr:nth-child(2n+1) {
+//       background: #FFFFFF;
+//       background-color : gray;
+//       color : white;
+//       text-align : center;
+//     }
+//   }
+
+  th {
+    border-right: 0.1em solid #3D6474;
+  }
+}
+
+form .left, form .right, .center, .bottom {
+   display: inline-block;
+   vertical-align: top;
+}
+.left, .right {
+   width: 48%;
+}
+
+iframe {
+  width: 95%;
+  height: 500px;
+}

src/erp5/gadget_index_url.js

+/*global rJS, RSVP, jQuery, URI, console */
+/*jslint nomen: true */
+(function (rJS, $, RSVP, URI) {
+  "use strict";
+
+  /////////////////////////////////////////////////////////////////
+  // Custom Stop Error
+  /////////////////////////////////////////////////////////////////
+  function StopRenderingError(message) {
+    this.name = "StopRenderingError";
+    if ((message !== undefined) && (typeof message !== "string")) {
+      throw new TypeError('You must pass a string.');
+    }
+    this.message = message || "StopRendering failed";
+  }
+  StopRenderingError.prototype = new Error();
+  StopRenderingError.prototype.constructor =
+    StopRenderingError;
+
+  /////////////////////////////////////////////////////////////////
+  // Desactivate jQuery Mobile URL management
+  /////////////////////////////////////////////////////////////////
+  $.mobile.ajaxEnabled = false;
+  $.mobile.linkBindingEnabled = false;
+  $.mobile.hashListeningEnabled = false;
+  $.mobile.pushStateEnabled = false;
+
+  /////////////////////////////////////////////////////////////////
+  // Gadget behaviour
+  /////////////////////////////////////////////////////////////////
+
+  function getCachedGadgetOrLoad(gadget, url, scope, element) {
+    return gadget.getDeclaredGadget(scope)
+      .fail(function () {
+        return gadget.declareGadget(url, {
+          scope: scope,
+          element: element
+        });
+      });
+  }
+
+  var JIO_GADGET = "../jio_bridge/index.html",
+    FORM_GADGET = "../erp5_form/index.html";
+
+  rJS(window)
+    .ready(function (g) {
+      g.render();
+    })
+    .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
+
+    .declareMethod('render', function (options) {
+      var gadget = this;
+      gadget.state_parameter_dict = options;
+      return RSVP.Queue()
+        .push(function () {
+          return RSVP.all([
+            getCachedGadgetOrLoad(gadget, JIO_GADGET, "jio_gadget"),
+            getCachedGadgetOrLoad(gadget, FORM_GADGET, "form_gadget",
+                                  document.getElementById('mainarticle'))
+          ]);
+        })
+        .push(function (gadget_list) {
+          gadget.sub_gadget_dict = {
+            jio_gadget: gadget_list[0],
+            form_gadget: gadget_list[1]
+          };
+          if (options.jio_key === undefined) {
+            // 
+//           ///////////////////////////////////////////////
+//           // Default view
+//           ///////////////////////////////////////////////
+//           return gadget.sub_gadget_dict.jio_gadget.allDocs(
+//             {"query": '__root__'}
+//           );
+//         })
+//         .push(function (result) {
+//           console.log("tructruc");
+//           // return the default jio_key
+//           // return result.data.rows[0].id;
+//           // return "person_module";
+//           return "computer_module/20130611-5BFC";
+//         })
+//         .push(function (jio_key) {
+//
+//             jio_key_hash = "jio_key=" +
+// //               encodeURIComponent("computer_module/20130611-5BFC");
+//               encodeURIComponent("person_module");
+
+            // XXX TODO try no to wrap into anonymous function
+            return new RSVP.Queue()
+              .push(function () {
+                return gadget.aq_pleasePublishMyState(
+                  {jio_key: "person_module"}
+                );
+              })
+              .push(function (lala) {
+                return gadget.pleaseRedirectMyHash(lala);
+              })
+              .push(function () {
+                throw new StopRenderingError("No need to do more");
+              });
+          }
+        })
+        .push(function () {
+          var jio_key = options.jio_key,
+            view = options.view || "view";
+          ///////////////////////////////////////////////
+          // Display erp5 document view
+          ///////////////////////////////////////////////
+          return gadget.sub_gadget_dict.jio_gadget.get(
+            {"_id": jio_key},
+            {"_view": view}
+          );
+        })
+        .push(function (result) {
+          var uri = new URI(
+            result.data._embedded._view._links.form_definition.href
+          );
+//           if ((uri.scheme() === "urn") &&
+//               (uri.segment(0) === "jio") &&
+//               (uri.segment(1) === "get")) {
+//           }
+          return RSVP.all([
+            result,
+            // XXX
+            gadget.sub_gadget_dict.jio_gadget.get(
+              {"_id": uri.segment(2)},
+              {"_view": "view"}
+            )
+          ]);
+        })
+        .push(function (result) {
+          var sub_options = options.form_gadget || {};
+          sub_options.erp5_document = result[0].data;
+          sub_options.form_definition = result[1].data;
+
+          return gadget.sub_gadget_dict.form_gadget.render(sub_options);
+        })
+        .push(function () {
+          // XXX JQuery mobile
+          $(gadget.sub_gadget_dict.form_gadget.element).trigger('create');
+        })
+        .push(undefined, function (error) {
+          if (error instanceof StopRenderingError) {
+            return;
+          }
+          throw error;
+        });
+    })
+
+    .allowPublicAcquisition("pleaseAllDocsXXX", function (param_list) {
+      return this.sub_gadget_dict.jio_gadget.allDocs.apply(
+        this.sub_gadget_dict.jio_gadget,
+        param_list
+      );
+    })
+
+    .allowPublicAcquisition("whoWantToDisplayThis", function (param_list) {
+      // Hey, I want to display some URL
+      return this.aq_pleasePublishMyState({jio_key: param_list[0]});
+    });
+
+}(rJS, jQuery, RSVP, URI));

src/erp5/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>ERP5</title>
+
+    <link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
+    <link rel="stylesheet" href="erp5.css">
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+
+    <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= curl.jquerymobilejs.relative_dest %>" type="text/javascript"></script>
+
+    <!-- custom script -->
+    <script src="gadget_index_url.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+
+  <div data-role="panel" id="leftpanel" data-display="overlay"></div>
+  <!--div data-role="panel" id="rightpanel" data-display="overlay"
+      data-position="right"></div-->
+
+  <header data-role="header">
+    <a href="#leftpanel">Open panel</a>
+    <h1>ERP5</h1>
+    <!--form><input type="text" name="couscous"
+        value="couscous"></input><button type="submit">Search</button></form-->
+    <a href="#">Home</a>
+    <!--a href="#rightpanel">Open panel</a-->
+  </header>
+
+  <article id="mainarticle">
+  </article>
+
+  </body>
+</html>

src/erp5_button_field/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Buttonfield</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="buttonfield.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <!--label></label-->
+    <button type='submit'>Submit</button>
+  </body>
+</html>

src/erp5_form/erp5form.js

+/*global window, rJS, RSVP, StatelessJS, alert, FormData, document, console */
+/*jslint maxlen:80, nomen: true */
+(function (rJS) {
+  "use strict";
+
+//   function loopEventListener(target, type, useCapture, callback) {
+//     //////////////////////////
+//     // 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();
+//         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);
+//   }
+
+  function clearPreviousGadgetList(form_gadget, element) {
+    // Drop the previous gadget fields
+    form_gadget.private_gadget_list = [];
+  }
+
+  rJS(window)
+    .ready(function (g) {
+      g.private_gadget_list = [];
+    })
+
+    .ready(function (g) {
+      return new RSVP.Queue()
+        .push(function () {
+          return g.getElement();
+        })
+        .push(function (element) {
+          g.element = element;
+        });
+    })
+
+    .declareMethod('render', function (options) {
+      console.log(options.form_definition);
+      var i,
+        erp5_document = options.erp5_document,
+        form_definition = options.form_definition,
+        rendered_form = erp5_document._embedded._view,
+        group,
+        group_list = form_definition.group_list,
+        j,
+        tmp = "",
+        field,
+        final_element = document.createElement("div"),
+        form_gadget = this,
+        result_list = [],
+        value_list = [];
+
+//       form_gadget.clear();
+      delete options.erp5_document;
+      delete options.form_definition;
+
+      options = options.form_gadget || {};
+      form_gadget.state_parameter_dict = options;
+      clearPreviousGadgetList(form_gadget,
+        form_gadget.element.getElementsByTagName('form')[0]);
+
+      for (i = 0; i < group_list.length; i += 1) {
+        group = group_list[i][1];
+        tmp += "<fieldset " +
+          "class='" + group_list[i][0] + "'>";
+        for (j = 0; j < group.length; j += 1) {
+          if (rendered_form.hasOwnProperty(group[j][0])) {
+            // Field is enabled in this context
+            field = rendered_form[group[j][0]];
+            value_list.push(field);
+            tmp += "<div data-role='fieldcontain'><label for='" +
+              field.key + "'>" + field.title + "</label></div>";
+          }
+        }
+        tmp += "</fieldset>";
+      }
+
+      // XXX Do not attach at the beginning
+//       form_gadget.element.getElementsByTagName('form')[0]
+//         .appendChild(final_element);
+
+      function generateSetStringFieldContent(i, gadget_url, scope) {
+        return function (g) {
+//           var label = final_element.getElementsByTagName("label")[i];
+          form_gadget.private_gadget_list.push(g);
+
+//           g.on("pleaseAllDocsXXX", function (evt) {
+// //             alert("allDocsRequested 2!!!!");
+//             console.log("allDocsRequested 2!!!!");
+//             console.log(evt);
+//             form_gadget.trigger(evt.type, evt);
+//           });
+
+// //           label.parentNode.insertBefore(g.element, label.nextSibling);
+//           if (gadget_url === './listbox.html') {
+//             return RSVP.Queue()
+//               .push(function () {
+//                 return g.registerUrlForMethod(form_gadget.urlFor);
+//               })
+//               .push(function () {
+//                 return g.render(value_list[i]);
+//               });
+//           }
+          g.id = i;
+          var suboptions = options[scope] || {};
+          suboptions.field_json = value_list[i];
+          return g.render(suboptions);
+        };
+      }
+
+      function declareGadget(gadget_url, element, scope) {
+        return function () {
+          if (gadget_url === './listbox.html') {
+            // XXX TEST only iframe listbox
+            return form_gadget.declareGadget(gadget_url, {
+//               sandbox: 'iframe',
+              scope: scope,
+              element: element
+            });
+          }
+          return form_gadget.declareGadget(gadget_url, {
+            scope: scope,
+            element: element
+          });
+        };
+      }
+
+      // rJS(this).element.getElementsByTagName('form')[0].innerHTML = tmp;
+      final_element.innerHTML = tmp;
+
+//       this.element.getElementsByTagName('form')[0].setAttribute(
+//         'action',
+//         form_json._actions.put.href
+//       );
+//       this.element.getElementsByTagName('form')[0].setAttribute(
+//         'method',
+//         form_json._actions.put.method
+//       );
+
+      for (i = 0; i < value_list.length; i += 1) {
+        if ((value_list[i].type === 'ListField') ||
+            (value_list[i].type === 'ParallelListField') ||
+            (value_list[i].type === 'MultiListField')) {
+          tmp = '../erp5_list_field/index.html';
+        } else if (value_list[i].type === 'ListBox') {
+          tmp = '../erp5_listbox/index.html';
+        } else {
+          tmp = '../erp5_string_field/index.html';
+        }
+        result_list.push(
+          RSVP.Queue()
+            .push(declareGadget(tmp,
+                final_element.getElementsByTagName("label")[i].parentNode,
+                value_list[i].key))
+            .push(generateSetStringFieldContent(i, tmp, value_list[i].key))
+        );
+      }
+      // XXX Put a submit button
+//       result_list.push(function () {
+      if (rendered_form._actions.put !== undefined) {
+        result_list.push(RSVP.Queue()
+          .push(function () {
+            return form_gadget.declareGadget(
+              '../erp5_button_field/index.html',
+              {
+//                 sandbox: 'iframe',
+                element: final_element
+              }
+            );
+          })
+          .push(function (button_gadget) {
+            form_gadget.private_gadget_list.push(button_gadget);
+//             return final_element.insertBefore(
+//               button_gadget.element,
+//               final_element.firstChild
+//             );
+          })
+          );
+      }
+
+      return RSVP.Queue()
+        .push(function () {
+          return RSVP.all(result_list);
+        })
+        .push(function () {
+          var parent_element =
+            form_gadget.element.getElementsByTagName('form')[0];
+          while (parent_element.firstChild) {
+            parent_element.removeChild(parent_element.firstChild);
+          }
+          parent_element.appendChild(final_element);
+
+//           return form_gadget.listenFormSubmit();
+
+//           return form_gadget.listen();
+//         })
+//         .push(undefined, function (error) {
+//           console.error(error);
+//           throw error;
+        });
+//     })
+// 
+//     .declareListener('listenFormSubmit', function () {
+//       var form_gadget = this;
+// 
+//       function formSubmit() {
+//         var k,
+//           field_gadget,
+//           count = form_gadget.private_gadget_list.length,
+//           // data = new FormData(),
+//           data = {"_id": "XXX"},
+//           queue = new RSVP.Queue();
+// 
+//         function extendData(field_data) {
+//           var key;
+//           for (key in field_data) {
+//             if (field_data.hasOwnProperty(key)) {
+//               data[key] = field_data[key];
+//             }
+//           }
+//         }
+// 
+//         function postForm() {
+//           return form_gadget.trigger("XXX", data);
+// //           return jio_storage.put(data, {"_view": "XXX"});
+//         }
+// 
+// 
+// //           return jio_storage.put(
+// //             form_gadget.element.getElementsByTagName('form')[0].action,
+// //             form_gadget.element.getElementsByTagName('form')[0].method,
+// //             {'data': data}
+// //           );
+// //         }
+// 
+// //         function handleResponse(response) {
+// //           if (response.status === 201) {
+// //             // XXX
+// //             // window.couscous_app.redirect(
+// //             window.location.href =
+// //               window.couscous_app.url_for(
+// //                 "erp5_doc",
+// //                 "GET",
+// //                 {url: response.getResponseHeader('Location')}
+// //               );
+// //     //         );
+// //           }
+// //         }
+// 
+//         for (k = 0; k < count; k += 1) {
+//           field_gadget = form_gadget.private_gadget_list[k];
+//           // XXX Hack until better defined
+//           if (field_gadget.getContent !== undefined) {
+//             queue
+//               .push(field_gadget.getContent.bind(field_gadget))
+//               .push(extendData);
+//           }
+//         }
+//         return queue.push(postForm);
+// //         return queue.push(postForm).push(handleResponse);
+//       }
+// 
+//       // XXX Listen to form submit
+//       return loopEventListener(
+//         form_gadget.element.getElementsByTagName('form')[0],
+//         'submit',
+//         false,
+//         formSubmit
+//       );
+
+    });
+
+
+}(rJS));

src/erp5_form/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>ERP5 Form</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="erp5form.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <!-- XXX action, method, fieldset -->
+    <form></form>
+  </body>
+</html>

src/erp5_list_field/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Listfield</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="listfield.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <select />
+  </body>
+</html>

src/erp5_list_field/listfield.js

+/*global window, rJS, console, RSVP */
+(function (rJS, window) {
+  "use strict";
+
+  rJS(window)
+    .ready(function (g) {
+      return new RSVP.Queue()
+        .push(function () {
+          return g.getElement();
+        })
+        .push(function (element) {
+          g.element = element;
+        });
+    })
+    .declareMethod('render', function (options) {
+      var select = this.element.getElementsByTagName('select')[0],
+        i,
+        field_json = options.field_json,
+        tmp = '';
+      select.setAttribute('name', field_json.key);
+      // XXX Escape the properties
+      for (i = 0; i < field_json.items.length; i += 1) {
+
+        if (field_json.items[i][1] === field_json.default[0]) {
+          tmp += "<option selected='selected' value='" +
+                   field_json.items[i][1] + "'>"
+                   + field_json.items[i][0] + "</option>";
+        } else {
+          tmp += "<option value='" + field_json.items[i][1] + "'>"
+            + field_json.items[i][0] + "</option>";
+        }
+      }
+      select.innerHTML += tmp;
+    });
+
+}(rJS, window));

src/erp5_listbox/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <!-- XXX hardcoded -->
+    <title>Listbox</title>
+
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="listbox.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <!-- XXX action, method, fieldset -->
+    <table>
+      <thead>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
+  </body>
+</html>

src/erp5_listbox/listbox.js

+/*global window, rJS, document, RSVP, URI, console */
+/*jslint maxlen:120, nomen: true */
+(function (rJS, document, RSVP, window, URI) {
+  "use strict";
+
+  rJS(window)
+    .ready(function (g) {
+      return new RSVP.Queue()
+        .push(function () {
+          return g.getElement();
+        })
+        .push(function (element) {
+          g.element = element;
+        });
+    })
+    .declareAcquiredMethod("pleaseAllDocsXXX", "pleaseAllDocsXXX")
+    .declareAcquiredMethod("whoWantToDisplayThis", "whoWantToDisplayThis")
+    //////////////////////////////////////////////
+    // initialize the gadget content
+    //////////////////////////////////////////////
+    .declareMethod('render', function (options) {
+      var gadget = this,
+        table = gadget.element.getElementsByTagName('table')[0],
+        field_json = options.field_json,
+        i,
+        url_param = {},
+        begin_from = parseInt(options.begin_from, 10) || 0,
+        tmp_element_1,
+        tmp_element_2,
+        tmp_element_3,
+        select_list = [];
+      console.log("LISTBOX");
+      console.log(options);
+      for (i = 0; i < field_json.column_list.length; i += 1) {
+        select_list.push(field_json.column_list[i][0]);
+      }
+
+      gadget.field_json = field_json;
+
+      // Drop the table content
+      while (table.firstChild) {
+        table.removeChild(table.firstChild);
+      }
+      tmp_element_1 = document.createElement("thead");
+      table.appendChild(tmp_element_1);
+      tmp_element_2 = document.createElement("tr");
+      tmp_element_1.appendChild(tmp_element_2);
+
+      for (i = 0; i < field_json.column_list.length; i += 1) {
+        tmp_element_3 = document.createElement("th");
+        tmp_element_3.textContent = field_json.column_list[i][1];
+        tmp_element_2.appendChild(tmp_element_3);
+      }
+
+      tmp_element_1 = document.createElement("tbody");
+      table.appendChild(tmp_element_1);
+      return gadget.pleaseAllDocsXXX({
+        "query": new URI(field_json.query).query(true).query,
+        "limit": [begin_from, begin_from + field_json.lines + 1],
+        "select_list": select_list
+      }).then(function (result) {
+        var promise_list = [result];
+
+        for (i = 0; i < (result.data.rows.length - 1); i += 1) {
+          promise_list.push(
+            gadget.whoWantToDisplayThis(result.data.rows[i].id)
+          );
+        }
+        return RSVP.all(promise_list);
+
+      }).then(function (result_list) {
+//         console.log(result);
+        var j,
+          tmp,
+          result = result_list[0],
+          tmp_url;
+
+        tmp_element_1 = gadget.element.getElementsByTagName("tbody")[0];
+
+        for (i = 0; i < (result.data.rows.length - 1); i += 1) {
+          tmp_element_2 = document.createElement("tr");
+          tmp_element_1.appendChild(tmp_element_2);
+// tmp_url = "#/f/" + encodeURIComponent(result.data.rows[i].id) + "/view";
+          tmp_url = result_list[i + 1];
+
+          tmp = "";
+          for (j = 0; j < gadget.field_json.column_list.length; j += 1) {
+            tmp += "<th><a href='" + tmp_url + "'>" +
+              (result.data.rows[i].value[gadget.field_json.column_list[j][0]] || "") +
+              "</a></th> ";
+          }
+          tmp_element_2.innerHTML = tmp;
+        }
+
+        if (result.data.rows.length > field_json.lines) {
+          url_param.begin_from = begin_from + field_json.lines;
+        }
+//         return gadget.acquire("generateMyUrlXXX", url_param);
+        console.log(url_param);
+        return RSVP.all([
+          gadget.aq_pleasePublishMyState({}),
+          gadget.aq_pleasePublishMyState(url_param)
+        ]);
+//         return gadget.acquire("generateMyUrlXXX", url_param);
+//                               [{jio_key: param_list[0]}]);
+      }).then(function (lala) {
+        console.log(lala);
+        if (begin_from !== 0) {
+          tmp_element_1.innerHTML += "<a href='" + lala[0] +
+                                     "'>Start</a> ";
+        }
+        tmp_element_1.innerHTML += "<a href='" + lala[1] +
+                                   "'>Next page!</a>";
+// if (result.data.rows.length > field_json.lines) {
+//   tmp_element_1.innerHTML += "<a href='#begin_from=56'>Next page!</a>";
+//         window.location = "http://www.free.fr";
+// }
+      });
+    });
+
+
+}(rJS, document, RSVP, window, URI));

src/erp5_string_field/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Stringfield</title>
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="stringfield.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+    <input type='text' data-mini="true" />
+  </body>
+</html>

src/erp5_string_field/stringfield.js

+/*global window, rJS, console, RSVP */
+(function (rJS) {
+  "use strict";
+
+  rJS(window)
+    .ready(function (gadget) {
+      return new RSVP.Queue()
+        .push(function () {
+          return gadget.getElement();
+        })
+        .push(function (element) {
+          gadget.element = element;
+        });
+    })
+    .declareMethod('render', function (options) {
+      var input = this.element.getElementsByTagName('input')[0],
+        field_json = options.field_json || {};
+      input.value = field_json.default || "";
+      input.setAttribute('name', field_json.key);
+//       input.setAttribute('id', field_json.key);
+    })
+
+    .declareMethod('getContent', function () {
+      var input = this.element.getElementsByTagName('input')[0],
+        result = {};
+      result[input.getAttribute('name')] = input.value;
+      return result;
+    });
+
+}(rJS));

src/jio_bridge/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <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="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="jiogadget.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

src/jio_bridge/jiogadget.js

+/*global rJS, jIO, console */
+(function (rJS, jIO) {
+  "use strict";
+
+  rJS(window)
+
+    .ready(function (gadget) {
+      // Initialize the gadget local parameters
+      gadget.state_parameter_dict = {};
+      gadget.state_parameter_dict.jio_storage = jIO.createJIO({
+        "type": "localstorage"
+      });
+//     })
+// 
+//     .declareMethod('render', function () {
+//       var gadget = this;
+//       // Create the Jio storage only the first time
+//       if (!gadget.state_parameter_dict.hasOwnProperty("jio_storage")) {
+//       }
+    })
+    .declareMethod('allDocs', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      console.log("allDocs");
+      return storage.allDocs.apply(storage, arguments);
+    })
+    .declareMethod('get', function () {
+      var storage = this.state_parameter_dict.jio_storage;
+      console.log("get");
+      return storage.get.apply(storage, arguments);
+    });
+
+//     return jio_storage.allDocs({"query": '__root__'})
+//         // XXX How to get root information?
+//         return jio_storage.get({"_id": undefined});
+//                 return jio_storage.get(
+//                   {"_id": options.jio_key},
+//                   {"_view": options.action_view}
+//                 );
+//                   jio_storage.get(
+//                     {"_id": uri.segment(2)},
+//                     {"_view": options.action_view}
+//                   )
+// 
+//       window.jio_storage = jio_storage;
+
+}(rJS, jIO));

src/twin_erp5/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Dual erp5</title>
+    <link rel="stylesheet" href="superindex.css">
+
+    <!-- renderjs -->
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+
+    <script src="superindex.js" type="text/javascript"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

src/twin_erp5/superindex.js

+/*global rJS, RSVP */
+(function (rJS, RSVP) {
+  "use strict";
+
+  var ERP5_GADGET = "../erp5/index.html";
+
+  function keepReferenceToTheGadgetElement(gadget) {
+    // Keep reference to the gadget element
+    return new RSVP.Queue()
+      .push(function () {
+        return gadget.getElement();
+      })
+      .push(function (element) {
+        gadget.element = element;
+      });
+  }
+
+  function getCachedGadgetOrLoad(gadget, scope) {
+    return gadget.getDeclaredGadget(scope)
+      .fail(function () {
+        return gadget.declareGadget(ERP5_GADGET, {
+          scope: scope,
+          element: gadget.element,
+          sandbox: "iframe"
+        });
+      });
+  }
+
+  rJS(window)
+    .ready(keepReferenceToTheGadgetElement)
+    .ready(function (g) {
+      g.render();
+    })
+
+    .declareMethod('render', function (options) {
+      // Display 2 erp5 gadget side by side
+      var gadget = this;
+      return RSVP.Queue()
+        .push(function () {
+          return RSVP.all([
+            getCachedGadgetOrLoad(gadget, "erp5_1"),
+            getCachedGadgetOrLoad(gadget, "erp5_2")
+//             getCachedGadgetOrLoad(gadget, "erp5_3")
+          ]);
+        })
+        .push(function (gadget_list) {
+          gadget.state_parameter_dict = options;
+          return RSVP.all([
+            gadget_list[0].render(options.erp5_1 || {}),
+            gadget_list[1].render(options.erp5_2 || {})
+//             gadget_list[2].render(options.erp5_3 || {})
+          ]);
+        });
+    });
+}(rJS, RSVP));

src/twin_erp5/superindex.less

+iframe {
+  width: 800px;
+  height: 900px;
+//   width: 450px;
+//   height: 600px;
+  float: left;
+}