@qooxdoo/framework 7.9.2 → 8.0.0-beta.2

package/source/class/qx/data/binding/AbstractSegment.js

@@ -0,0 +1,197 @@
+/* ************************************************************************
+
+   qooxdoo - the new era of web development
+
+   http://qooxdoo.org
+
+   Copyright:
+     2022-2023 Zenesis Limited, https://www.zenesis.com
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+   * Patryk Malinowski (https://github.com/patryk-m-malinowski, pmalinowski116@gmail.com)
+
+************************************************************************ */
+
+/**
+ * Base class for segments in a data binding path.
+ * Each segment dereferences a part of the property chain, such as a property name or an array index.
+ *
+ */
+qx.Class.define("qx.data.binding.AbstractSegment", {
+  type: "abstract",
+  extend: qx.core.Object,
+  implement: [qx.data.binding.IInputReceiver],
+
+  /**
+   *
+   * @param {qx.data.SingleValueBinding} binding The binding that this segment belongs to.
+   */
+  construct(binding) {
+    super();
+    this.__binding = binding;
+  },
+
+  properties: {
+    /**
+     * Name of the event that this segment listens to on the input.
+     */
+    eventName: {
+      init: null,
+      nullable: true,
+      check: "String",
+      event: "changeEventName"
+    }
+  },
+
+  /**
+   * Fired when this segment's input changed, and it has been received and fully processed by the next segments in the chain,
+   * i.e. any async set/get operations have completed.
+   */
+  events: {
+    changeInput: "qx.event.type.Data"
+  },
+
+  members: {
+    /**
+     * @type {qx.data.SingleValueBinding}
+     */
+    __binding: null,
+    /**
+     * @type {qx.core.Object}
+     */
+    __input: undefined,
+
+    /**
+     * @type {qx.data.binding.IInputReceiver}
+     */
+    __outputReceiver: null,
+
+    /**
+     *
+     * @returns {qx.data.SingleValueBinding} the binding that this segment belongs to. Useful for debugging purposes.
+     */
+    getBinding() {
+      return this.__binding;
+    },
+
+    /**
+     * Sets the object which will receive the output of this segment after it's computed.
+     * This is either another segment or the Binding object.
+     *
+     * The last segment in the target path has no output receiver because we don't care what
+     * the output value is.
+     * @param {qx.data.binding.IInputReceiver} segment
+     */
+    setOutputReceiver(segment) {
+      if (qx.core.Environment.get("qx.debug")) {
+        if (this.__outputReceiver) {
+          throw new Error("Output receiver already set");
+        }
+      }
+      this.__outputReceiver = segment;
+    },
+
+    /**
+     *
+     * @returns {qx.data.binding.IInputReceiver} the object which is meant to receive the output of this segment
+     */
+    getOutputReceiver() {
+      return this.__outputReceiver;
+    },
+
+    /**
+     * @override
+     * @interface qx.data.binding.IInputReceiver
+     *
+     * Sets the input value for this segment.
+     * We will find the output value by dereferencing the input value with this segment (e.g. property name or array index),
+     * and then relay it to the output receiver, which is usually another segment or the instance of `qx.data.SingleValueBinding`.
+     *
+     * @param {qx.core.Object} value the input that we are dereferencing with the path or array index
+     * @returns {Promise?} If the operation is asynchronous, i.e. dereferencing a value at any part of the segment chain was asynchronous,
+     * or setting the target value was asynchronous, it will return a Promise which resolves when all the operations have completed.
+     * If it's synchronous, it returns null.
+     */
+    setInput(value) {
+      if (value === this.__input) {
+        return null; // no change
+      }
+      let old = this.__input;
+      this.__input = value;
+
+      let out = this._applyInput(value, old);
+      if (qx.lang.Type.isPromise(out)) {
+        return out.then(() => this.fireDataEvent("changeInput", value, old));
+      } else {
+        return this.fireDataEvent("changeInput", value, old);
+      }
+    },
+
+    /**
+     *
+     * @returns {qx.core.Object} the input value that this segment is currently using
+     */
+    getInput() {
+      return this.__input;
+    },
+
+    /**
+     * @abstract
+     *
+     * This method is overridden in subclasses,
+     * and computes the output value based on the input,
+     * and adds listeners to changes to the desired property in the input value,
+     * and then relays the output value to the output receiver, which is usually another segment but can also be the binding object.
+     *
+     * @param {qx.core.Object} value
+     * @param {qx.core.Object} oldValue
+     * @returns {Promise?} If the operation is asynchronous (i.e. dereferencing a value at any part of the segment chain was asynchronous),
+     * or setting the target value was asynchronous, it will return a Promise which resolves when all the operations have completed.
+     * If it's synchronous, it returns null.
+     */
+    _applyInput(value, oldValue) {},
+
+    /**
+     * Called when the output value has been computed and needs to be set on the output receiver.
+     * @param {qx.core.Object | null | undefined} output The output to the next segment. Undefined if the input to this segment was nullish.
+     * Null if the input was not nullish but the output is null.
+     *
+     * @returns {Promise?} If the operation is asynchronous, i.e. dereferencing a value at any part of the segment chain was asynchronous,
+     * or setting the target value was asynchronous, it will return a Promise which resolves when all the operations have completed.
+     * If it's synchronous, it returns null.
+     */
+    _setOutput(output) {
+      if (!this.__outputReceiver) {
+        throw new Error("No output receiver set");
+      }
+      return this.__outputReceiver.setInput(output);
+    },
+
+    /**
+     * Computes the output value based on the input and calls _setOutput with that value.
+     * If this operation is asynchronous, it returns a Promise which resolves when the output property has been fully set.
+     * Otherwise, it returns null.
+     *
+     * @abstract
+     * @returns {Promise?}
+     */
+    updateOutput() {
+      throw new Error(`${this.classname}.updateOutput not implemented`);
+    },
+
+    /**
+     * Sets the property on the `input` object depicted by this segment to the given value.
+     * @abstract
+     * @param {* | null | undefined} value If undefined, this resets the target property. Otherwise, it sets the target property to the given value.
+     * @returns {Promise?} If the operation is asynchronous, returns a Promise which resolves when the value has been set.
+     * If it's synchronous, it returns null.
+     */
+    setTargetValue(value) {
+      throw new Error(`${this.classname}.setTargetValue not implemented`);
+    }
+  }
+});

