Changeset 1927 for trunk

Timestamp:

2011-08-09 09:52:26 (10 months ago)

Author:

mpo

Message:

introducing a value-cache on container-controls
improves read-performance at the cost of some cache and invalidation management

gain in tests rather limited however: use cases should have far more reads then writes to benefit.

Location:

trunk

Files:

• modules/kauri-forms/kauri-forms-framework/src/main/kauri/static-{build}.key/kauri.forms/control.js (modified) (10 diffs)
• modules/kauri-forms/kauri-forms-framework/src/test/kauri.forms/test-collection.js (modified) (2 diffs)
• modules/kauri-forms/kauri-forms-framework/src/test/kauri.forms/test-form.js (modified) (1 diff)
• samples/kauri-forms-sample/src/main/kauri/pages/collection-performance.html.xml (modified) (5 diffs)

trunk/modules/kauri-forms/kauri-forms-framework/src/main/kauri/static-{build}.key/kauri.forms/control.js

@@ -2097 +2097 @@
     }
     
+    
     $.inherit(AbstractContainerControl, Control);
     
@@ -2122 +2123 @@
     };
     
+    var CLEAR = {};
+    AbstractContainerControl.prototype.invalidateValueCache = function() {
+        this.value = CLEAR;
+        this.cachedWireValue = CLEAR;
+    };
 
     /** 
@@ -2225 +2231 @@
      */
     AbstractContainerControl.prototype.setLoop = function(fn, value, noValidation){
-        // ignore childUpdates
-        var restore = this.updateValue;
-        this.updateValue = function(childControl){
-        };
         
         var cfn = function(i, child) {
@@ -2234 +2236 @@
             fn(i, child, childValue, noValidation);
         };
-        this.internalSetLoop(cfn, value);
-        
-        // reset childUpdates
-        this.updateValue = restore;        
+        
+        var me = this;
+
+        this.silenceEventsWhile(function() { // ignore childUpdates
+            me.internalSetLoop(cfn, value);
+        });
+        
         // call childUpdates
         this.updateValue(noValidation);
@@ -2283 +2288 @@
      */
     AbstractContainerControl.prototype.getValue = function(){
-        return this.getLoop(AbstractContainerControl.childGetter);
+        if (this.value == CLEAR){
+            this.value = this.getLoop(AbstractContainerControl.childGetter);
+        }
+        return this.value;
     };
     AbstractContainerControl.childGetter = function(i, child) {
@@ -2307 +2315 @@
      */
     AbstractContainerControl.prototype.getWireValue = function(){
-        var w = this.getLoop(AbstractContainerControl.childWireGetter);  
-        return this.getType().toWireValue(w); // allow composite-type specific formatting (merge)
+        if (this.cachedWireValue == CLEAR) {
+            var w = this.getLoop(AbstractContainerControl.childWireGetter);  
+            this.cachedWireValue = this.getType().toWireValue(w); // allow composite-type specific formatting (merge)
+        }
+        return this.cachedWireValue;
     };
     AbstractContainerControl.childWireGetter = function(i, child) {
@@ -2341 +2352 @@
             Control.reset(me);
         }
+        me.invalidateValueCache();
     };
     
@@ -2639 +2651 @@
         
         childControl.valueChanged(childChanged);
-        
+
         return childControl;
     }
@@ -2651 +2663 @@
     
         this._children[id] = childControl;
-    }
-
-     /**
-      * Deletes a child control in the list of this controls children
-      * @param {String} id
-      */
-     AbstractContainerControl.prototype.deleteChild = function(id){
+        this.updateValue(true, true); // be sure to handle change in value structure
+    }
+
+    /**
+     * Deletes a child control in the list of this controls children
+     * @param {String} id
+     */
+    AbstractContainerControl.prototype.deleteChild = function(id){
      
-         delete this._children[id];
-     }
+        delete this._children[id];
+        this.updateValue(true, true); // be sure to handle change in value structure
+    }
 
      
@@ -2666 +2680 @@
      * Runs validation on this control and acknowledges a change in value
      * @param {Boolean} noValidation perform validation or not
