Hey All,

In this blog, let me explain how to make a function available to all the UI5 controls. So, to do this we gotta add the function to the control sap.ui.core.Control which is the base class of all the UI5 Controls.

UI5.jpg

So the concept here is, all the UI5 controls inherited from sap.ui.core.Control & thus adding a function to the sap.ui.core.Control would make sure that function is inherited by all the controls.

To do this we gotta load sap.ui.core.Control by doing,


jQuery.sap.require('sap.ui.core.Control');





Now we gotta add our function to the prototype of sap.ui.core.Control. say let me name the function as “test”.


sap.ui.core.Control.prototype.test = function(){
          alert("My Custom Function!");
}






I’m just doing an alert if this function is called. Now let’s test it by creating a button instance and check whether the function test() is available there.



var oButton = new sap.m.Button({text:"Sample",
                                                 press :  function(oEvent){
                                                      oButton.test();          
                                                 }
                         });






Now every time the Button is press, the function test() will be triggered. Now the function test() can be invoked from all the UI5 controls.

chek out the example snippet http://jsbin.com/jonud/1/edit



To Make it pratical, in one of the blog Draggable Controls in UI5 ! it was about implementing Draggable feature to UI5 Controls by using jQuery UI.  So, there we had to do all those jQuery stuff of grabbing the element from the DOM & blah blah blah. Now, lets make it cooler by creating a function draggable() and add it to UI5 controls so that just calling the UI5control.draggable() would do all the stuff for us.

I have put up the code for the function here Draggable

So once you add this code, the draggable() function will be avail to all the controls. say you can do something like,



var oButton = new sap.m.Button({text:"Drag Me"});
oButton.draggable(); // will make the button draggable.






Here’s an example snippet,

JS Bin – Collaborative JavaScript Debugging</title> <link rel="icon" href="http://static.jsbin.…



Regards

Sakthivel


To report this post you need to login first.

4 Comments

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

  1. Thomas Bonk

    You can even do Method Swizzling (i.e. extending existing methods), for example:

    ...

    sap.ui.core.Control.prototype.placeAt_old = sap.ui.core.Control.prototype.placeAt;

    sap.ui.core.Control.prototype.placeAt = function (oRef, oPosition) {

          console.log ('Im the new placeAt method');    

         return this.placeAt_old(oRef, oPosition);     

    } ...

    (1) 
  2. Rashmi Nagendra

    Hi Sakthivel,

    I have a usecase where two controllers have similar functions except few. So I would like to implement inheritance of controller. Is there any example for same?

    Thanks,

    Rashmi

    (0) 

Leave a Reply