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.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply