SAPUI5: Example for a composite control?

Question

I am searching for a good example of a composite control. My current problem is, that I plan to bind a simple value (for example a string) that will be reused in some other control inside a composite control.

Following code seems not correct:

metadata : {
    properties : {
        "head" : {type : "string", defaultValue : ""},
        ...
    },
},

init : function() {

... some control with content ...
content : [
new sap.m.Label({text : this.getHead()})
]
...

My plan to call the composite control would look like this: var oTemplate = new MyControl({ head : "{Name}" }); Using the template for example in a list.

Binding may work, but because of the fact that I build the control in the "init" part it looks like the property is not initialised and will not be updated automatically.

A further experiment (that will not work):

jQuery.sap.declare("StrangeControl");
sap.m.HBox.extend("StrangeControl", {

    metadata : {
        properties : {
        },
        aggregations : {            
            input        : {type : "sap.m.Input", multiple : false},
        }
    },

    // will be called during creation time
    init : function() {
        sap.m.HBox.prototype.init.call(this);
        this.addItem(this.getAggregation("input"));
    },    

    renderer : {},

    onAfterRendering : function() {
        if (sap.m.HBox.prototype.onAfterRendering!==undefined) {
            sap.m.HBox.prototype.onAfterRendering.call(this);
        }
    }
});

I assume to use the control that way:

new StrangeControl({
   input : new sap.m.Input({value : "test"})
})

But during init input is not defined (==null). The mentioned example https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/SelectDialog.js seems to handle the "items" in a different way but for me it is not clear how.

Meanwhile there a documentation exists (at least in OpenUI5beta SDK). https://openui5.hana.ondemand.com/#/topic/c1512f6ce1454ff1913e3857bad56392

If the link does not work search for "Composite Controls" inside the "DEVELOPER GUIDE" section.

sirion sirion · Accepted Answer · 2014-10-27T21:28:37

A: Just add your internal control to a hidden aggregation - it will automatically get all the data binding for free, you just have to bind the properties/aggregations of that control accordingly.

B: You could also overwrite the setters of your outer control which then call the setters of the inner control in order to propagate the values.

setHead : function(oValue) {
  return this.getAggregation("_myHiddenInnerControl").setValue(oValue);
}

It is still necessary to add the inner control to an aggregation, to avoid memory leaks (else you have to make sure everything is cleaned up in the exit method.

SAPUI5: Example for a composite control?

1 Answers