-     */
-    AbstractContainerControl.prototype.updateValue = function(noValidation){
-        var value = this.getValue();
-        var nvalue = this.normaliseValue(value);
-        if (!$.valueCompare(value, nvalue)) { // validation & update event only needed if there are actual changes to the normalised valued
-            var restore = this.updateValue;
-            this.updateValue = function(noValidation) {}
-            this.setNormalisedValue(nvalue);
-            this.updateValue = restore;
-        }
-        if(!noValidation) {
-            this.newValidation(this.getValue(), this.getWireValue());
-        }
-        this.valueChanged();
+     * @param {Boolean} noValueAccess avoid accessing the value, just clear cache and notify parent
+     */
+    AbstractContainerControl.prototype.updateValue = function(noValidation, noValueAccess){
+        noValueAccess = noValueAccess || false;
+        this.invalidateValueCache(); // be sure to read children again
+        if (!noValueAccess) {
+            var value = this.getValue();
+            var nvalue = this.normaliseValue(value);
+            if (!$.valueCompare(value, nvalue)) { // validation & update event only needed if there are actual changes to the normalised valued
+                var me = this;
+                this.silenceEventsWhile(function() {
+                    me.setNormalisedValue(nvalue);
+                });
+            }
+            if(!noValidation) {
+                this.newValidation(this.getValue(), this.getWireValue());
+            }
+        }
+        this.valueChanged();         // and notify parent
      }
+     
+    /**
+     * 
+     */
+    AbstractContainerControl.prototype.silenceEventsWhile = function(action) {
+        var restoreUpdateFn = this.updateValue;
+        this.updateValue = function(noValidation) {};
+        
+        action();
+        
+        this.updateValue = restoreUpdateFn;
+    }  
     
     /**

trunk/modules/kauri-forms/kauri-forms-framework/src/test/kauri.forms/test-collection.js

@@ -179 +179 @@
     
     // test
-    expect(10);
+    expect(11);
 
     // verify creation of control
@@ -207 +207 @@
     equal(c.getElement("messages").html(), $("<p>Length not in range 3 &#x2a7d; Length &#x2a7e; 6.</p>").html(), "validation error set correctly");
     
-    c.addChild().getElement("input").val(okValue + "4").change();
-    equal(changes, 4, "change detection");
+    var newRow = c.addChild();
+    equal(changes, 4, "change detection"); // NOTE: both addchild and the actual value change will trigger an update!
+    newRow.getElement("input").val(okValue + "4").change();
+    equal(changes, 5, "change detection"); 
 
     equal(c.getElement("messages").html(), "", "validation error cleared");

trunk/modules/kauri-forms/kauri-forms-framework/src/test/kauri.forms/test-form.js

@@ -711 +711 @@
     expect(5);
     
-    ok($.valueCompare(form.getValue(), {td: "s"}), "checking expected initial value.");
+    deepEqual(form.getValue(), {td: "s"}, "checking expected initial value.");
     var tds = form.findControl("tds"); 
     tds.getChildByIndex(1); // force creation of children...
     
-    ok($.valueCompare(form.getValue(), {td: "s", tds: ["s", "s"]}), "checking expected initial values inside the collection as well.");
+    deepEqual(form.getValue(), {td: "s", tds: ["s", "s"]}, "checking expected initial values inside the collection as well.");
     form.delegate("testDelegate", "x");
-    ok($.valueCompare(form.getValue(), {td: "sx", tds: ["sx", "sx"]}), "checking all modified.");
+    deepEqual(form.getValue(), {td: "sx", tds: ["sx", "sx"]}, "checking all modified.");
     form.findControl("tds").delegate("testDelegate", "x");
-    ok($.valueCompare(form.getValue(), {td: "sx", tds: ["sxx", "sxx"]}), "checking all modified in collection.");
+    deepEqual(form.getValue(), {td: "sx", tds: ["sxx", "sxx"]}, "checking all modified in collection.");
     form.findControl("tds/1").delegate("testDelegate", "x");
-    ok($.valueCompare(form.getValue(), {td: "sx", tds: ["sxx", "sxxx"]}), "checking single modified.");
+    deepEqual(form.getValue(), {td: "sx", tds: ["sxx", "sxxx"]}, "checking single modified.");
     
     

trunk/samples/kauri-forms-sample/src/main/kauri/pages/collection-performance.html.xml

@@ -12 +12 @@
       var days = ["mo", "tu", "we", "th", "fr", "sa", "su"];
       
-      function getData() {
+      function getData(size) {
           var data = {
               "performances": [
@@ -18 +18 @@
           }
     
-          for (var i = 0; i < 5; i++) {
+          for (var i = 0; i < size; i++) {
             data.performances[i] = { "task": "Task " + i};
             for (var j = 0; j < days.length; j++) {
@@ -30 +30 @@
       $(function() {
           var form1 = new $.org.kauriproject.forms.Form("form1", {});
+          
+          var doTimed = function(fn) {
+              var t0 = (new Date()).getTime();
+              fn();
+              return (new Date()).getTime() - t0;
+          }
 
           $("#loadWireSampleData").click(function() {
-              form1.setWireValue(getData());              
+              var data = getData($("#size").val());
+              var dt = doTimed(function() {
+                  form1.setWireValue(data);
+              });
+              $("#timing").text(dt);
           });
 
-          $("#loadWireSampleData100").click(function() {
+          $("#loadWireSampleDataRepeat").click(function() {
               var intervalHandle;
-              var tcount = 100;
+              var tcount = $("#repeats").val();
               var t = function() {
                   $("#countdown").text(tcount);
@@ -50 +60 @@
 
           $("#loadNativeSampleData").click(function() {
-              form1.setValue(getData());              
+              var data = getData($("#size").val());
+              var dt = doTimed(function() {
+                  form1.setValue(getData($("#size").val()));              
+              });
+              $("#timing2").text(dt);
           });
 
-          $("#loadNativeSampleData100").click(function() {
-              debugger;
+          $("#loadNativeSampleDataRepeat").click(function() {
               var intervalHandle;
-              var tcount = 100;
+              var tcount = $("#repeats").val();
               var t = function() {
                   $("#countdown2").text(tcount);
@@ -96 +109 @@
     <p>Press the load sample data button below to test.</p>
 
-    <p><button id="loadWireSampleData">Load sample data via setWireValue()</button></p>
-
-    <p><button id="loadWireSampleData100">100 times Load sample data via setWireValue()</button></p>
-    <div id="countdown"/>
-
-    <p><button id="loadNativeSampleData">Load sample data via setValue()</button></p>
-
-    <p><button id="loadNativeSampleData100">100 times Load sample data via setValue()</button></p>
-    <div id="countdown2"/>
+    <p>Load Sample Data:
+    <table style="width: auto; border: 1px solid black;">
+      <tbody>
+        <tr>
+          <td>containing <input id="size" value="5" size="3"/> rows</td>
+          <td><button id="loadWireSampleData">via setWireValue()</button> <span id="timing">0</span> ms</td>
+          <td><button id="loadNativeSampleData">via setValue()</button> <span id="timing2">0</span> ms</td>
+        </tr>
+        <tr>
+          <td>and repeat that <input id="repeats" value="100" size="3"/> times</td>
+          <td><button id="loadWireSampleDataRepeat">via setWireValue()</button>&#160;<span id="countdown">0</span></td>
+          <td><button id="loadNativeSampleDataRepeat">via setValue()</button>&#160;<span id="countdown2">0</span></td>
+        </tr>
+      </tbody>
+    </table>    
+    </p>
 
     <p><button id="addEmptyRows">Add 30 empty rows</button></p>