Use declarative gadget instanciation.

Do manually build the HTML as string.

src/erp5/erp5.less

@@ -59,9 +59,13 @@ table {
 form .left, form .right, .center, .bottom {
    display: inline-block;
    vertical-align: top;
+   margin: 1em;
+}
+.center, .bottom {
+   display: block;
 }
 .left, .right {
-   width: 48%;
+   width: 46%;
 }
 
 iframe {

src/erp5/gadget_index_url.js

@@ -3,20 +3,6 @@
 (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
   /////////////////////////////////////////////////////////////////
@@ -29,88 +15,96 @@
   // 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
+    /////////////////////////////////////////////////////////////////
+    // Configure jIO to use localstorage
+    // And load configuration from server
     .ready(function (g) {
-      g.render();
+      return g.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
+          return jio_gadget.createJio({
+            type: "erp5",
+            url: "http://192.168.242.62:12002/erp5/web_site_module/hateoas"
+          });
+        });
     })
+
+    /////////////////////////////////////////////////////////////////
+    // handle acquisition
+    /////////////////////////////////////////////////////////////////
     .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
+    // Bridge to jio gadget
+    .allowPublicAcquisition("jio_allDocs", function (param_list) {
+      return this.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
+          return jio_gadget.allDocs.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_ajax", function (param_list) {
+      return this.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
+          return jio_gadget.ajax.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_post", function (param_list) {
+      return this.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
+          return jio_gadget.post.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_remove", function (param_list) {
+      return this.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
+          return jio_gadget.remove.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_get", function (param_list) {
+      return this.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
+          return jio_gadget.get.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_putAttachment", function (param_list) {
+      return this.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
+          return jio_gadget.putAttachment.apply(jio_gadget, param_list);
+        });
+    })
+    .allowPublicAcquisition("jio_getAttachment", function (param_list) {
+      return this.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
+          return jio_gadget.getAttachment.apply(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]});
+    })
 