package/source/class/qx/data/binding/ArrayIndexSegment.js

@@ -0,0 +1,155 @@
+/* ************************************************************************
+
+   qooxdoo - the new era of web development
+
+   http://qooxdoo.org
+
+   Copyright:
+     2022-2023 Zenesis Limited, https://www.zenesis.com
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+    * Patryk Malinowski (https://github.com/patryk-m-malinowski, pmalinowski116@gmail.com)
+
+************************************************************************ */
+
+/**
+ * Binding Segment that handles array indexes; the path is expected to be `[index]`
+ */
+qx.Class.define("qx.data.binding.ArrayIndexSegment", {
+  extend: qx.data.binding.AbstractSegment,
+  /**
+   * @param {qx.data.SingleValueBinding} binding The binding that this segment belongs to.
+   * @param {string} segment String representation of the segment, such as `[0]` or `[last]`
+   */
+  construct(binding, segment) {
+    super(binding);
+    this.__string = segment;
+
+    if (qx.core.Environment.get("qx.debug")) {
+      this.assertTrue(segment.startsWith("[") && segment.endsWith("]"), "Array index segment must start with [ and end with ]: " + segment);
+    }
+
+    let index = segment.substring(1, segment.length - 1);
+    if (index === "last") {
+      index = -1; // special case for last item
+    } else {
+      index = parseInt(index);
+      if (isNaN(index)) {
+        throw new Error("Invalid array index in segment: " + segment);
+      }
+      if (index < 0) {
+        throw new Error("Array index must be >= 0, got: " + index);
+      }
+    }
+    this.__index = index;
+  },
+
+  destruct() {
+    let input = this.getInput();
+    if (input) {
+      if (this.__isListData(this.getInput())) {
+        this.getInput().removeListener("change", this.__onChangeContents, this);
+      }
+    }
+  },
+
+  members: {
+    /**
+     * @type {String} the string representation of this segment
+     */
+    __string: null,
+
+    /** @type {Integer} the index into the array */
+    __index: null,
+
+    /**@override */
+    toString() {
+      return this.__string;
+    },
+
+    __isListData(input) {
+      return qx.Interface.objectImplements(input, qx.data.IListData);
+    },
+
+    /**
+     * @override
+     */
+    _applyInput(value, oldValue) {
+      if (oldValue) {
+        this.setEventName(null);
+        if (this.__isListData(oldValue)) {
+          oldValue.removeListener("change", this.__onChangeContents, this);
+        }
+      }
+
+      if (value) {
+        if (this.__isListData(value)) {
+          value.addListener("change", this.__onChangeContents, this);
+          this.setEventName("change");
+        }
+      }
+      if (this.getOutputReceiver()) {
+        return this.updateOutput();
+      }
+    },
+
+    /**@override */
+    updateOutput() {
+      return this._setOutput(this.__get());
+    },
+
+    /**
+     * Computes the output value
+     * @returns {*}
+     */
+    __get() {
+      let input = this.getInput();
+      if (!input) {
+        return undefined;
+      }
+
+      if (this.__isListData(input)) {
+        const len = input.getLength();
+        const idx = this.__index === -1 ? len - 1 : this.__index;
+        return idx >= len ? undefined : input.getItem(idx);
+      }
+
+      if (this.__index >= input.length) {
+        return undefined;
+      }
+      return input.at(this.__index);
+    },
+
+    /**
+     * @override
+     */
+    setTargetValue(targetValue) {
+      let input = this.getInput();
+      if (!input) {
+        return;
+      }
+      if (this.__isListData(input)) {
+        const idx = this.__index === -1 ? input.getLength() - 1 : this.__index;
+        input.setItem(idx, targetValue);
+      } else {
+        const idx = this.__index === -1 ? input.length - 1 : this.__index;
+        input[idx] = targetValue;
+      }
+    },
+
+    /**
+     * Event handler for when the contents of the array changes
+     *
+     * @param {qx.event.type.Data} evt
+     */
+    __onChangeContents(evt) {
+      if (this.getOutputReceiver()) {
+        this.updateOutput();
+      }
+    }
+  }
+});

