use notifyChange and simplify demo

gadget_demo_json_schema_form.html

@@ -4,12 +4,11 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>OfficeJS jIO DAV Configurator Page</title>
+    <title>Demo UI for JSON Scheme form generator</title>
     <link rel="stylesheet" href="gadget_erp5_nojqm.css">
 
     <script src="rsvp.js"></script>
     <script src="renderjs.js"></script>
-    <script src="gadget_global.js"></script>
     <script src="gadget_demo_json_schema_form.js"></script>
   </head>
 
@@ -22,20 +21,11 @@
           </h3>
         </section>
         <br>
-        <button type="submit" class="ui-btn ui-btn-b ui-btn-inline
-        ui-icon-edit ui-btn-icon-right ui-screen-hidden"></button>
+        <div class="ui-body-c">
+        </div>
         <div class="field_container">
           <div class="left">
-            <div class="ui-field-contain">
-              <label for="json_schema">Json Schema</label>
-              <textarea name="field_" id="json_schema" title="Json Schema"></textarea>
-            </div>
-          </div>
-          <div class="right">
             <form class="save_form ui-body-c" novalidate>
-              <button type="submit" class="ui-btn ui-icon-edit
-           ui-btn-icon-right">Send Form
-              </button>
               <div class="ui-field-contain">
                 <div data-gadget-url="gadget_json_generated_form.html"
                      data-gadget-scope="form_view"
@@ -46,6 +36,8 @@
 
                 /slapos/software/erp5/instance-erp5-input-schema.json
                 </script>
+                  <!--/slapos/software/erp5/instance-erp5-input-schema.json-->
+                  <!--schema4.json-->
                   <!--schema7.json-->
                   <!--test/instance-erp5-input-schema.json-->
                   <!--https://github.com/SlapOS/slapos/blob/master/software/erp5/instance-erp5-output-schema.json-->
@@ -53,11 +45,14 @@
                   <!--sample_schema.json-->
                 </div>
               </div>
-              <button type="submit" class="ui-btn ui-icon-edit
-           ui-btn-icon-right">Send Form
-              </button>
             </form>
           </div>
+          <div class="right">
+            <div class="ui-field-contain">
+              <label for="json_document_content">Json Document</label>
+              <textarea name="json_document_content" id="json_document_content" title="Json Document"></textarea>
+            </div>
+          </div>
         </div>
       </div>
 

gadget_demo_json_schema_form.js

 /*jslint nomen: true, maxlen: 200, indent: 2*/
-/*global rJS, console, window, document, RSVP, loopEventListener*/
+/*global rJS, console, window, document, RSVP*/
 
-(function (window, document, rJS, loopEventListener) {
+(function (window, document, rJS) {
   "use strict";
 
   rJS(window)
@@ -64,53 +64,25 @@
     .allowPublicAcquisition("notifyInvalid", function () {
       return;
     })
+    .allowPublicAcquisition("notifyChange", function (arr, scope) {
+      if (scope === "form_view") {
+        return this.getDeclaredGadget("form_view")
+          .push(function (g) {
+            return g.getContent();
+          })
+          .push(function (ret) {
+            document.getElementById("json_document_content").textContent =
+              JSON.stringify(ret);
+          });
+      }
+      return;
+    })
     .onEvent("submit", function () {
       var g = this;
       return g.props.form_view.getContent()
         .push(function (data) {
           console.log(data);
         });
-    })
-    .declareService(function () {
-      var g = this;
-      return loopEventListener(
-        g.props.json_schema_element,
-        'focusin',
-        false,
-        function (evt) {
-          g.props.json_schema_element_active = true;
-        }
-      );
-    })
-    .declareService(function () {
-      var g = this;
-      return loopEventListener(
-        g.props.json_schema_element,
-        'focusout',
-        false,
-        function (evt) {
-          g.props.json_schema_element_active = false;
-        }
-      );
-    })
-    .declareService(function () {
-      var g = this;
-      return loopEventListener(
-        window,
-        'keyup',
-        false,
-        function (evt) {
-          if (g.props.json_schema_element_active) {
-            var e = g.props.json_schema_element;
-            try {
-              g.options.schema = e.value && JSON.parse(e.value);
-            } catch (e) {
-              console.error(e);
-            }
-            return g.props.form_view.render(g.options);
-          }
-        }
-      );
     });
 
-}(window, document, rJS, loopEventListener));
\ No newline at end of file
+}(window, document, rJS));
\ No newline at end of file

gadget_json_generated_form.js

@@ -365,6 +365,13 @@
       });
   }
 
+  function checkValidityAndNotifyChange(g) {
+    return RSVP.all([
+      g.checkValidity(),
+      g.notifyChange()
+    ]);
+  }
+
   function render_schema_selector(gadget, title, schema_arr, event, rerender) {
     return RSVP.Queue()
       .push(function () {
@@ -470,7 +477,7 @@
                           return event(schema_alternatives[value[scope]].value);
                         })
                         .push(function () {
-                          return gadget.checkValidity();
+                          return checkValidityAndNotifyChange(gadget);
                         })
                         .push(function () {
                           if (rerender) {
@@ -516,7 +523,7 @@
                 event: function () {
                   return event(schema_alternatives[0].value)
                     .push(function () {
-                      return gadget.checkValidity();
+                      return checkValidityAndNotifyChange(gadget);
                     });
                 }
               });
@@ -1085,6 +1092,7 @@
       g.props = {};
       g.options = {};
     })
+    .declareAcquiredMethod("notifyChange", "notifyChange")
     .declareAcquiredMethod("renameChildrenParent", "renameChildren")
     .allowPublicAcquisition("renameChildren", function (opt_arr, scope) {
       var property_name,
@@ -1143,7 +1151,7 @@
           tasks.push(g.props.add_custom_data[key].rerender());
         }
       }
-      tasks.push(g.checkValidity());
+      tasks.push(checkValidityAndNotifyChange(g));
       return RSVP.Queue()
         .push(function () {
           return RSVP.all(tasks);
@@ -1304,9 +1312,10 @@
         opt = arr[0],
         event_object;
       event_object = g.props.add_custom_data[sub_scope];
-      if (opt.type === "change" && event_object) {
+      if (event_object && opt.type === "change") {
         return event_object.event();
       }
+      return g.notifyChange();
     })
     .declareMethod('renderForm', function (options) {
       var g = this,
@@ -1464,7 +1473,7 @@
         i;
       for (i = 0; i < field_list.length; i = i + 1) {
         if (evt.target === field_list[i]) {
-          return this.checkValidity();
+          return checkValidityAndNotifyChange(this);
         }
       }
     })