Custom Control: "Lifecycle-Method" when aggregation is updated

user_8657837 0
Viewed 82

I am creating a simple custom control:

sap.ui.define([
  "sap/ui/core/Control"
], function(Control) {
  "use strict";

  return Control.extend("my.control.SvgVisualizer", {
    metadata: {
      properties: {
        width: {
          type: "sap.ui.core.CSSSize",
          defaultValue: "100%"
        },
        height: {
          type: "sap.ui.core.CSSSize",
          defaultValue: "100%"
        }
      },
      aggregations: {
        elements: {
          type: "my.control.Element",
          multiple: true,
          singularName: "element"
        }
      }
    },

    renderer: {
      apiVersion: 2,
      render: function(oRm, oControl) {
        oRm.openStart("svg", oControl.getId())
          .attr("viewBox", oControl._sViewBox)
          .attr("width", oControl.getWidth())
          .attr("height", oControl.getHeight())
          .openEnd();
        oRm.close("svg");
      }
    }
  });
});

Basically, it can be used to implement svg stuff with aggregations into SAPUI5. When creating the svg (html)-element in the renderer function I need a viewBox.

I would like to calculate the value for the viewBox based on the properties of the controls in the aggregation elements. The calculation could be pretty heavy if there are loads of elements.

My question is where I should calculate the viewBox property. It needs to be recalculated when the aggregation elements changes (so init isn't enough) but it does not need to be recalculated every time the renderer function is called.

Is attaching a handler to the aggregation-binding in the constructor the best way: this.getBinding("elements").attachChange(...)

sapui5
1 Answers

It is possible to override all the aggregation modifiers like addElement, removeElement, ...etc and recalculate there. But I would suggest to implement some kind of change detection for the elements aggregation in the onBeforeRendering hook and perform calculations only if the aggregation has changed. This way you don't need to worry if you have overridden all the modifiers correctly and you have the implementation on a single place. For example:

onBeforeRendering: function () {
    var currElements = this.getElements();
    var recalculate = false;

    if (!this._oldElements) {
        recalculate = true;
    } else if (this._oldElements.length !== currElements.length) {
        recalculate = true;
    } else if (... another condition that should trigger recalculation) {
        recalculate = true;
    }

    if (recalculate) {
        this._sViewBox = ...;
        this._oldElements = currElements;
    }
    
}
user_56929380
Related