package/source/class/qx/data/binding/IInputReceiver.js

@@ -0,0 +1,14 @@
+/**
+ * Interface for objects that can receive the output from a binding path segment.
+ */
+qx.Interface.define("qx.data.binding.IInputReceiver", {
+  members: {
+    /**
+     *
+     * @param {*} value
+     * @returns {Promise?} If the operation is asynchronous, it should return a Promise which resolves when it has completed.
+     * If it's synchronous, it should return null.
+     */
+    setInput(input) {}
+  }
+});

package/source/class/qx/data/binding/PropNameSegment.js

@@ -0,0 +1,150 @@
+/* ************************************************************************
+
+   qooxdoo - the new era of web development
+
+   http://qooxdoo.org
+
+   Copyright:
+     2022-2023 Zenesis Limited, https://www.zenesis.com
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+     * Patryk Malinowski (https://github.com/patryk-m-malinowski, pmalinowski116@gmail.com)
+
+************************************************************************ */
+
+/**
+ * Segment that represents a property name in a binding path.
+ */
+qx.Class.define("qx.data.binding.PropNameSegment", {
+  extend: qx.data.binding.AbstractSegment,
+
+  /**
+   * @param {qx.data.SingleValueBinding} binding The binding that this segment belongs to.
+   * @param {String} propName
+   */
+  construct(binding, propName) {
+    super(binding);
+    let lower = qx.lang.String.firstLow(propName);
+    if (qx.core.Environment.get("qx.debug")) {
+      if (lower !== propName) {
+        this.warn(`Binding: property name "${propName}" should be lower case, using "${lower}" instead`);
+      }
+    }
+    this.__propName = lower;
+  },
+
+  /**
+   * Destructor
+   */
+  destruct() {
+    let input = this.getInput();
+    if (input) {
+      let eventName = this.__getEventName(input);
+      eventName && input.removeListener(eventName, this.__onChangeInputProperty, this);
+    }
+  },
+
+  members: {
+    /** @type {String} the property name for this segment */
+    __propName: null,
+
+    /**
+     *
+     * @returns {String} the property name for this segment
+     */
+    getPropName() {
+      return this.__propName;
+    },
+
+    /**@override */
+    toString() {
+      return this.__propName;
+    },
+
+    /**
+     * Apply for `input`
+     */
+    _applyInput(value, oldValue) {
+      if (oldValue) {
+        let eventName = this.__getEventName(oldValue);
+        eventName && oldValue.removeListener(eventName, this.__onChangeInputProperty, this);
+        this.setEventName(null);
+      }
+
+      if (value) {
+        let eventName = this.__getEventName(value);
+        eventName && value.addListener(eventName, this.__onChangeInputProperty, this);
+        this.setEventName(eventName);
+      }
+
+      if (this.getOutputReceiver()) {
+        return this.updateOutput();
+      }
+    },
+
+    updateOutput() {
+      let input = this.getInput();
+      if (input === null || input === undefined) {
+        return this._setOutput(undefined);
+      } else {
+        let property = qx.Class.getByProperty(input.constructor, this.__propName);
+        if (property === null) {
+          return this._setOutput(null);
+        }
+        if (!property.isAsync() || property.isInitialized(input)) {
+          let nextInput = property.get(input, this.__propName);
+          return this._setOutput(nextInput);
+        } else {
+          let promise = property.getAsync(input);
+          return promise.then(nextInput => this._setOutput(nextInput));
+        }
+      }
+    },
+
+    /**
+     * @override
+     */
+    setTargetValue(targetValue) {
+      if (this.getInput() == null || this.getInput() === undefined) {
+        return;
+      }
+      if (targetValue !== undefined) {
+        return qx.data.SingleValueBinding.set(this.getInput(), this.__propName, targetValue);
+      } else {
+        return qx.data.SingleValueBinding.reset(this.getInput(), this.__propName);
+      }
+    },
+
+    /**
+     * Event handler for when the input property changes
+     *
+     * @param {qx.event.type.Data} evt
+     */
+    __onChangeInputProperty(evt) {
+      if (this.getOutputReceiver()) {
+        return this._setOutput(evt.getData());
+      }
+    },
+
+    /**
+     *
+     * @param {*} input
+     * @returns {string}
+     */
+    __getEventName(input) {
+      let property = qx.Class.getByProperty(input.constructor, this.__propName);
+      if (property) {
+        return property.getEventName();
+      }
+
+      if (qx.Class.supportsEvent(input.constructor, this.__propName)) {
+        return this.__propName;
+      }
+      return null;
+    }
+  }
+});

