oopprototypejavascriptsapui5

Why does extending prototypes of OpenUI5 controls not work consistently?


I'm using openui5. There is a constructor Function for UI control Button,unable to see the prototype properties of the Button but the same thing when executed in browser console, shows up!

 sap.m.Button.prototype.Move = function(){
  console.log('Move');
} 
var oButton = new sap.m.Button({text:"Hello"});
oButton.Move(); // throws undefined function! 

The same code when executed browser in console, it works!

jsbin --> http://jsbin.com/tepum/1/edit


Solution

  • After running the code I find that creating the first instance of sap.m.Button causes script to change the prototype of sap.m.Button. It's valid in JavaScript but not very smart if you ask me.

    A first creation causes a synchronous request (no no as well) to fetch library-parameters.json.

    If you run the code the second time it will have prototype.move because creating an instance of Button will not change the Button.prototype.

    The capital M in Move would suggest a constructor function so I would advice changing it to lower case.

    Since fetching the parameters is synchronous you can create the first instance and then set the prototype:

    console.log("First Button creation changes Button.prototype");
    var oButton = new sap.m.Button({text:"Hello"});
    sap.m.Button.prototype.move = function(){
      console.log('Move');
    } 
    oButton.placeAt('content');
    oButton.move(); // logs Move
    

    My guess is that this is done to lazy load controls, if a Button is never created then the json config files are never loaded for these unused controls. It has a couple of drawbacks though.

    1. You have to create an instance first before you can set the prototype.
    2. The config files are synchronously loaded so when creating first instance of many controls with a slow connection would cause the app to be unresponsive.

    A better way would be for a factory function to return a promise so you create the control the same way every time and the config files can be fetched asynchronously.

    [update]

    Looking at the config it seems to be config for the whole gui library so I can't see any reason why this is loaded only after creating a first instance. A library that changes it's object definitions when creating instances is not very easy to extend because it's unpredictable. If it only changes prototype on first creation then it should be fine but it looks like the makers of the library didn't want people to extend it or they would not make the object definition unpredictable. If there is an api documentation available then maybe try to check that.

    [update]

    It seems the "correct" way to extend controls is to use extend.