+    /////////////////////////////////////////////////////////////////
+    // declared methods
+    /////////////////////////////////////////////////////////////////
+    // Render the page
     .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 () {
+//       $.mobile.loading('show');
+      if (options.jio_key === undefined) {
+        // Redirect to the default view
+        return gadget.aq_pleasePublishMyState({jio_key: "person_module"})
+          .push(gadget.pleaseRedirectMyHash.bind(gadget));
+      }
+      return gadget.getDeclaredGadget("jio_gadget")
+        .push(function (jio_gadget) {
           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}
-          );
+          return jio_gadget.get({"_id": jio_key}, {"_view": view});
         })
         .push(function (result) {
           var uri = new URI(
@@ -122,11 +116,13 @@
 //           }
           return RSVP.all([
             result,
-            // XXX
-            gadget.sub_gadget_dict.jio_gadget.get(
-              {"_id": uri.segment(2)},
-              {"_view": "view"}
-            )
+            gadget.getDeclaredGadget("jio_gadget")
+              .push(function (jio_gadget) {
+                return jio_gadget.get(
+                  {"_id": uri.segment(2)},
+                  {"_view": "view"}
+                );
+              })
           ]);
         })
         .push(function (result) {
@@ -134,30 +130,28 @@
           sub_options.erp5_document = result[0].data;
           sub_options.form_definition = result[1].data;
 
-          return gadget.sub_gadget_dict.form_gadget.render(sub_options);
+          return gadget.getDeclaredGadget("form_gadget")
+            .push(function (form_gadget) {
+              return form_gadget.render(sub_options);
+            });
         })
         .push(function () {
-          // XXX JQuery mobile
-          $(gadget.sub_gadget_dict.form_gadget.element).trigger('create');
+          return gadget.getDeclaredGadget("form_gadget");
         })
+        .push(function (form_gadget) {
+          return form_gadget.getElement();
+        })
+//         .push(function (element) {
+//           // XXX JQuery mobile
+// //           $.mobile.loading('hide');
+// //           return $(element).trigger("create");
+//         })
         .push(undefined, function (error) {
-          if (error instanceof StopRenderingError) {
-            return;
-          }
+          console.error(error);
+          console.error(error.stack);
+          $.mobile.loading('hide');
           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

@@ -36,8 +36,16 @@
     <!--a href="#rightpanel">Open panel</a-->
   </header>
 
-  <article id="mainarticle">
-  </article>
+  <article id="mainarticle"
+           data-gadget-url="../erp5_form/index.html"
+           data-gadget-scope="form_gadget"
+           data-gadget-sandbox="public"></article>
+
+  <aside>
+    <section data-gadget-url="../jio_bridge/index.html"
+             data-gadget-scope="jio_gadget"
+             data-gadget-sandbox="public"></section>
+  </aside>
 
   </body>
 </html>

src/erp5_form/erp5form.js

+/*global rJS, RSVP, jQuery, Handlebars,
+  promiseEventListener, console */
+/*jslint nomen: true */
 /*global window, rJS, RSVP, StatelessJS, alert, FormData, document, console */
-/*jslint maxlen:80, nomen: true */
-(function (rJS) {
+/*jslint maxlen:200, nomen: true */
+(function (window, rJS, RSVP, $, promiseEventListener) {
   "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 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 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)
 
-  function clearPreviousGadgetList(form_gadget, element) {
-    // Drop the previous gadget fields
-    form_gadget.private_gadget_list = [];
-  }
+  /////////////////////////////////////////////////////////////////
+  // Handlebars
+  /////////////////////////////////////////////////////////////////
+  // Precompile the templates while loading the first gadget instance
+  var gadget_klass = rJS(window);
 
-  rJS(window)
+  gadget_klass
+    /////////////////////////////////////////////////////////////////
+    // ready
+    /////////////////////////////////////////////////////////////////
+    // Init local properties
     .ready(function (g) {
-      g.private_gadget_list = [];
+      g.props = {};
     })
 
+    // Assign the element to a variable
     .ready(function (g) {
-      return new RSVP.Queue()
-        .push(function () {
-          return g.getElement();
-        })
+      return g.getElement()
         .push(function (element) {
-          g.element = element;
+          g.props.element = element;
         });
     })
 
-    .declareMethod('render', function (options) {
+    /////////////////////////////////////////////////////////////////
+    // declared methods
+    /////////////////////////////////////////////////////////////////
+    .declareMethod('render2', function (options) {
       console.log(options.form_definition);
       var i,
         erp5_document = options.erp5_document,
@@ -89,8 +105,6 @@
 
       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];
@@ -301,7 +315,102 @@
 //         formSubmit
 //       );
 
+    })
+
+    .declareMethod('render', function (options) {
+      var i,
+        erp5_document = options.erp5_document,
+        form_definition = options.form_definition,
+        rendered_form = erp5_document._embedded._view,
+        group_list = form_definition.group_list,
+        queue = new RSVP.Queue(),
+        form_gadget = this,
+        parent_element = document.createElement("div");
+
+      delete options.erp5_document;
+      delete options.form_definition;
+
+      options = options.form_gadget || {};
+      form_gadget.state_parameter_dict = options;
+
+      form_gadget.props.gadget_list = [];
+
+      function addGroup(group) {
+        queue
+          .push(function () {
+            var j,
+              fieldset_element = document.createElement("fieldset"),
+              group_queue = new RSVP.Queue();
+
+            function addField(field, scope) {
+              group_queue.push(function () {
+                if (rendered_form.hasOwnProperty(field[0])) {
+                  // Field is enabled in this context
+                  var field_queue = new RSVP.Queue(),
+                    field_url = '../erp5_string_field/index.html',
+                    field_element = document.createElement("div"),
+                    gadget_element = document.createElement("div"),
+                    label_element = document.createElement("label"),
+                    renderered_field = rendered_form[field[0]];
+
+//                   field_element.setAttribute('data-role', 'fieldcontain');
+                  label_element.setAttribute('for', renderered_field.key);
+                  label_element.textContent = renderered_field.title;
+                  field_element.appendChild(label_element);
+                  field_element.appendChild(gadget_element);
+                  fieldset_element.appendChild(field_element);
+
+                  if ((renderered_field.type === 'ListField') ||
+                      (renderered_field.type === 'ParallelListField') ||
+                      (renderered_field.type === 'MultiListField')) {
+                    field_url = '../erp5_list_field/index.html';
+                  } else if (renderered_field.type === 'ListBox') {
+                    field_url = '../erp5_listbox/index.html';
+                  }
+
+                  return field_queue
+                    .push(function () {
+                      return form_gadget.declareGadget(field_url, {
+                        scope: renderered_field.key,
+                        element: gadget_element
+                      });
+                    })
+                    .push(function (field_gadget) {
+                      form_gadget.props.gadget_list.push(field_gadget);
+                      var suboptions = options[renderered_field.key] || {};
+                      suboptions.field_json = renderered_field;
+                      return field_gadget.render(suboptions);
+                    });
+                }
+              });
+            }
+
+            fieldset_element.setAttribute("class", group[0]);
+            for (j = 0; j < group[1].length; j += 1) {
+              addField(group[1][j]);
+            }
+            return group_queue.push(function () {
+              parent_element.appendChild(fieldset_element);
+            });
+          });
+      }
+
+      for (i = 0; i < group_list.length; i += 1) {
+        addGroup(group_list[i]);
+      }
+
+      return queue
+        .push(function () {
+          var dom_element = form_gadget.props.element
+            .querySelector(".field_container");
+          while (dom_element.firstChild) {
+            dom_element.removeChild(dom_element.firstChild);
+          }
+          dom_element.appendChild(parent_element);
+          return $(parent_element).trigger("create");
+
+        });
     });
 
 
-}(rJS));
+}(window, rJS, RSVP, jQuery, promiseEventListener));

src/erp5_form/index.html

@@ -14,6 +14,11 @@
   </head>
   <body>
     <!-- XXX action, method, fieldset -->
-    <form></form>
+    <form class="save_form">
+      <button type="submit" class="ui-btn ui-btn-b ui-btn-inline
+        ui-icon-edit ui-btn-icon-right">Save</button>
+      <div class="field_container">
+      </div>
+    </form>
   </body>
 </html>

src/erp5_list_field/index.html

@@ -8,9 +8,18 @@
     <!-- renderjs -->
     <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
     <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.handlebars.relative_dest %>" type="text/javascript"></script>
     <!-- custom script -->
     <script src="listfield.js" type="text/javascript"></script>
 
+    <script id="option-template" type="text/x-handlebars-template">
+      <option value="{{value}}">{{text}}</option>
+    </script>
+
+    <script id="selected-option-template" type="text/x-handlebars-template">
+      <option selected="selected" value="{{value}}">{{text}}</option>
+    </script>
+
   </head>
   <body>
     <select />

src/erp5_list_field/listfield.js

-/*global window, rJS, console, RSVP */
-(function (rJS, window) {
+/*global window, rJS, Handlebars */
+/*jslint nomen: true */
+(function (window, rJS, Handlebars) {
   "use strict";
 
-  rJS(window)
+  /////////////////////////////////////////////////////////////////
+  // Handlebars
+  /////////////////////////////////////////////////////////////////
+  // Precompile the templates while loading the first gadget instance
+  var gadget_klass = rJS(window),
+    option_source = gadget_klass.__template_element
+                      .getElementById("option-template")
+                      .innerHTML,
+    option_template = Handlebars.compile(option_source),
+    selected_option_source = gadget_klass.__template_element
+                               .getElementById("option-template")
+                               .innerHTML,
+    selected_option_template = Handlebars.compile(selected_option_source);
+
+  gadget_klass
     .ready(function (g) {
-      return new RSVP.Queue()
-        .push(function () {
-          return g.getElement();
-        })
+      return g.getElement()
         .push(function (element) {
           g.element = element;
         });
@@ -15,22 +27,23 @@
     .declareMethod('render', function (options) {
       var select = this.element.getElementsByTagName('select')[0],
         i,
+        template,
         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>";
+          template = selected_option_template;
         } else {
-          tmp += "<option value='" + field_json.items[i][1] + "'>"
-            + field_json.items[i][0] + "</option>";
+          template = option_template;
         }
+        tmp += template({
+          value: field_json.items[i][1],
+          text: field_json.items[i][0]
+        });
       }
       select.innerHTML += tmp;
     });
 
-}(rJS, window));
+}(window, rJS, Handlebars));

src/erp5_listbox/index.html

@@ -3,7 +3,6 @@
   <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>
@@ -19,8 +18,6 @@
     <table>
       <thead>
       </thead>
-      <tbody>
-      </tbody>
     </table>
   </body>
 </html>

src/erp5_listbox/listbox.js

@@ -4,61 +4,70 @@
   "use strict";
 
   rJS(window)
+    /////////////////////////////////////////////////////////////////
+    // ready
+    /////////////////////////////////////////////////////////////////
+    // Init local properties
     .ready(function (g) {
-      return new RSVP.Queue()
-        .push(function () {
-          return g.getElement();
-        })
+      g.props = {};
+    })
+
+    // Assign the element to a variable
+    .ready(function (g) {
+      return g.getElement()
         .push(function (element) {
-          g.element = element;
+          g.props.element = element;
         });
     })
-    .declareAcquiredMethod("pleaseAllDocsXXX", "pleaseAllDocsXXX")
+
+    //////////////////////////////////////////////
+    // acquired method
+    //////////////////////////////////////////////
+    .declareAcquiredMethod("jio_allDocs", "jio_allDocs")
     .declareAcquiredMethod("whoWantToDisplayThis", "whoWantToDisplayThis")
     //////////////////////////////////////////////
     // initialize the gadget content
     //////////////////////////////////////////////
     .declareMethod('render', function (options) {
       var gadget = this,
-        table = gadget.element.getElementsByTagName('table')[0],
+        thead = gadget.props.element.querySelector('thead'),
         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]);
-      }
+        tr = document.createElement("tr"),
+        th,
+        i;
 
-      gadget.field_json = field_json;
+      gadget.props.field_json = field_json;
+      gadget.props.begin_from = parseInt(options.begin_from, 10) || 0;
 
-      // Drop the table content
-      while (table.firstChild) {
-        table.removeChild(table.firstChild);
+      for (i = 0; i < field_json.column_list.length; i += 1) {
+        th = document.createElement("th");
+        th.textContent = field_json.column_list[i][1];
+        tr.appendChild(th);
       }
-      tmp_element_1 = document.createElement("thead");
-      table.appendChild(tmp_element_1);
-      tmp_element_2 = document.createElement("tr");
-      tmp_element_1.appendChild(tmp_element_2);
+      thead.appendChild(tr);
+    })
+
+    //////////////////////////////////////////////
+    // render the listbox in an asynchronous way
+    //////////////////////////////////////////////
+    .declareService(function () {
+      var gadget = this,
+        field_json = gadget.props.field_json,
+        begin_from = gadget.props.begin_from,
+        table = gadget.props.element.querySelector('table'),
+        tbody = document.createElement("tbody"),
+        select_list = [],
+        i;
 
       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);
+        select_list.push(field_json.column_list[i][0]);
       }
 
-      tmp_element_1 = document.createElement("tbody");
-      table.appendChild(tmp_element_1);
-      return gadget.pleaseAllDocsXXX({
+      return gadget.jio_allDocs({
         "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) {
+      }).push(function (result) {
         var promise_list = [result];
 
         for (i = 0; i < (result.data.rows.length - 1); i += 1) {
@@ -68,49 +77,50 @@
         }
         return RSVP.all(promise_list);
 
-      }).then(function (result_list) {
-//         console.log(result);
+      }).push(function (result_list) {
         var j,
-          tmp,
+          tr,
+          th,
+          a,
           result = result_list[0],
+          url_param = {},
           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);
+          tr = document.createElement("tr");
 // 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> ";
+          for (j = 0; j < field_json.column_list.length; j += 1) {
+            th = document.createElement("th");
+            a = document.createElement("a");
+            a.href = tmp_url;
+            a.textContent = (result.data.rows[i]
+                .value[field_json.column_list[j][0]] || "");
+            th.appendChild(a);
+            tr.appendChild(th);
           }
-          tmp_element_2.innerHTML = tmp;
+          tbody.appendChild(tr);
         }
 
         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>";
+      }).push(function () {
+//         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>";
+        table.appendChild(tbody);
 // 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";
@@ -118,5 +128,4 @@
       });
     });
 
-
 }(rJS, document, RSVP, window, URI));

src/erp5_string_field/stringfield.js

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