package/source/class/qx/data/controller/CheckedList.js

@@ -24,7 +24,7 @@
  * is the complete array of items that can be selected, and that array is used to populate
  * the UI widget (ie as normal).
  *
- * The `checked` psuedo property in this `CheckedList` controller relates to the checked
+ * The `checked` pseudo property in this `CheckedList` controller relates to the checked
  * property of the UI widget.
  */
 qx.Class.define("qx.data.controller.CheckedList", {

package/source/class/qx/data/controller/Form.js

@@ -96,6 +96,28 @@ qx.Class.define("qx.data.controller.Form", {
     __objectController: null,
     __bindingOptions: null,
 
+    /**
+     * Helper method to convert a form item name to camelCase for model property names.
+     * This ensures v8 compatibility where property names follow camelCase conventions.
+     * For deep binding (names with dots), each part is converted separately.
+     *
+     * @param name {String} The form item name (may contain dots for deep binding)
+     * @return {String} The camelCase converted name
+     */
+    __convertNameToCamelCase(name) {
+      if (!name) {
+        return name;
+      }
+
+      // For deep binding, split by dot and convert each part
+      var parts = name.split(".");
+      var convertedParts = parts.map(function (part) {
+        return qx.lang.String.firstLow(part);
+      });
+
+      return convertedParts.join(".");
+    },
+
     /**
      * The form controller uses for setting up the bindings the fundamental
      * binding layer, the {@link qx.data.SingleValueBinding}. To achieve a
@@ -125,13 +147,16 @@ qx.Class.define("qx.data.controller.Form", {
         ? "modelSelection[0]"
         : "value";
 
+      // Convert to camelCase for v8 compatibility (issue #10808)
+      var modelPropertyName = this.__convertNameToCamelCase(name);
+
       // remove the binding
-      this.__objectController.removeTarget(item, targetProperty, name);
+      this.__objectController.removeTarget(item, targetProperty, modelPropertyName);
       // set up the new binding with the options
       this.__objectController.addTarget(
         item,
         targetProperty,
-        name,
+        modelPropertyName,
         !this._selfUpdate,
         model2target,
         target2model
@@ -158,8 +183,35 @@ qx.Class.define("qx.data.controller.Form", {
 
       var items = target.getItems();
       var data = {};
+      var nameMapping = {}; // For collision detection (issue #10808)
+
       for (var name in items) {
-        var names = name.split(".");
+        // Convert to camelCase for v8 compatibility (issue #10808)
+        // v8's binding system automatically converts property names to lowercase
+        var camelCaseName = this.__convertNameToCamelCase(name);
+
+        // COLLISION DETECTION: Detect if multiple fields map to same camelCase name
+        // Example: "Username" and "username" both map to "username"
+        if (nameMapping[camelCaseName] && nameMapping[camelCaseName] !== name) {
+          throw new Error(
+            "Form field naming collision detected (issue #10808): " +
+            "Fields '" + nameMapping[camelCaseName] + "' and '" + name + "' " +
+            "both convert to the same camelCase property name '" + camelCaseName + "'.\n\n" +
+            "This happens when field names differ only in capitalization.\n" +
+            "qooxdoo v8's binding system automatically converts property names to lowercase first letter,\n" +
+            "which causes both field names to map to the same model property.\n\n" +
+            "To fix this issue:\n" +
+            "  1. Rename one of the conflicting fields to have a distinct name\n" +
+            "  2. Ensure all field names are unique when converted to camelCase\n\n" +
+            "Conflicting fields:\n" +
+            "  - '" + nameMapping[camelCaseName] + "'\n" +
+            "  - '" + name + "'\n" +
+            "Both map to model property: '" + camelCaseName + "'"
+          );
+        }
+        nameMapping[camelCaseName] = name;
+
+        var names = camelCaseName.split(".");
         var currentData = data;
         for (var i = 0; i < names.length; i++) {
           // if its the last item
@@ -218,11 +270,14 @@ qx.Class.define("qx.data.controller.Form", {
         var options = this.__bindingOptions[name];
         options = options && this.__bindingOptions[name][1];
 
+        // Convert to camelCase for v8 compatibility (issue #10808)
+        var modelPropertyName = this.__convertNameToCamelCase(name);
+
         qx.data.SingleValueBinding.updateTarget(
           item,
           sourceProperty,
           this.getModel(),
-          name,
+          modelPropertyName,
           options
         );
       }
@@ -261,7 +316,13 @@ qx.Class.define("qx.data.controller.Form", {
           var targetProperty = this.__isModelSelectable(item)
             ? "modelSelection[0]"
             : "value";
-          this.__objectController.removeTarget(item, targetProperty, name);
+          // Convert to camelCase for v8 compatibility (issue #10808)
+          var modelPropertyName = this.__convertNameToCamelCase(name);
+          this.__objectController.removeTarget(
+            item,
+            targetProperty,
+            modelPropertyName
+          );
         }
       }
 
@@ -309,20 +370,23 @@ qx.Class.define("qx.data.controller.Form", {
           : "value";
         var options = this.__bindingOptions[name];
 
+        // Convert to camelCase for v8 compatibility (issue #10808)
+        var modelPropertyName = this.__convertNameToCamelCase(name);
+
         // try to bind all given items in the form
         try {
           if (options == null) {
             this.__objectController.addTarget(
               item,
               targetProperty,
-              name,
+              modelPropertyName,
               !this._selfUpdate
             );
           } else {
             this.__objectController.addTarget(
               item,
               targetProperty,
-              name,
+              modelPropertyName,
               !this._selfUpdate,
               options[0],
               options[1]
@@ -367,7 +431,13 @@ qx.Class.define("qx.data.controller.Form", {
         var targetProperty = this.__isModelSelectable(item)
           ? "modelSelection[0]"
           : "value";
-        this.__objectController.removeTarget(item, targetProperty, name);
+        // Convert to camelCase for v8 compatibility (issue #10808)
+        var modelPropertyName = this.__convertNameToCamelCase(name);
+        this.__objectController.removeTarget(
+          item,
+          targetProperty,
+          modelPropertyName
+        );
       }
     },