in my all components until Design Studio SDK: Data Bound Top/Flop Chart I had a full repaint after every selection. Then I asked myself how to figure out if the content has changed or if only selection has changed.. here the (not neccessary best) practice how this is possible.
Baseline
this is based on the functions available form 1.3 SP1, as in the blog SAP UI5 SDK - Component Life Cycle.
Idea
alsways serialize all properties (in generic way) with some excluding list. if the serialization is different, rerender. if same - just update the properties which are on the excluding list.
Script for Serialization
By this script I could get a dynamic serialization of all given properties:
_serializeProperites : function (excluding){
var props = this.oComponentProperties.content.control;
// should also work if no excluding parameter is given
if(excluding == undefined) {
excluding = "";
}
// create some primitive string and loop on all properties
var serialization = "";
for (var key in props) {
if (props.hasOwnProperty(key) && excluding.indexOf(key) == -1) {
serialization = serialization + key + "->" + props[key] + ";";
}
}
// serialize also width, or other size values (here only width is important)
serialization = serialization + "W->" + this.oComponentProperties.width;
serialization = serialization + "H->" + this.oComponentProperties.height;
// data (for data based components)
serialization = serialization + "DATA->" + JSON.stringify(this._data);
serialization = serialization + "METADATA->" + JSON.stringify(this._metadata);
return serialization;
},
Where to bind the check
the check must be executed in some method which is called after all properties from current response are updated - this will be:
afterDesignStudioUpdate : function() {
the script is quite basic:
var propertiesNow = this._serializeProperites("selectedKey;pressedKey");
if(this._serializedPropertiesAfter != propertiesNow) {
this._serializedPropertiesAfter = propertiesNow;
rerender = true;
}
and then you can simply have a flow...
if(rerender) {
// destroy old content and recreate
} else {
// update existing content
}
Summary
by this you can save a lot of rendering time in quite easy way.
